Ez a tutorial, hogy hogyan hozzon létre tiszta CSS legördülő menü használata nélkül javascript. Észrevettem azonban, hogy az emberek gyakran a JavaScript elérni ezt a hatást. Valójában, van egy egyszerű módja annak, hogy nem csak a CSS.

Itt a példa

Lépés az első: hozunk létre egy alap HTML struktúrát.

  > <Div id = "header">
 <h1> Developer's Paradise bemutatók </ h1>
 > <Ul id = "menü">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpont 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpont 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> menüpont 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Rólunk </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpont 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpont 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> menüpont 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Termékek </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpont 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpont 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> menüpont 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Lépés a második: most hozunk létre mágikus CSS kód

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

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100%-os normál Arial, Helvetica, sans-serif;
 }

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

 # Header {
 ; magasság: 120px; helyzet: relatív;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 pozíció: az abszolút;
 ; top: 70px;
 display: block;
 }

 # Menü> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 helyzet: a relatív;
 padding: 10px;
 szélesség: 100px;
 }

 ul { # Menü> li: hover {ul
 display: block;
 }

 { # Menü> li: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

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

 # Menu li ul li a {
 display: block;
 ; padding: 10px 5px;
 ; color: # fff;
 text-dekoráció: none;
 font-weight: bold;
 }

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

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

Kérjük, vegye figyelembe, hogy ez a kód nem működik IE6 (ez a szegény böngésző csak nem tudom, mi ul> li jelent).

Hálás lennék, ha tudna, hogy egy második segíteni a blogomban, és ossza meg ezt a linket az az Ön által kedvelt oldalak segítségével az alábbi linkre. Itt van egy link a preferált oldal, ha szeretné domain név bejegyzése .

Kategória: Css , Tutorials admin