Skip to Content

Vodorovná navigační lišta

Vytvoření vodorovné navigační lišty s vlastním pozadím a grafickými oddělovači může být často velkým oříškem. V tomto příkladě využijeme seznamy, které jsou součástí např. vertikálních navigačních lišt. Tyto seznamy budou obsahovat odkazy na různé jiné webové stránky (značka a). Využijeme celou oblast tlačítek jako aktivní, plus efekt rolloveru při najetí na text, zajišťován změnou barvy textu.

<ul>
<span class="prvni">
<li><a href="#">Domů</a></li>
</span>
<li><a href="#">O nás</a></li>
<li><a href="#">Naše nabídka</a></li>
<li><a href="#">Ceník</a></li>
<li><a href="#">Odkazy</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Nyní přistoupíme k samotné úpravě podoby navigace v dokumentu se styly. Nejprve je potřeba nastavit nulovou výplň (padding) a okraje (margin) a odstranit odrážky u seznamu. Dobře nadefinujeme hodnotu šířky lišty tak, aby se do ní vešla jednotlivá tlačítka. V tomto případě bude lišta široká 690px.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 690px;
float: left;
background: url(lista.png) repeat-x;
}

Aby se položky (li) zobraziliy horizontálně, vyjmeme je z běžného modelu umístění a umístíme je do modelu plovoucího umístění (plovoucí vlevo). Do stejného modelu musíme umístit i celý seznam (ul).

ul li {
float: left;
}

Dále je nutné nastavit odkazy tak, aby se chovaly jako tlačítka. Tomuto selektoru pro odkaz proto přiřadíme vlastnost display s hodnotou block, čímž z odkazu jakožto řádkového elementu vytvoříme element blokový.
Opět odkazy umístíme do plovoucího umístění, neboť jako blokový element by chtěl po ostatních elementech, aby byly umístěny na další řádek.
Aby byla šířka každého tlačítka založena na délce textu přidáme výplň pro pravou a levou stranu délky 2em. Jako poslední důležitou věc využijeme vlastnost line-height, která určuje výšku řádku. Zde nám poslouží k vertikálnímu vycentrování textu a také k určení výšky tlačítek.

ul a {
font-family: Arial, Verdana, sans-serif;
display: block;
padding: 0 2em;
line-height: 2.1em;
background: url(loddelovac.png) repeat-y left top;
text-decoration: none;
color: #fff;
}

Abychom mezi jednotlivými odkazy v navigační liště mohli umístit naše grafické oddělovače, nadefinujeme také cestu k vytvořenému obrázku (např. část již použitého přechodu s dvěma vertikálními čárami v černé a bílé barvě pro grafické ztvárnění drážky) jako obrázek na pozadí umístěný vlevo v našem odkazu. Pro odstranění oddělovače v první položce jí přidělíme třídu pojmenovanou např. "prvni".

ul .prvni a {
background: none;
padding: 0 1em;
}

A také nezapomeňte na dynamickou pseudotřídu hover, kterou pozměníte barvu textu při najetí myší na odkaz.

ul a:hover {
color: #000;
}

Klikněte pro zvětšení grafiky lišty:
Vodorovná navigační lišta