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.

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:

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 może nie dotyczyć niektórych bardzo starch przeglądarek, dlatego bezpieczniej jest dodatkowo określić szerokość (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 możliwy błąd w niektórych bardzo starych przeglądarkach bezpieczniej jest przypisać również szerokość), 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 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).

Komentarze

Zobacz więcej komentarzy