Prezentacja menu

Menu jest listą, a listy mają domyślnie ustawiony margin lub padding dający im wcięcie.

 dl.menu, dt.menu  {margin: 0; padding: 0;}
 Usunięcie odstępów z <dl class="menu">

Sporą ilość propozycji stylów dla menu znajdziesz na List-a-matic, a sposób na „ożywienie” na blogu ethanaka.

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 <dt>, ponieważ zwiększa klikalną powierzchnię linków.

Całe menu można przesunąć na bok strony za pomocą 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.

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.

Tabelkowe: display:table-cell

 dl.menu {display:table; width:100%}
 dl.menu dt {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.

 dl.menu {height: 200px; position:relative;}
 dl.menu dt.przyklady {position:absolute; top:10px; right:25px;}

Menu zagnieżdżone

Można posłużyć się listą wypunktowania. XHTML:

 <ul class="menu">
 <li>Coś tam
 <ul>
 <li>Coś tam</li>
 </ul>
 </li>
 <!-- ... dalsze li ... -->
 </ul>

CSS:

 ul.menu li ul {
 display: none;
 }
 ul.menu li:hover ul {
 display: block;
 }
 ul.menu li ul:hover { 
 display: block;
 }

Obrazek zamiast braku ikony

 <dl class="menu">
 <dt><a href="#">foo</a></dt>
 <dt><a href="#">bar</a></dt>
 <dt><a href="#">baz</a></dt>
 </dl>


 dl.menu dt:before {content: url(rysunek.jpg);}

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 dt — 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. Przykład:

HTML

Nagłówek

Znaki specjalne

CSS

JavaScript

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

• Spis treści
• Kroki
• Strona Główna
• Ilustracje
• Historia zmian
• Edytuj