To je Tutorial o tem, kako ustvariti čisto CSS menija brez uporabe javascript. Opazil sem pa, da ljudje pogosto uporabljajo JavaScript za dosego tega učinka. Pravzaprav, obstaja enostaven način, da to storite samo s CSS.

Tukaj je primer

Prvi korak: ustvarimo osnovni HTML strukturo.

 > <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 demos </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> <a href = "#" > Meni postavka 1 </ a> </ li> <li> <a href = "#"> menijske postavke 2 </ a> </ li> <li> <a href = "#"> Meni točki 3 </ > </ li> </ ul> </ li> <li> <span> O nas </ span> <ul> <li> <a href = "#"> menijske postavke 1 </ a> </ li > <li> <a href = "#"> menijske postavke 2 </ a> </ li> <li> <a href = "#"> Meni točko 3 </ a> </ li> </ ul> < / li> <li> <span> Products </ span> <ul> <li> <a href = "#"> menijske postavke 1 </ a> </ li> <li> <a href = "#"> Meni točke 2 </ a> </ li> <li> <a href = "#"> Meni točko 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Drugi korak: zdaj smo ustvarili čarobno CSS kodo

  ; padding : 0 ; } * {Marža: 0; padding: 0;}

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

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

 # Header {
 ; višina: 120px; stališča: relativna;
 ; background: # 333;
 }

 # Menu {
 stopnja: 0px;
 padding: 0px;
 stališča: absolutno;
 ; top: 70px;
 izpis: blok;
 }

 # Menu> li {
 Seznam-style-type: none;
 float: levo;
 izpis: blok;
 ; stopnja: 0px 10px;
 stališča: relativna;
 padding: 10px;
 širina: 100 pik;
 }

 ul { # Menu> li: hover {ul
 izpis: blok;
 }

 { # Menu> li: hover {
 ; barva ozadja: # 808080;
 -Moz-meje polmerom: 10px;
 -Webkit-meje polmerom: 10px;
 }

 # Meni ul li {
 stopnja: 0px;
 padding: 0px;
 display: none;
 }
 # Menu li ul li {
 Seznam-style-type: none;
 ; stopnja: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu li ul li {
 izpis: blok;
 ; padding: 5PX 10px;
 ; color: # fff;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu li ul li: hover {
 ; barva ozadja: # 606060;
 -Moz-meje polmerom: 5PX;
 -Webkit-meje polmerom: 5PX;
 }

 # Menu li span {
 Kazalec: kazalec;
 ; stopnja: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Prosimo, upoštevajte, da ta koda ne deluje v IE6 (to slabo brskalnik samo ne vem, kaj ul> li sredstvi).

Hvaležen vam bom, če lahko vzamete drugo pomoč pri spodbujanju svoj blog in delite to povezavo s katero koli od vaših omejenimi možnostmi mreženje s spodnjo povezavo. Tukaj je link na našo Najbolje, če želite registracije Domene .

Pila pod: Css , Tutorials , ki jih admin