Ovo je tutorial o tome kako stvoriti čista CSS Padajući izbornik bez korištenja JavaScripta. Primijetio sam, međutim, da su ljudi često koriste JavaScript da se to postigne efekt. Zapravo, postoji jednostavan način da to učiniti samo sa CSS-om.

Ovdje je primjer

Korak prvi: mi stvaramo osnovni HTML strukturu.

  > <Div id = "zaglavlje">
 <h1> Developer's Paradise demo </ h1>
 > <Ul id = "Izbornik">
 <li> <span> Početna stranica </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meni stavka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meni stavka 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meni stavku 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> O nama </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meni stavka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meni stavka 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meni stavku 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Proizvodi </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meni stavka 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meni stavka 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meni stavku 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Korak drugi: sad mi stvaramo magiju CSS kod

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

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

 : #fff ; } H1 {color: # fff;}

 # Zaglavlje {
 ; visina: 120px; položaj: relativna;
 ; background: # 333;
 }

 # Izbornik {
 margin: 0px;
 padding: 0px;
 položaj: absolute;
 ; top: 70px;
 prikaz: blok;
 }

 # Izbornik> Li {
 popis-style-type: none;
 plovak: lijevo;
 prikaz: blok;
 ; margin: 0px 10px;
 položaj: relativna;
 padding: 10px;
 širina: 100px;
 }

 ul { # Izbornik> li: hover {ul
 prikaz: blok;
 }

 { # Izbornik> li: hover {
 ; pozadine-boja: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

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

 # Izbornik ul li li {
 prikaz: blok;
 ; padding: 5px 10px;
 ; Boja: # fff;
 tekst-dekoracija: none;
 font-weight: bold;
 }

 a { # Izbornik ul li li: hover {
 ; pozadine-boja: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Izbornik li span {
 pokazivač: pokazivač;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; Boja: # fff; font-size: 11px;
 } 

Napominjemo da ovaj kod ne radi u IE6 (ova je sirota preglednik jednostavno ne zna što ul> li znači).

Ja bih bio zahvalan ako biste mogli uzeti drugi da pomogne promovirati moj blog i podijeliti ovaj link s bilo koje vaše preferiraju umrežavanje sučelja koristeći link ispod. Ovdje je link na našu željenu stranicu ako želite registrirati ime domene .

Varalica pod: Css , Tutoriali by admin