Menu w CSS

W tym rozdziale dowiesz się...

Dlaczego menu nawigacyjne powinno się wykonywać na liście (wykaz)?
W jaki sposób wykonać pionowe menu nawigacyjne na liście (wykaz)?
W jaki sposób wykonać poziome menu nawigacyjne (zakładki) na liście (wykaz)?
W jaki sposób wykonać menu nawigacyjne z nagłówkami (tytułami działów) na liście definicyjnej (słownik)?

Wstęp

W tym rozdziale chciałbym przedstawić to, co stanowi faktyczną potęgę CSS - praktyczne zastosowanie koncepcji rozdzielenia struktury i prezentacji. Wspólnie postaramy się dla raz ustalonego kodu XHTML, zawierającego odnośniki menu nawigacyjnego, zaprojektować kilka osobnych arkuszy stylów, dzięki czemu ten sam kod XHTML za każdym razem będzie się prezentował zupełnie inaczej.

Być może zapytasz teraz: jaki jest tego cel? Wyobraź sobie, że Twój serwis internetowy zawiera 100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz zechcesz zmienić jego wygląd, co będzie lepiej zrobić: modyfikować ręcznie 100 plików, czy dokonać zmiany tylko w jednym - zewnętrznym arkuszu stylów? No dobrze, stronę można wykonać w technologii ramkowej lub korzystając ze skryptów na serwerze, takich jak PHP - wtedy również będzie wystarczyło zmienić tylko jeden plik. Są jednak przynajmniej dwa dodatkowe powody, dla których czyste rozwiązanie CSS jest korzystniejsze:

Przeniesienie całego formatowania do zewnętrznego arkusza stylów zmniejszy rozmiar wszystkich podstron, dzięki czemu będą się ładować szybciej, a dodatkowo ewentualna opłata za transfer, którą właściciel serwisu (czyli Ty) płaci firmie hostingowej, będzie niższa.
Dzięki obsłudze mediów będzie można przygotować osobny arkusz stylów dla wydruku lub dla urządzeń przenośnych, gdzie menu nawigacyjne powinno wyglądać zupełnie inaczej. Znacznie łatwiej jest przygotować nowy arkusz CSS, niż przerabiać wszystkie strony serwisu i potem jeszcze pamiętać, aby przy każdej aktualizacji witryny nanieść poprawki we wszystkich powstałych wersjach dokumentów.

Zacznijmy więc od przygotowania kodu XHTML z odnośnikami, który będzie zupełnie pozbawiony formatowania:

<ul>
<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>
</ul>

Rezultat bez stylizacji jest następujący:

Kod ten będzie wykorzystywany we wszystkich przykładach, zawartych dalej w tym rozdziale. W rzeczywistych warunkach warto jeszcze dodać do znacznika <ul>...</ul> identyfikator lub klasę CSS, aby poprzez stylizację menu nie zaburzyć normalnego wyświetlania wykazów, które mogą się znaleźć w treści artykułów na stronie oraz aby mieć możliwość wstawienia kilku różnie wyglądających bloków menu w jednym dokumencie.

Dlaczego w ogóle do reprezentacji menu wybiera się listę nieuporządkowaną (wykaz)? Ponieważ jest to poprawne semantycznie. Poprawność semantyczna to stosowanie znaczników zgodnie z ich przeznaczeniem, czyli np. do tworzenia menu wykorzystuje się listę, a nie tabelkę. Lista to zbiór następujących po sobie pozycji, a więc zastosowanie jej do prezentacji pozycji menu jest jak najbardziej prawidłowe. Domyślne ułożenie punktów listy będzie wygodne w przeglądarkach tekstowych, które nie obsługują CSS. Będzie to również wygodne dla niewidomych, którzy do czytania stron internetowych używają syntezatorów mowy. Do tworzenia menu na pewno nie nadaje się znacznik <br />, ponieważ wtedy zmiana wyglądu za pomocą CSS byłaby możliwa tylko w niewielkim stopniu - nie można by np. stworzyć menu poziomego. Nie jest również dobrym pomysłem zastąpienie listy zwykłymi elementami <div>...</div>, ponieważ w przeciwieństwie do listy, nie niosą one ze sobą żadnego znaczenia semantycznego.

Pionowe menu

Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu XHTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Zaczniemy od prostszego przykładu - ułożenia linków w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować niepotrzebny margines z lewej strony:

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

W efekcie uzyskamy:

W niektórych przeglądarkach nie jest konieczne wstawienie wszystkich powyższych deklaracji, jednak tylko taki zestaw właściwie gwarantuje uzyskanie zamierzonego efektu w każdych warunkach. Teraz mamy już przygotowany teren do właściwej stylizacji.

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	width: 200px;
}

ul a:link, ul a:visited {
	display: block;
	width: 186px;
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	padding: 5px;
	border: 2px outset #ccc;
}

ul a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu XHTML! Krótkie wyjaśnienie użytych deklaracji CSS:

Na początku wstawiamy znaną już regułę, która usuwa domyślne formatowanie listy.
Ustalamy szerokość menu, aby nie zajmowało całego ekranu.
Stylizujemy odnośniki listy tak, aby wyświetlały się w bloku (display: block). Dzięki temu nie trzeba dokładnie wskazywać tekstu, aby link zmienił wygląd (sprawdź). Niestety zachowanie to nie dotyczy Internet Explorera 6.0 (w MSIE 7.0 wszystko jest w porządku), dlatego konieczne jest dodatkowo określenie szerokości (width) bloku odnośnika. Zgodnie z modelem pudełkowym szerokość ta jest równa szerokości bloku rodzica, pomniejszonej o sumę grubości obramowania (border) i szerokości marginesu wewnętrznego (padding) elementu, czyli:
200px - 2*2px - 2*5px = 186px
Ustalamy kolor, tło, margines wewnętrzny (padding) i obramowanie odnośników, tak aby wyglądały jak przyciski. Dodatkowo usuwamy domyślne podkreślenie linków (text-decoration: none), które w tym przypadku jest niepożądane.
Na koniec zmieniamy styl obramowania, które zostanie wyświetlone po wskazaniu tekstu myszką oraz tworzymy niesymetryczny margines wewnętrzny (padding), przesuwając tekst odnośników nieco w prawo i w dół, dzięki czemu uzyskujemy efekt wciśniętego przycisku.

W trybie Quirks obliczanie szerokości bloków przebiega inaczej jak przedstawiono powyżej. Może to spowodować błędne wyświetlanie menu.

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	width: 200px;
	padding: 2px 2px 1px 2px;
	background-color: #9ce;
	border: 3px double #28e;
}

ul li {
	border-bottom: 1px solid #9ce;
}

ul a:link, ul a:visited {
	display: block;
	width: 176px;
	text-decoration: none;
	padding: 7px;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-left: 10px solid #25b;
}

ul a:hover {
	width: 166px;
	background-color: #28e;
	color: #fff;
	border-left: 20px solid #26d;
}

Usuwamy domyślne formatowanie listy.
Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a krawędziami odnośników.
Dodajemy obramowanie dzielące poszczególne punkty listy na całej jej szerokości.
Dla odnośników określamy wyświetlanie w bloku (display: block), aby podświetlały się na całej szerokości (z uwagi na błąd MSIE 6.0 konieczne jest przypisanie również szerokości), a następnie usuwamy domyślne podkreślenie (text-decoration: none) i swobodnie je stylizujemy - m.in. dodając szerokie obramowanie z lewej strony.
Zmieniamy nieco kolory prezentacji linków po wskazaniu myszką, a także zwiększamy szerokość lewego obramowania, uzyskując efekt wysuwania tekstu w prawo. Skoro zmianie uległa szerokość obramowania, musimy zmienić także szerokość bloku odnośnika.

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	width: 190px;
	padding-left: 10px;
	background: #797 url("punkt.gif") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

