Aby zrobić menu górne wystarczy wiedzieć co to jest nieuporządkowana lista i jak ją stworzyć w XHTML. Resztę załatwi nam CSS. Liste w XHTM tworzymy w następujący sposób:

<div id="nav">
<ul>
<li><a href="/omnie/xhtml.html">Start</a></li>
<li><a href="/omnie/dalsza.html">Projekty</a></li>
<li><a href="#">O firmie</a></li>
</ul>
</div>

Jak można zauważyć oprócz zwykłego tekstu w znaczniku <li> jest także znacznik <a>, który to odpowiada za linkowanie do innych stron. Dla tego znacznika CSS ma odpowiednie metody, które wykrywają zdarzenia. Tymi metodami są link, visited, hover i active:

a:link { color: #999;}
a:visited { color: #900;}
a:hover { text-decoration: none;}
a:active { color: #000;}

Tak zdefiniowany kod będzie zmieniał kolor wszystkim znacznikom <a> w zależności od zdarzenia. Zdarzenie link występuje wtedy, gdy jeszcze nie odwiedziliśmy danego linka. Visited wystąpi wtedy, gdy już odwiedziliśmy ten link. Hover jest najbardziej użyteczne ponieważ występuje wtedy, gdy najedziemy na link myszką, a zdarzenie active wystąpi, gdy trzymamy wciśnięty przycisk myszy na tym linku. Dzięki tym zdarzeniom możemy zdziałać naprawdę dużo. W naszym przypadku wyglądało to tak.

#nav ul li a:hover {
background: #fff;
color: #000;
}

Widać, że zmienione zostały wszystkie kontenery o id="nav", w których występuje nieuporządkowana lista <ul>, w którym występują elementy <li> z odnośnikiem <a>. Te wszystkie elementy będą zmieniały kolor tła na biały (#fff), gdy kursor naceluje na niego, a kolor liter w tym odnośniku zmieni się na czarny (#000).

W celu ustawiania elementów menu w poziomie jeden za drugim, należy użyć funkcji (display: inline;), która zamieni elementy na liniowe. Bez tej funkcji elementy ułożone byłyby jeden pod drugim i mieli byśmy menu pionowe (możesz sprawdzić komentując tą linijkę kodu, oczywiście będziesz musiał dodać odpowiedni padding, żeby to ladnie wyglądało). Ta sama funkcja może działać również z parametrem "block" (zmiana wybranego elementu na element blokowy). Aby pozbyć się różnych stylów listy użyto funkcji (list-style: none;).

Najciekawszą funkcją użytą w tym przypadku była funkcja (margin: -24px 13px 12px 0;), która to ustawia margines górny na -24px. Dzięki tej operacji numer telefonu mimo tego, że jest w innym kontenerze ustawiany jest na tej samej linii co kontener "nav". Teraz wystarczyło użyć funkcji (text-align: right;), aby ustawić tekst po prawej stronie oraz funkcji (background: url('/omnie/../favicon.ico') right 50% no-repeat;) w celu wstawienia obrazka jako tła od prawej, w połowie kontenera i wyświetlić go tylko raz "no-repeat". Należy zawsze używać parametru no-repeat (jeśli chcemy, aby obrazek był jeden), ponieważ jeśli tego nie zrobimy, to automatycznie CSS pomnoży ten obrazek do całego tła i wyświetli ten obrazek kilka razy tak, żeby wypełniał całe tło.

Kliknij tu aby pobrać projekt menu