Práce s obrázkovým menu

27. 10. 2016

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

#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ě

#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.