To jest tutorial na temat tworzenia czystego CSS Menu rozwijane bez użycia javascript. Zauważyłem jednak, że ludzie często używają JavaScript aby osiągnąć ten efekt. Faktycznie, istnieje prosty sposób to zrobić tylko z CSS.

Tutaj jest przykład

Krok pierwszy: tworzymy podstawowej struktury HTML.

  > <Div id = "nagłówek">
 <h1> Developer's Paradise dema </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#" Menu> pozycja 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pozycja Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pozycja Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> O nas </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#" Menu> pozycja 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pozycja Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pozycja Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produkty </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#" Menu> pozycja 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> pozycja Menu 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> pozycja Menu 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Krok drugi: teraz tworzymy magiczny kod CSS

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

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

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

 # Header {
 ; wysokość: 120px; position: relative;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Li> menu {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 position: relative;
 padding: 10px;
 width: 100px;
 }

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

 { # Menu> 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 {
 display: block;
 ; padding: 5px 10px;
 ; color: # fff;
 text-decoration: none;
 font-weight: bold;
 }

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

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

Zwróć uwagę, że ten kod nie działa w IE6 (to biedne przeglądarki po prostu nie wiem co ul> oznacza li).

Byłbym wdzięczny, gdybyś mógł przyjmować drugiej pomóc w promowaniu mój blog i dzielić ten link z dowolnymi uprzywilejowanych portali korzystając z linku poniżej. Tu jest link do naszego preferowanym miejscem, jeżeli chcesz zarejestrować nazwę domeny .

Filed under: Css , Tutoriale przez admin