Přidáváme obrázky k položkám menu
Vytvořte si pěkné a atraktivní menu. Víte o tom, že si můžete položky menu vylepšit například o obrázek nebo hned sérii obrázků, pro každou položku zvlášť? Pro následující úpravy je třeba si připravit obrázky (případně jeden soubor se všemi obrázky) a trošku se orientovat v úpravě a zápisu CSS stylu. Náš příklad je ukázkový a pro vaši inspiraci - úpravu si můžete provést dopsáním pravidel do vlastního CSS stylu.
Obrázek je stejný pro všechny položky
Do vlastního CSS stylu si přidáme úpravu pro #menu li a a obrázek, který bude pro všechny položky menu společný. Adresa url se mění v závislosti na jméně souboru a cestě k obrázku. V našem příkladu jsme si obrázek nahráli do fotogalerie. Obdobně si můžete nahrát obrázky u programů inPage STANDARD a PREMIUM na FTP, pak by byla adresa například /ftp/hlidaci-pes.png. Můžete si nastavit i barvu podbarvení po najetí kurzorem myši na položku menu a to zápisem #menu li a:hover
#menu li a { background: transparent url(/obrazek/3/hlidaci-pes-png/) no-repeat 100% 50%; }
#menu li a:hover { background-color: #e8f4d5; }
Pokud by vám vadilo, že se nyní obrázek opakuje i u případných podpoložek, je možné si zápis ještě ošetřit tak, aby se obrázek pro podpoložky neaplikoval. Docílíte toho následujícím typovým zápisem:
#menu li ul li a { background: none; }
Obr. Menu se společným obrázkem pro položky
Různé obrázky pro jednotlivé položky
Obrázky mohou být ale různé a pro každou položku menu si můžeme nastavit jiný obrázek. V takovém případě je nutné pracovat s vaším konkrétním zápisem a podívat se na zdrojový kód. inPage vám při generování menu, ale i submenu, přidává ke každé položce <li> určité ID. Toto ID je důležité, protože se přes něj odkazujete na již konkrétní položku menu a tu následně můžete jedinečně stylovat.
Zkusíme si vytvořit jednoduché menu, kde pro každou položku budeme mít jiný obrázek, třeba obrázek zvířátka. Jednotlivé obrázky si nahrajeme třeba na FTP, zjistíme si konkrétní ID položek a začneme upravovat vlastní CSS styl.
#menu-item-122 a { background: transparent url(/ftp/lev.png/) no-repeat 100% 50%; }
#menu-item-157 a { background: transparent url(/ftp/krokodyl.png/) no-repeat 100% 50%; }
#menu-item-223 a { background: transparent url(/ftp/chobotnice.png/) no-repeat 100% 50%; }
#menu-item-178 a { background: transparent url(/ftp/prase.png/) no-repeat 100% 50%; }
#menu-item-353 a { background: transparent url(/ftp/zajic.png/) no-repeat 100% 50%; }
#menu li a:hover { background-color: #e8f4d5; }
Obr. Rozdílné obrázky pro položky menu
Obdobným způsobem si můžete nastylovat pěkné menu podle vaší fantazie. Zápisy CSS stylu mohou být různé a vše záleží na znalosti stylování. Vždy se ke stejnému výsledku můžete dostat různými zápisy.
Vojtěch Štursa
vojtech.stursa(zav)zoner.cz
Přidat komentář
Přehled komentářů
RE: Obrázky sa mi nezobrazujú
21. 11. 2013 1:29:42 | Lenka
Pardon, už som zistila. Úvodzovky na to nemajú vplyv, no dávala som v zápise medzeru medzi url a zátvorku s adresou obrázku.
Odpovědět
RE: Obrázky sa mi nezobrazujú
20. 11. 2013 18:06:18 | Lenka
Ďakujem za pomoc. Teraz to vyzerá super. Zápis som skúšala, ale keď nefungoval, radšej som ho zmazala a nechala len ten pre formátovanie textu. Pozerám, že chyba bola asi v tom, že som adresu súboru na ftp nedala do úvodzoviek - no chýbajú aj v príklade vo vašom článku. Iný rozdiel nevidím.
Odpovědět
RE: Obrázky sa mi nezobrazujú
20. 11. 2013 17:28:11 | Vladimír Souš
Dobrý den Lenko,
úplně vám ve vlastním CSS chyběl zápis nejdůležitější a to:
#menu li a { background: url("/ftp/gift-red.icon.png") no-repeat;
Tímto zápisem nahrajete pozadí pro všechny odkazy v menu. Přesnou úpravu jsem vám již napsal přímo do vašeho vlastního CSS stylu stránek.
Odpovědět
Obrázky sa mi nezobrazujú
20. 11. 2013 15:30:26 | Lenka
Dobrý deň,
skúšala som podľa tohto návodu pridať malú ikonku uloženú na ftp k zvolenej položke v menu, ale nijakým spôsobom mi to nejde. Podarilo sa mi napr. zmeniť farbu textu celého menu alebo aj konkrétnej položky. No obrázky sa objaviť nechcú. Neviem, či netreba k zápisu css ešte niečo pridať alebo či mi zobrazenie ikonky neblokuje východzí štýl šablóny. Ide o stránku www.bio-center.sk.
Ďakujem za pomoc. Lenka
Odpovědět