Przejdź do treści

Menu w CSS - CSS

Poziome menu

W jaki sposób wykonać poziome menu nawigacyjne (zakładki) 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. 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:

  1. 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
  2. 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:

Tło odnośnika Tło odnośnika podświetlonego
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):

Lewy narożnik Środek i prawy narożnik

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.

Komentarze

Zobacz więcej komentarzy

Facebook