Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Meny med hjälp av css

Skapad av Fernestam, 2011-10-24 02:10 i Webbutveckling & Programmering

4 919
4 inlägg
0 poäng
Fernestam
Visningsbild
F 32 Landskrona Hjälte 2 184 inlägg
2011-10-24 02:10
0
Hamstrar, i need your help!

håller på med ett projekt till skolan, en hemsida då.
men så funkar inte min meny!
Jag har gjort en meny med hjälp av li & ul & länkat dom. men så har jag undermenyer, & det är dom som inte vill fungera som undermenyer, utan det ligger bara som undermenyer. typ såhär

meny 1
-------undermeny 1
-------undermeny 2
randomnamn
randomigen
------ännu en under meny

Dom ligger typ så, men jag vill ha så att när man då trycker på "meny 1" DÅ ska undermeny 1 & 2 komma fram. Dom ska alltså inte synas förren man hovrar eller trycker på meny 1, aah ni fattar..

koden;

<p><ul><li><a href="index.html">Hem</a></li>
<li><a href="truppen.html">Truppen</a></li>
<li><a href="#">Matcher</a>
<ul>
<li> <a href="Amatcher.html">Matcher A</a></li>
<li> <a href="Umatcher.html">Matcher U</a></li>
<li> <a href="Tmatcher.html">Träningsmatcher</a></li>
<li> <a href="Smatcher.html">Svenska Cupen</a></li>
</ul>
</li>
<li><a href="SV.html">Skador & Varningar</a></li>
<li><a href="arkiv.html">Arkiv</a></li>
<li><a href="#">Bilder</a>
<ul>
<li> <a href="Abilder.html">Bilder A</a></li>
<li> <a href="Ubilder.html">Bilder U</a></li>
</ul>
</li>
<li><a href="ov.html">Onödigt vetande</a></li>
<li><a href="kontakt.html">Kontakt</a></i>
</ul>
</p>

& jag har letat på nätet, men jag fattar inte redigt vad jag ska skriva i css, för jag vill ha den vertikal inte horisontell så kan ju inte ha "float:left" ..

någon som vet ?

http://fernies.blogg.se/ || Landskrona BoIS - GGMU ♥

Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

V_iktor
Visningsbild
P 29 Hjälte 357 inlägg
2011-10-24 02:15
0

Svar till Fernestam [Gå till post]:
du måste använda div-taggar som är osynliga och blir synliga först när du klickar på menyval1.

Annars får du använda javascript eller flash.

shu

Direktlänk Svara på inlägg Gästbok
Skicka
Christley
Visningsbild
P -1322 Bandhagen Hjälte 6 449 inlägg
2011-10-24 03:07
0
finns inget som länkar fram det.
när jag skrev en sida för typ 3 år sen använde jag ett javascript för att trycka ned menyn

being skinny with abs is like a fat bitch with big tits - it doesn't count

Direktlänk Svara på inlägg Gästbok
Skicka
Yamjenova
Visningsbild
P 32 Nödinge Hjälte 598 inlägg
2011-10-24 04:42
0
Svar till Fernestam [Gå till post]:
Du vill alltså ha en drop down menu? Jag googlade lite och hittade redan klara koder för att göra en sådan meny:

Ett stycke html-kod:

<html>
<head>
 <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
 <br>
 <br>
 <div class="menu">
  <ul>
   <li><a href="index.html">Hem</a></li>
   <li><a href="truppen.html" id="current">Truppen</a>
   <li><a href="#">Matcher</a>
    <ul>
     <li><a href="Amatcher">Matcher A</a></li>
     <li><a href="Umatcher">Matcher U</a></li>
     <li><a href="Tmatcher">Träningsmatcher</a></li>
     <li><a href="Smatcher">Svenska Cupen</a></li>
      </ul>
    </li>
                <ul>
                <li><a href="#">Skador & Varningar</a></li>
                <li><a href="#">Arkiv</a></li>
                <li><a href="#">Bilder</a></li>
                <li><a href="#">osv..</a></li>
                </ul>
  </ul>
 </div>

</body>
</html>


Spara som Index, sedan gör du en CSS fil:
Ett stycke css-kod:

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
.menu ul{
 background:#333333;
 height:35px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .menu li{
  float:left;
  padding:0px;
  }
 .menu li a{
  background:#333333 bottom right no-repeat;
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:35px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover, .menu ul li:hover a{
   background: #2580a2 bottom center no-repeat;
   color:#FFFFFF;
   text-decoration:none;
   }
 .menu li ul{
  background:#333333;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:225px;
  z-index:200;
  }
 .menu li:hover ul{
  display:block;
  
  }
 .menu li li {
  background-color:#fff bottom left no-repeat;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:225px;
  }
 .menu li:hover li a{
  background:none;
  
  }
 .menu li ul a{
  display:block;
  height:35px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .menu li ul a:hover, .menu li ul li:hover a{
   background:#2580a2 center left no-repeat;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
 .menu p{
  clear:left;
  }

Glöm inte att spara css koden som "menu_style.css"

Forum image


Jag är inte arg.

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Meny med hjälp av css

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons