Menu pionowe i poziome

Kolejną rzeczą jaką należy omówić jest znajdujące się na stronie menu, może je utworzyć zarówno w pionie jak i w poziomie. Do wyglądu i ułożenia samego menu pomoże nam CSS.Na początek zajmijmy się samym utworzeniem, aby to zrobić musimy utworzyć listę stworzoną z odsyłaczy.

Tworzenie menu pionowego

Kod css:

						
<div id="pion">
<ul>
	<li><a href="">strona1</a></li>
	<li><a href="">strona2</a></li>
	<li><a href="">strona3</a></li>
	<li><a href="">strona4</a></li>
</ul>
</div>

Wygląd menu:

Zmiana wyglądu menu pionowego

Kod css:

						
#pion ul{
list-style-type:none;  /*Usuwa nam punktory*/
}
#pion li{
display: block; 
}
#pion a{
display:block;
width:100px;
padding:10px;  /*Ustawia odstęp tekstu od granic bloku*/
text-decoration:none;  /*Usuwa dekoracje tekstu*/
background-color:#5baf5d;
color:white;
}

Wygląd menu:

Nie każdy jednak chce, aby jego menu było w pionie dlatego przyszła pora na stworzenie menu poziomego.Do jego zrobienia wykorzystamy wcześniejsze menu bo wcale nie trzeba dużo w nim zmieniać.

Zmiana menu pionowego na poziome

Kod css:

						
#poziom ul{
list-style-type:none;  
}
#poziom li{
display: inline;  /*Ustawienia wyświetlania w poziomie*/
}
#poziom a{
display:inline-block;  /*Ustawia wyświetlanie bloków w poziomie*/
width:100px;
padding:10px;  
text-decoration:none;  
background-color:#5baf5d;
color:white;
border:1px solid #376a38;
}
#poziom{
padding-bottom:20px;
}

Wygląd menu: