Dette er en tutorial på hvordan å lage ren CSS Drop down menyen uten å bruke javascript. Jeg la merke imidlertid at folk ofte bruker JavaScript for å oppnå denne effekten. Egentlig er det en enkel måte å gjøre det kun med CSS.

Her er eksempelet

Trinn første: vi skape en grunnleggende HTML struktur.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <Div id = "header"> <h1> Developer's Paradise demoer </ h1> <ul id = "meny"> <li> <span> Home </ span> <ul> <li> <a href = "#" > Menyelement 1 </ a> </ li> <li> <a href = "#"> Menyelement 2 </ a> </ li> <li> <a href = "#"> Meny punkt 3 </ a> </ li> </ ul> </ li> <li> <span> Om oss </ span> <ul> <li> <a href = "#"> Menyelement 1 </ a> </ li > <li> <a href = "#"> Menyelement 2 </ a> </ li> <li> <a href = "#"> Meny punkt 3 </ a> </ li> </ ul> < / li> <li> <span> Produkter </ span> <ul> <li> <a href = "#"> Menyelement 1 </ a> </ li> <li> <a href = "#"> menyelementet 2 </ a> </ li> <li> <a href = "#"> Meny punkt 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Trinn andre: nå er vi skape magi CSS-kode

  ; padding : 0 ; } * {Margin: 0; padding: 0;}

 body {
 ; bakgrunn: # 222;
 Arial, Helvetica, sans-serif ; font: 100% normal Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # fff;}

 # Header {
 ; Høyde: 120px; stilling: relative;
 ; bakgrunn: # 333;
 }

 # Menyen {
 margin: 0px;
 padding: 0px;
 posisjon: absolutt;
 ; top: 70px;
 display: block;
 }

 #-Menyen> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 stilling: relative;
 padding: 10px;
 Bredde: 100 piksler;
 }

 ul { #-Menyen> li: hover ul {
 display: block;
 }

 { #-Menyen> li: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Meny ul li {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Meny ul li li {
 list-style-type: none;
 ; margin: 10px 0 0 0;
 font-size: 11px;
 }

 # Meny ul li li en {
 display: block;
 ; padding: 5px 10px;
 ; color: # fff;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Meny ul li li: hover en {
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Menyen li span {
 markøren: pekeren;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Vær oppmerksom på at denne koden ikke fungerer i IE6 (denne stakkars leseren vet bare ikke hva ul> li betyr).

Jeg ville være takknemlig om du kunne ta et sekund å bidra til å fremme min blogg og dele lenken med noen av dine favoritt nettsteder ved å bruke linken nedenfor. Her er en link til vår foretrukne nettsted hvis du ønsker å registrere et domene navn .

Arkivert under: Css , Tutorials av admin