Rozwijane menu poziome w CSS

Utworzono: niedziela, 27, czerwiec 2010 16:12

Michał Kortas

Odsłony: 11464

Ostatnimi czasy niezwykle popularne, przy tworzeniu stron www, stało się używanie rozwijanego menu. Jest to bardzo estetyczny sposób na wykonanie nawigacji, która może znacząco poprawić wygodę poruszania się po sieci. Co więcej, użytkownik strony nie zgubi się tak szybko w gąszczu różnorakich linków, co w przypadku rozbudowanego serwisu może okazać się bardzo prawdopodobne. 

Rozwijane menu możemy stworzyć na 2 sposoby. Pierwszym z nich jest użycie JavaScript. Odradzam jednak tę opcję, ponieważ w przypadku gdy internauta posiadał będzie przeglądarkę z wyłączoną obsługą JS, nasze menu w nie wyświetli się na ekranie w sposób zamierzony, co spowoduje "rozjechanie się" strony. Alternatywnym sposobem jest użycie CSS.

Przeczytaj artykuł o tym, jak zbudować rozwijane menu, w oparciu o CSS3 > Rozwijane menu z wykorzystaniem CSS3

Ta metoda jest bardziej bezpieczna, więc to na niej się skupimy. W poniższym przykładzie będę operował na menu mojej poprzedniej strony.

Zacznijmy od utworzenia nowego pliku index.htm. W części body wstawmy zwykłe menu, oparte na liście wypunktowanej:

 
    <ul id="menu"> 
    <li><a href="" title="">Start</a></li> 
    <li><a href="" title="">Portfolio</a> 
    <ul> 
    <li><a href="" title="">Strony www</a></li> 
    </ul> 
    </li> 
    <li><a href="" title="">Artykuły</a></li> 
    <li><a href="" title="">Informacje</a> 
    <ul> 
    <li><a href="" title="">O mnie</a></li> 
    <li><a href="" title="">Aktualności</a></li> 
    </ul> 
    </li> 
    <li><a href="" title="">Webdesign</a></li> 
    <li><a href="" title="">Kontakt</a> 
    <ul> 
    <li><a href="" title="">Formularz kontaktowy</a></li> 
    <li><a href="" title="">Pomoc</a></li> 
    </ul> 
    </li> 
    <li><a href="" title="">Współpraca</a> 
    <ul> 
    <li><a href="" title="">Wymiana linkiem</a></li> 
    </ul> 
    </li> 
</ul> 
 

Powyższy listing spowoduje wyświetlenie zwyczajnej listy wypunktowanej.

Aby nasze menu przybrało kształty takie jakie chcemy osiągnąć, stwórzmy nowy plik CSS o nazwie arkusz.css. Zaimportujmy go do naszej strony. Aby to zrobić, w sekcji head wpiszmy:

 
<link href="arkusz.css" rel="stylesheet" type="text/css"> 
 

Teraz nadszedł czas na uzupełnienie pliku arkusz.css:

 
#menu { 
text-align: left; 
overflow: hidden; 
font-family: calibri, tahoma; 
} 
 
ul#menu li { 
border: 1px solid #d5d5d5; 
list-style-type: none; 
float: left; 
background: #e9e9e9; 
margin-left: 3px; 
} 
 
ul#menu li:hover { 
border: 1px solid #d5d5d5; 
list-style-type: none; 
float: left; 
background: #f0f0f0; 
margin-left: 3px; 
} 
 
ul#menu li a { 
display : block; 
padding : 4pt; 
text-decoration : none; 
} 
 
ul#menu li li a { 
width: 160px; 
} 
 
ul#menu li li:hover { 
background: white; 
} 
 
ul#menu li ul { 
overflow: hidden; 
display: none; 
} 
 
ul#menu li:hover ul { 
position: absolute; 
background: #aaa; 
padding: 0; 
display: block; 
width: 160px; 
} 
 

A oto uzyskany efekt:

W zasadzie to już wszystko. Na koniec pozostało nam jedynie sformatować menu, w zależności do naszych potrzeb.