Menu rozwijane
Jeżeli wiemu już jak stworzyć menu pionowe lub poziome, to przyszła pora na poznanie menu rozwijanego. Do jego utworzenia wykorzystamy sobie menu z poprzedniego działu, musimy tylko w poprzedniej liście zagnieździć drugą, wypozycjonować listy zagnieżdżone i dodać efkt po najechaniu myszką.
Tworzenie menu rowijanego
Kod menu:
<div id="pion"> <ul> <li><a href="">strona1</a></li> <li><a href="">strona2</a> <ul> <li><a href="">strona1</a></li> <li><a href="">strona2</a></li> </ul> </li> <li><a href="">strona3</a></li> <li><a href="">strona4</a></li> </ul> </div>
Wygląd menu:
Tworzenie menu rowijanego
Kod css:
#roz ul{
list-style-type:none;
position:relative; /*Ustawiamy pozycję relative*/
}
#roz li{
display:inline;
}
#roz ul ul{ /*Odniesienie do elem. znajdującego się w innym elem.*/
position:absolute; /*Ustawiamy pozycje absolute*/
display:none;
top:48px; /*Ustawienie pozycji menu*/
left:123px; /*Ustawienie pozycji menu*/
}
#roz li:hover > ul{ /*> spowoduje nadpisanie z display:none na block*/
display:block;
}
#roz a{
display:block;
width:100px;
padding:10px;
text-decoration:none;
background-color:#5baf5d;
color:white;
border:1px solid #376a38;
}
Wygląd menu: