Pionowe menu

W jaki sposób wykonać pionowe menu nawigacyjne na liście (wykaz)?

Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu HTML 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.

---

• Czcionki
• Tekst
• Tło
• Marginesy
• Obramowanie

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 HTML! Krótkie wyjaśnienie użytych deklaracji CSS:

1. Na początku wstawiamy znaną już regułę, która usuwa domyślne formatowanie listy.
2. Ustalamy szerokość menu, aby nie zajmowało całego ekranu.
3. 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
4. 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.
5. 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.

---

• Czcionki
• Tekst
• Tło
• Marginesy
• Obramowanie

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;
}

1. Usuwamy domyślne formatowanie listy.
2. Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a krawędziami odnośników.
3. Dodajemy obramowanie dzielące poszczególne punkty listy na całej jej szerokości.
4. 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.
5. 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.

---

• Czcionki
• Tekst
• Tło
• Marginesy
• Obramowanie

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:

1. punkt.gif - punkt listy
2. tlo.gif - tło odnośnika
3. 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 HTML. 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).