0 Drop down menu

Drop down menu

, ,

Denna guide visar hur man skapar en enkel drop down menu till din blogg eller hemsida. Guiden innehåller även ett färdigt exempel som direkt går att använda!

En drop down menu är ett bra sätt att organisera sidlänkar på hemsidan.

Här hittar du nedanstående exempel

Vi börjar med HTML delen.

HTML

<ul id="dropdown">
  <li><a href="#">Länk 1</a>
    <ul>
      <li><a href="#">Länk 1 - 1</a></li>
      <li><a href="#">Länk 1 - 2</a></li>
      <li><a href="#">Länk 1 - 3</a></li>
   </ul>
 </li>
 <li><a href="#">Länk 2</a>
    <ul>
      <li><a href="#">Länk 2 - 1</a></li>
      <li><a href="#">Länk 2 - 2</a></li>
      <li><a href="#">Länk 2 - 3</a></li>
    </ul>
  </li>
  <li><a href="#">Länk 3</a></li>
  <li><a href="#">Länk 4</a></li>
</ul>

Här sätter vi upp strukturen för vår drop down menu.  Menyn består av ett oordnad lista , <ul>, med fyra listelement <li>. I dessa finns först en länk, <a>, och sedan en ny oordnad lista <ul> med egna listelement <li>. De två första länkarna ”Länk 1″ och ”Länk 2″ har varsin drop down menu medan ”Länk 3″ och ”Länk 4″ inte har det.

CSS

#dropdown {
 float: left;
 margin: 0;
 padding: 0;
}
#dropdown li {
 background: #F7F0E0;
 border:1px solid #666;
 float: left;
 list-style: none;
 margin: 0;
 padding:0 0 0 10px;
 position: relative;
 height:20px;
 width:100px;
}
#dropdown li:hover {
 background: #FF2828;
}
#dropdown li a {
 text-decoration:none;
}
#dropdown ul {
 background: #F7F0E0;
 display: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 20px;
 left: -1px;
 z-index: 500;
}
#dropdown ul {
 position: absolute;
}
#dropdown li:hover ul {
 display: block;
}

Hela drop down menyn styrs enbart av CSS. I en senare guide kommer vi att lägga på javascripteffekter med hjälp av jQuery men här nöjer vi oss med CSS.

Drop down menyerna döljs genom att vi till och börja med anger regeln ”display:none”. När sedan muspekaren befinner sig över listelementet som drop down menyerna finns i så visar vi dem med CSS-regeln ”display:block”. Detta sker att använda pseudo-väljaren ”:hover” .

Här kan du lära dig mer om hur du skriver CSS regler!

Dela

| Mer

Kommentarer

O kommentarer för " Drop down menu" Kommentera nu!

Lämna en kommentar!

Lämna en kommentar

Namn* Epost* Blogg / Webbsida
Liknande artiklar
0

Flytande citat som i veckotidningar

I många magasin och tidningar brukar det finnas citat som flyter inuti ett textstycke. Detta guide visar dig steg för steg hur du kan lägga in citat i din text med hjälp av CSS och HTML-taggen blockqu...

2

Genomskinliga bilder med CSS

Med CSS är det möjligt att ge bilder olika grad av genomskinlighet. Det kan vara en en användbar effekt om man exempelvis vill ge fokus åt vissa bilder i ett bildgalleri. Den här guiden visar hur man ...

4

Runda hörn med css

Det finns en rad olika tekniker för att skapa runda hörn med hjälp av css. Här är ett av de enklaste sätten att skapa runda hörn på en box. Metoden använder sig av fyra div taggar, några få rader cssk...