Změna velikosti písma

Drobečková navigace

CSS blog > Pozadí položky menu

Pozadí položky menu



Pozadí položky menu

Budeme na příkladu řešit pouze změnu pozadí jedné položky. Příklad se dá použit i pro změnu jiných položek. Je zapotřebí pouze vypsat správně selektor a ID položky menu. K tomu nám dopomůže náš všudypřítomný kamarád.. Firebug (nebo jiný vbudovaný přípravek pro úpravu prvků ve stránce :). Stejným způsobem se dá ovlivnit i rozdělení jednoho menu na více částí.

 #ipomenu ul li#ipomenu3109793 a {
        background: url("image.php?nid=11935&oid=3111370") no-repeat scroll left top transparent;
}

Každá položka v menu (levém i horním) má svoje ID. Pokud si zkopírujete kód výše, můžete ve svém tvoření jen měnit ID položky v menu a url adresu obrázku. ID zjistíte buď v html kodu nebo označením položky menu Firebugem. ID je vždy uvedeno u html prvku <li id="ipomenuxxxx" class="xxxx">

Odsazení položky v menu

Pomocí obdobného kódu můžeme i položky v menu "rozdělit" na více částí. Jednoduše tak oddělíme třeba kategorie E-shopu nebo Obecního úřadu od položek, které tematicky nemusí souviset s jinými položkami. Je k tomu potřeba vytvořit položku v menu, ve spec. vlastnostech ji nastavit jako neaktivní a můžeme tvořit.

#ipomenu ul li#ipomenu3109793 {
    margin-top: 1em;
    margin-bottom: 1em;
}
#ipomenu ul li#ipomenu3109793 a.nolink {
    background:transparent;
    font-size: 1.2em;
}
#ipomenu ul li#ipomenu3109793 a.nolink:hover {
    background:transparent;
    cursor:default;
}

S položkou v menu neuděláme nic zásadního: Nastavíme odsazení zhora a zdola; odkazu položky menu nastavíme průhledné pozadí a větší písmo; Při najetí myši znovu vyrušíme pozadí položky v menu a vzbudíme dojem, aby název položky nebyl vůbec klikatelný (i když nikam neodkazuje, má kurzor "text", změníme ho tedy na defaultní šipku prohlížeče).


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 1 2 3 4