ul a:link, ul a:visited {
	display: block;
	width: 169px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("tlo.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}

ul a:hover {
	background-color: #797;
	background-image: url("tlo2.gif");
	color: #eff;
}

Do przygotowania powyższego menu potrzebne są trzy grafiki:

punkt.gif - punkt listy
tlo.gif - tło odnośnika
tlo2.gif - tło odnośnika podświetlonego

Widok w powiększeniu:

Za pomocą CSS nie można dodawać żadnych znaczników do kodu źródłowego dokumentu, nie można zatem wygenerować znacznika <img />, który byłby nam potrzebny do stylizacji punktów. Można natomiast wstawiać grafikę w tle. Tak właśnie został osadzony obrazek punktów listy (punkt.gif). Normalnie jeżeli grafika wstawiona w tle jest mniejsza od rozmiarów elementu, zostaje powielona, tak aby zajmowała cały dostępny obszar. W naszym przypadku takie zachowanie nie jest pożądane, dlatego blokujemy to powielanie (no-repeat). Musimy również określić lewy margines wewnętrzny pozycji listy (padding-left) o szerokości równej szerokości obrazka, ponieważ bez tego grafika znalazłaby się pod tekstem, a nie obok niego. Przy tym nie może to być zwykły margines (margin-left), ponieważ na takich marginesach nie można wyświetlać tła. W ten sposób udało nam się osadzić grafikę, imitującą tradycyjny obrazek, bez żadnej modyfikacji kodu źródłowego XHTML. Pozostałe dwa obrazki - tlo.gif i tlo2.gif - są już wstawione jako zwykłe tło, przy czym drugi jest dynamicznie podmieniany przy podświetlaniu odnośników (a:hover).

Poziome menu

Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu XHTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Tym razem, na przekór domyślnej prezentacji pozycji listy, ułożymy odnośniki nawigacyjne poziomo - w formie zakładek. Takie ustawienie możemy uzyskać na dwa sposoby:

Ustawiając sposób wyświetlania pozycji listy na wartość inline, czyli w linii. Oprócz tego, tak jak poprzednio, usuniemy zbędne domyślne formatowanie, które w tym przypadku tylko by przeszkadzało:
```
ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	display: inline;
	white-space: nowrap;
}
```
Efekt:
Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich.
Zalety:
- Prawidłowa interpretacja w większości przeglądarek
- Możliwość łatwego wyrównania odnośników do lewej lub prawej strony, a także wyśrodkowania
- Nie wpływa na elementy znajdujące się poniżej
Wady:
- Brak możliwości ustalenia jednakowej szerokości pozycji listy
- Odstępy między odnośnikami zależą od rodzaju i rozmiaru czcionki, a przy tym nie mogą być mniejsze niż szerokość jednej spacji
Ustawiając wyświetlanie w bloku (block) oraz oblewanie (float) dla pozycji listy:
```
ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	float: left;
}
```
Efekt:
W tym przypadku blokada zawijania tekstu nie jest konieczna, ponieważ nastąpi to zawsze pomiędzy oblewanymi blokami. Wykorzystuje się wtedy właściwość, że kilka elementów z podanym oblewaniem ustawia się obok siebie, nawet jeśli są to elementy blokowe. Jeśli nie określimy szerokości takich bloków, przyjmie ona wartość wynikającą z rozmiaru zawartości [zobacz: Szerokość i marginesy automatyczne - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5].
Zalety:
- Możliwość ustalenia jednakowej szerokości pozycji
- Dokładne ustalenie marginesu pomiędzy pozycjami listy
Wady:
- Trudności przy ustawieniu odnośników centralnie
- Konieczność przypisania własności clear następnemu elementowi na stronie
- Możliwe błędy i różnice w wyświetlaniu elementów oblewanych w niektórych przeglądarkach (zwłaszcza w Internet Explorerze)

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	width: 80px;
	text-align: center;
	background-color: #ccc;
	color: #000;
	border: 2px outset #ccc;
	padding: 5px;
}

ul a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków.

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	position: absolute;
}

ul li {
	float: left;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: transparent #25b #25b #9ce;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	width: 95px;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-top: 10px solid #25b;
}

ul a:hover {
	background-color: #28e;
	color: #fff;
	border-top: 20px solid #26d;
}

