0 Kč s DPH

Práce s obrázkovým menu

Chcete oživit vaše textové menu? V jednom z dřívějších článků jsme vám ukázali, jak na Přidávání obrázků k položkám menu. Na tento návod budeme v průběhu tohoto odkazovat jako na "základní". V praxi lze tohoto návodu využít mnoha kreativními způsoby. Pro inspiraci vám chceme ukázat ty nejčastěji využívané.

Základní návod: Přidáváme obrázky k položkám menu

Obrázkové pozadí položky menu

V základním návodu máme uveden zápis pozadí tímto kódem:

#menu li a { 
background: transparent url(/obrazek/3/pozadi-menu/) no-repeat 100% 50%; 
}

ve smyslu:

odkaz menu { 
pozadí: průhledné, url(/adresaobrazku.png), neopakovat, horizontální umístění (úplně vpravo),
vertikální umístění (uprostřed);
}

 

Můžeme si ale také připravit grafiku pro vyplnění celého pozadí položky jako v následujícím příkladě, kde pro pozadí položky používáme černě stínovaný blok s rámečkem a aktivní položky zvýrazňujeme modrým podsvitem. Zkuste na menu najet kurzorem myši:

 

Zde je potřeba základní kód doplnit o výšku a šířku grafiky a výšku řádku:

#menu li a { 
background: transparent url(/obrazek/3/pozadi-menu/) no-repeat; 
width: 117px;
height: 52px;
line-height: 52px;
text-align: center;
}

ve smyslu:

odkaz menu { 
pozadí: průhledné, url(/aresaobrazku.png) neopakovat;
šířka: 117 pixelů;
výška: 52 pixelů;
výška řádku: 52 pixelů;
}
 

Šířka a výška odkazu menu by se měla shodovat s šířkou a výškou připravené grafiky, aby se obrázek zobrazoval celý. Výška řádku je totožná s výškou grafiky, abychom docílili vertikálního zarovnání písma na střed.

 

Aktivní menu zvýrazníme pomocí změny pozadí:

#menu li a:hover { 
background: transparent url(/obrazek/3/pozadi-menu-aktivni/) no-repeat; 
}
 
#menu li.active a {
background: transparent url(/obrazek/3/pozadi-menu-aktivni/) no-repeat; 
}

:hover - najetí myší na prvek
li.active a - aktivní odkaz menu

 

Různé pozadí pro různé položky menu

Pokud není žádoucí, aby všechny položky menu byly stejně široké nebo měly stejné pozadí, využijeme konkrétních identifikátorů. Bližší informace naleznete v základním článku. Nejčastější využití tohoto principu nalézáme v odkazech na cizojazyčné verze webu a odkazech na sociální sítě. Největší výhodou takové položky je její stabilní umístění. Nestane se, že by se vám položka na zařízení s jinou velikostí displaye zobrazila jinde.

Propojení vícejazyčných webů pomocí vlaječek

 

odkaz na jazykovou mutaci v menu

#menu-item-157 a {
background: transparent url(/obrazek/3/nemcina-png/) no-repeat;
width: 50px;
font-size: 0;
line-height: 65px;
}

Do menu jsme si vložili odkaz na cizojazyčnou verzi našeho webu, pojmenovali ho například Deutsch, a pak ho pomocí CSS stylu zcela nahradili obrázkem. Pomohlo nám k tomu nastavení font-size: 0; které nám udává hodnotu velikosti písma jako 0 pixelů. U položek s písmem velikosti 0 je potřeba zvýšit velikost řádku line-height v závislosti na velikosti obrázku a písma ostatních položek, aby si položky udržely jednotnou linii.

Obrázkový odkaz na sociální sítě

odkaz na socialni site v menu

#menu-item-157 a {
background: transparent url(/obrazek/3/facebook-png/) no-repeat;
width: 50px;
font-size: 0;
line-height: 65px;
}

Drtivá většina webů, která zobrazuje nějaký odkaz na sociální síť, ho zobrazuje pomocí grafické ikony. Pokud tuto ikonku chceme zobrazit v rámci menu, postupujeme stejně jako u vlajek.

Kombinace stylů

Jednotlivé metody lze i kombinovat. Můžete použít kód ze začátku článku, ve kterém určujeme vzhled všech položek, a zároveň nastylovat i pár položek individuálně. Tady můžete vidět příklad v praxi:

 
 
#menu li a { 
background: transparent url(/obrazek/3/pozadi-menu/) no-repeat; 
width: 117px;
height: 52px;
line-height: 52px;
text-align: center;
}
#menu li a:hover {
background: transparent url(/obrazek/3/pozadi-menu-aktivni/) no-repeat; 
}
#menu li.active a {
background: transparent url(/obrazek/3/pozadi-menu-aktivni/) no-repeat; 
}
 
#menu-item-157 a {
background: transparent url(/obrazek/3/facebook-png/) no-repeat;
width: 50px;
font-size: 0;
line-height: 65px;
}
#menu-item-157 a:hover {
background: transparent url(/obrazek/3/facebook-active-png/) no-repeat;
}

Nastavili jsme pozadí pro všechny položky menu a přidali zápis, který určuje konkrétní položku s konkrétním identifikátorem #menu-item-157, pod kterým se skrýval odkaz na Facebook.

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.