0 Kč s DPH

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.

Menu je napsáno s pomocí seznamu <ul> <li> a podpoložky menu jsou zanořeným seznamem, kdy v položce <li> je vložen další seznam <ul> <li>. Než budete upravovat menu, vždy je vhodné se podívat jak je zapsáno v defaultním CSS stylu. Mnohdy vám to ulehčí práci s psaním 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

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