En bonus familjs vardag

Färgpalett

Min blogg handlar om vardagen!

Färgpalett

Gratis designer i m

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!

Min blogg, gör gratis designer. Gör även lite mer avancerade headrar

Färgpalett

Jag gör både enkla & avancerade designer. En enkel kostar det 30 KR & en mer avancerad kostar det 70.

Färgpalett

min blogg handlar om allt från min vardag till helg, kompisar, outfits, shopping osv.

Färgpalett