See on õpetus, kuidas luua puhas CSS rippmenüüst ilma JavaScripti kasutamata. Märkasin siiski, et inimesed kasutavad sageli JavaScript seda saavutada mõju. Tegelikult on lihtne viis seda teha ainult CSS.

Siin on näiteks

Samm esimene: loome lihtsa HTML-struktuurile.

  > <Div id = "header">
 <h1> Developer's Paradise demosid </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menüü kirje 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menüü punkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menüü punkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Meist </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menüü kirje 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menüü punkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menüü punkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Products </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Menüü kirje 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Menüü punkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Menüü punkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Samm teisele: nüüd loome magic CSS kood

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

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

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

 # Header {
 ; kõrgus: 120px; asukoht: sugulane;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 asukoht: absoluutne;
 ; top: 70px;
 kuva: ploki;
 }

 # Menu> li {
 list-style-type: none;
 float: left;
 kuva: ploki;
 ; margin: 0px 10px;
 asukoht: sugulane;
 padding: 10px;
 laius: 100px;
 }

 ul { # Menu> li: hover ul {
 kuva: ploki;
 }

 { # Menu> li: hover {
 ; background-color: # 808080;
 -Moz-piiri-raadius: 10px;
 -WebKit-piiri-raadius: 10px;
 }

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

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

 a { # Menu li ul li: hover {
 ; background-color: # 606060;
 -Moz-piiri-raadius: 5px;
 -WebKit-piiri-raadius: 5px;
 }

 # Menu li span {
 kursori: pointer;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Pange tähele, et see kood ei tööta IE6 (see vaene brauser lihtsalt ei tea, mida ul> li teel).

Oleksin tänulik, kui võtta teine ​​aidata edendada minu blogi ja jagada seda sidet mõne oma eelistatud saidid kasutades allolevat linki. Siin on link meie eelistatud saidil, kui te soovite registreerida domeeninime .

Filed under: Css , Tutorials admin