0

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