Tämä on opetusohjelma, miten luoda puhdas CSS Pudotusvalikko ilman javascriptiä. Huomasin kuitenkin, että ihmiset käyttävät usein JavaScript saavuttamiseksi tätä. Oikeastaan ​​on olemassa yksinkertainen tapa tehdä se vain CSS.

Tässä on esimerkki

Vaihe ensin: luomme HTML rakenne.

 > <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 demoa </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> < href = "#" > Valikkokohta 1 </ a> </ li> <li> < href = "#"> Valikkokohta 2 </ a> </ li> <li> < href = "#"> Valikkokohta 3 </ > </ li> </ ul> </ li> <li> <span> Meistä </ span> <ul> <li> < href = "#"> Valikkokohta 1 </ a> </ li > <li> < href = "#"> Valikkokohta 2 </ a> </ li> <li> < href = "#"> Valikkokohta 3 </ a> </ li> </ ul> < / li> <li> <span> Tuotteet </ span> <ul> <li> < href = "#"> Valikkokohta 1 </ a> </ li> <li> < href = "#"> Valikkokohta 2 </ a> </ li> <li> < href = "#"> Valikkokohta 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Vaihe toinen: nyt luomme magic CSS-koodi

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

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

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

 # Header {
 ; korkeus: 120px; kanta: suhteellinen;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 position: absolute;
 ; Top: 70px;
 display: block;
 }

 # Valikko> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 kanta: suhteellinen;
 padding: 10px;
 leveys: 100px;
 }

 ul { # Valikko> li: hover ul {
 display: block;
 }

 { # Valikko> li: hover {
 ; background-color: # 808080;
 -Moz-border-säde: 10px;
 -Webkit-raja-säde: 10px;
 }

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

 # Valikko li ul li {
 display: block;
 ; padding: 5px 10px;
 ; väri: # fff;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Valikko li ul li: hover {
 ; background-color: # 606060;
 -Moz-border-säde: 5px;
 -Webkit-raja-säde: 5px;
 }

 # Valikko li span {
 kohdistimen: pointer;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; väri: # fff; font-size: 11px;
 } 

Huomaa, että tämä koodi ei toimi IE6 (tämä huono selain ei vain tiedä, mitä ul> li tarkoittaa).

Olisin kiitollinen, jos voisitte ottaa toinen edistää blogiin ja jakaa tätä yhteyttä joku suosi verkostoitumisen sivustoja alla olevasta linkistä. Tässä on linkki meidän ensisijainen sivusto jos haluat rekisteröidä verkkotunnuksen .

Filed under: Css , Oppaat admin