Prezentacja menu

Menu jest listą, a listy mają domyślnie ustawiony margin lub padding dający im wcięcie. Ustaw własne wartości zarówno na <ul>, jak i <li>, żeby uzyskać taki sam wygląd w różnych przeglądarkach.

 ul#menu, ul#menu li {margin: 0; padding: 0; list-style: none;}
 Usunięcie odstępów i kropek z <ul id="menu">

Sporą ilość propozycji stylów dla menu znajdziesz na List-a-matic. Oto kilka podstaw:

Menu pionowe

Aby zwiększyć klikalny obszar najlepiej jest nadać odpowiednie style dla <a>:

 #menu a {display:block;}
 Czyni <a> elementem blokowym, dzięki czemu zajmuje on całą szerokość menu.

 #menu a {padding: 3px 10px;}
 Dodaje odstępy wewnątrz <a>. Jest to lepsze rozwiązanie od użycia margin lub robienia odstępów na <li>, ponieważ zwiększa klikalną powierzchnię linków.

Całe menu można przesunąć na bok strony za pomocą float, pozycjonowania absolutnego albo wyglądu naśladującego tabele.

Menu poziome

Inline

Wystarczy nadać elementom menu display:inline i ew. dopasować wysokość za pomocą line-height.

Elementy menu będą miały szerokość dopasowaną do ich zawartości. Będzie można ustawić pozycję całego menu za pomocą text-align (np. wycentrować) oraz kontrolować jego przenoszenie do nowej linii za pomocą white-space.

Uwaga na spacje. Elementy liniowe są traktowane jak tekst i spacje oraz przejścia do nowej linii między elementami listy będą widoczne!

Zamiast robić przejście do nowej linii za </li>, rób zaraz przed nim, aby </li><li> były razem.

To samo, z większą kontrolą nad wymiarami Bug w FF Bug w IE

Ustawienie display:inline-block zamiast display:inline pozwoli nadać szerokość elementom oraz da większą kontrolę nad wysokością. Poszczególne elementy będą mogły mieć tekst w więcej niż jednej linii.

Float

Jak używasz float, to pamiętaj o clear.

Użycie float pozwala umieścić elementy w jednej linii bez martwienia się o spacje między elementami (float jest specjalnym przypadkiem elementu blokowego).

Dodatkowo float:right pozwala umieścić menu z elementami w odwrotnej kolejności, niż są w kodzie strony.

Menu na float można wycentrować tylko, gdy jego szerokość jest znana. Nie można zapobiec przenoszeniu się elementów menu do nowej linii inaczej, niż rezerwując na nie odpowiednio dużo miejsca.

 ul#menu {width: 500px; margin: 0 auto;}
 ul#menu > li {width: 100px; float:left;}
 Szerokość <ul> zarezerwuje miejsce na 5 elementów menu (uwaga na wymiary przy użyciu odstępów i obramowania!)

Tabelkowe: display:table-cell Bug w IE

 ul#menu {display:table; width:100%}
 ul#menu li {display:table-cell;}

Ten sposób gwarantuje, że menu będzie zawsze w jednej linii. Elementy menu mogą być dopasowane do zawartości albo równomiernie rozciągnięte na szerokość całego menu.

Nie zawsze jest to najlepsze rozwiązanie ze względu na ograniczenia elementów tabel.

Zupełnie swobodne

Jeśli robisz niekonwencjonalne menu możesz ustalić pozycję każdego elementu z osobna za pomocą pozycjonowania absolutnego.

 ul#menu {height: 200px; position:relative;}
 ul#menu li.przyklady {position:absolute; top:10px; right:25px;}

Menu zagnieżdżone Bug w IE6?

odpowiednie selektory i pomysły na style

Pure CSS menu Bug w IE6

Koncepcjaimplementacja działająca w Internet Explorer

Obrazek zamiast wypunktowania

Aby wstawić obrazek zamiast standardowego wypunktowania, najpierw należy pozbyć się tego drugiego:

 <ul id="menu">
 <li><a href="#">foo</a></li>
 <li><a href="#">bar</a></li>
 <li><a href="#">baz</a></li>
 </ul>

 ul#menu { list-style: none; } 

A następnie dodać wybrany obrazek:

 ul#menu li a { padding-left: 20px; background: url(link.png) no-repeat center left; }

Nadany padding zależy od wymiarów obrazka i jego pozycji w tle.

Co jeśli obrazek jest zbyt duży i nie mieści się w elemencie linowym (bo, np. ustawiony rozmiar czcionki jest mniejszy od wysokości obrazka)? Można ustawić tło dla elementu listy li — jednak wtedy ikonka nie będzie klikalna — albo zmienić wymiary odnośnika. Tu CSS znowu daje nam kilka możliwości. Nie zmieniając sposobu wyświetlania nadajemy odnosnikowi większą wysokość linii lub padding. Drugim sposobem jest zmiania sposobu wyświetlania na display: block; i określenie np. marginesu.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.


Zmodyfikowano: 16.02.2007, 19:41