Efekt wysuwania po wskazaniu myszką został uzyskany poprzez zwiększenie wysokości górnego obramowania linków. Określenie pozycji absolutnej eliminuje przesuwanie się elementów, które znajdują się poniżej menu, gdy podświetlamy linki. Jest to potrzebne tylko z uwagi na błąd Internet Explorera.

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	float: left;
	background-color: #fff;
	padding: 1px 0 1px 1px;
	border: 1px solid #000;
}

ul li {
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;
	background: #000 url("tlo.gif") repeat-x center;
	color: #fff;
	padding: 10px 20px;
	border-right: 1px solid #fff;
	border-right: 1px solid #fff;
}

ul a:hover {
	background-color: #800;
	background-image: url("tlo2.gif");
}

Chociaż w tym przykładzie rozmiary odnośników nie zostały ustalone, musieliśmy wyświetlić je blokowo z uwagi na błąd Internet Explorera. Ponadto konieczne było przypisanie oblewania (float: left) również znacznikowi obejmującemu pozycje listy (<ul>...</ul>), ponieważ bez tego menu wyglądałoby następująco:

Elementy z ustalonym oblewaniem są usuwane z normalnego biegu treści w dokumencie, dlatego znacznik obejmujący w tym przypadku okazuje się pusty, czyli jego wysokość wynosi zero (pozostaje tylko 2*1px = 2px pionowego marginesu wewnętrznego - padding). Ustalenie oblewania dodatkowo dla elementu obejmującego sprawia, że oblewane pozycje listy pozostają w jego obrębie, a więc zachowuje on odpowiednią wysokość oraz szerokość (normalnie wynosiłaby ona 100%, co w tym przypadku jest niepożądane).

Wymagane grafiki (tlo.gif i tlo2.gif) w powiększeniu:

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	text-align: center;
	border-bottom: 1px solid #888;
	padding-bottom: 5px;
}

ul li {
	display: inline;
	white-space: nowrap;
	margin-right: 5px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	border: 1px solid #888;
	padding: 5px;
}

ul a:hover {
	background-color: #fff;
	border-bottom-color: #fff;
}

Poszczególne odnośniki menu są otoczone obramowaniem, takim samym jak dolne obramowanie całej listy, dlatego wyglądają jak zakładki. Dla stanu podświetlenia musimy tylko zmienić kolor tła oraz ustawić taki sam kolor dolnego obramowania odnośnika, dzięki czemu uzyskamy efekt wysunięcia wskazanej zakładki do przodu - przed inne.

Podobny efekt z zastosowaniem drugiego sposobu:

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	border-bottom: 1px solid #888;
	float: left;
	width: 100%;
	padding-left: 20px;
}

ul li {
	float: left;
	margin-right: 10px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	background-color: #ccc;
	color: #000;
	padding: 5px 10px;
	border: 1px solid #888;
	position: relative;
	top: 1px;
}

ul a:hover {
	background-color: #fff;
	border-bottom-color: #fff;
}

Dla uzyskania takiego efektu, konieczne było przypisanie oblewania (float: left) również znacznikowi obejmującemu pozycje listy (<ul>...</ul>), ponieważ bez tego menu wyglądałoby następująco (nie dotyczy przeglądarki Internet Explorer, która z powodu błędu paradoksalnie bez żadnych zmian wyświetla menu właściwie):

Elementy z ustalonym oblewaniem są usuwane z normalnego biegu treści w dokumencie, dlatego znacznik obejmujący w tym przypadku okazuje się pusty, czyli jego wysokość wynosi zero. Ustalenie oblewania dodatkowo dla elementu obejmującego sprawia, że oblewane pozycje listy pozostają w jego obrębie, a więc zachowuje on odpowiednią wysokość i jego obramowanie pasuje do dolnej krawędzi zakładek. Szerokość 100% została przypisana, aby wypełnić całą poziomą powierzchnię ekranu (normalnie elementy oblewane przyjmują szerokość nie większą niż ich zawartość).

