Tai, kaip sukurti grynas CSS Drop down meniu, nenaudojant JavaScript pamoka. Aš pastebėjau, kad vis dėlto žmonės dažnai naudoja "JavaScript" siekiant pasiekti minėto efekto. Tiesą sakant, yra paprastas būdas tai padaryti tik su CSS.

Štai pavyzdys

Žingsnis pirma: mes sukurti paprasto HTML struktūrą.

  > <Div id = "header">
 <h1> Developer's Paradise demo </ h1>
 > <Ul id = "Meniu">
 <li> <span> Pradžia </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meniu punktas 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meniu 2 punktas </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meniu punktas 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Apie mus </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meniu punktas 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meniu 2 punktas </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meniu punktas 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produktai </ span>
 <ul>
 > Menu item 1 </a> </li> <li> < href = "#"> Meniu punktas 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> < href = "#"> Meniu 2 punktas </ a> </ li>
 > Menu item 3 </a> </li> <li> < href = "#"> Meniu punktas 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Žingsnis antras: dabar mes sukurti magija CSS kodas

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

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; šriftas: 100% normalus Arial, Helvetica, sans-serif;
 }

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

 # Header {
 ; aukštis: 120px; vieta: giminaitį;
 ; background: # 333;
 }

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

 # Meniu> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 pozicija: giminaitį;
 padding: 10px;
 plotis: 100px;
 }

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

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

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

 # Meniu li ul li {
 display: block;
 ; padding: 5px 10px;
 ; color: # fff;
 teksto apdaila: none;
 font-weight: bold;
 }

 a { # Meniu li ul li: hover {
 ; background-color: # 606060;
 -MOZ-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Meniu li span {
 žymeklį: žymeklis;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Atkreipkite dėmesį, kad šis kodas neveikia IE6 (tai prasta naršyklė tiesiog nežino, ką ul> li priemonėmis).

Būčiau dėkingas, jei galėtumėte imtis antrojo padėti skatinti savo dienoraštį ir dalintis su bet jūsų palankumo tinklų svetaines naudojant nuorodą žemiau esančią nuorodą. Čia yra nuorodą į mūsų pageidaujamą svetainę, jei norite registruoti domeno vardą .

Filed under: Css , Pamokos , padarytais