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życiamargin
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
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
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
?
odpowiednie selektory i pomysły na style
Pure CSS menu
Koncepcja i implementacja 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