Odnośniki zostały poddane pozycjonowaniu relatywnemu, w celu przesunięcia ich w dół o 1px, ponieważ inaczej w miejscu przylegania zakładek do dolnej krawędzi listy pojawiłoby się podwójne obramowanie:

Takie wyświetlanie obramowania wynika ze sposobu renderowania elementów blokowych - obramowania zagnieżdżonych bloków wyświetlają się obok siebie, a nie na sobie (jak w poprzednim przykładzie dla elementów "inline").

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	float: left;
	width: 100%;
	border-bottom: 1px solid #365;
	padding-left: 20px;
}

ul li {
	float: left;
	background: url("zakladka.gif") no-repeat left top;
	margin-right: 5px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;
	background: url("zakladka2.gif") no-repeat right top;
	color: #365;
	padding: 5px 15px 5px 5px;
	margin-left: 10px;
}

ul a:hover {
	color: #032;
}

Wymagane grafiki (zakladka.gif i zakladka2.gif):

Dla tak przygotowanych grafik, szerokość zakładki nie może przekroczyć 200px. Jeśli spodziewasz się, że może się tutaj znaleźć dłuższy tekst, musisz utworzyć szerszą grafikę zakladka2.gif.

Lewy narożnik obrazka zakładki został wstawiony w tle pozycji listy (bez powielania), natomiast grafika ze środkiem i prawym narożnikiem znalazła się w tle odnośników. Odnośniki muszą być wyświetlone w bloku, ponieważ inaczej grafiki zakładek nie pokrywałyby się (alternatywnie można przypisać pozycjom listy taki sam pionowy margines wewnętrzny jak odnośnikom):

Lewy margines wewnętrzny odnośników odpowiada za odstęp tekstu od miejsca, gdzie lewy-górny narożnik zakładki nie jest już zaokrąglony. Prawy margines wewnętrzny ma tę samą wartość, powiększoną jednak o szerokość prawego zaokrąglenia, ponieważ jest ono zawarte w grafice zakladka2.gif, która została wstawiona w tle odnośników, podczas gdy lewy narożnik (zakladka.gif) znajduje się w tle pozycji listy. Bez tego dodatkowego marginesu wewnętrznego tekst na zakładkach byłby ustawiony niesymetrycznie:

Aby przygotować wolne miejsce do wyświetlenia tła lewego brzegu zakładki, odnośniki mają przypisany lewy margines. Inaczej grafika ta znalazłaby się pod tłem odnośnika:

Prawy margines pozycji listy ustala odstępy pomiędzy sąsiednimi zakładkami.

Menu z nagłówkami

Choć wykonanie menu w oparciu o listę daje naprawdę duże możliwości, to powstaje mały problem, jeśli przed blokiem ma się wyświetlić nagłówek w formie tytułu działu. Istnieje inny element, który zapewnia taki podział pozycji - lista definicyjna (słownik). Specyfikacja HTML 4.01 podaje alternatywne zastosowania tego znacznika - np. do przedstawiania dialogu. Można zatem przyjąć, że lista definicyjna reprezentuje pozycje połączone ze sobą w taki sposób, że zawartość <dd>...</dd> stanowi rozwinięcie (uszczegółowienie) <dt>...</dt>, przy czym jedna pozycja może być połączona z dowolną liczbą innych pozycji. Z taką sytuacją mamy właśnie do czynienia w przypadku menu nawigacyjnego z nagłówkami: odnośniki, zawarte w znacznikach <dd>...</dd>, stanowią rozwinięcie krótkiego nagłówka, zapisanego wewnątrz <dt>...</dt> - taki kod również jest poprawny semantycznie:

<dl>
<dt>CSS</dt>
<dd><a href="czcionki.html">Czcionki</a></dd>
<dd><a href="tekst.html">Tekst</a></dd>
<dd><a href="tlo.html">Tło</a></dd>
<dd><a href="marginesy.html">Marginesy</a></dd>
<dd><a href="obramowanie.html">Obramowanie</a></dd>
</dl>

Efekt bez stylizacji:

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

Oczywiście takie menu może zawierać więcej niż jeden nagłówek.

Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy:

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}