Jak na megamenu v Drupalu s komfortní administrací a podporou Bootstrapu

Webů, které by používaly nějaký typ megamenu jsem nedělal mnoho. Nehodilo se to na každý web, ne každý klient to chtěl a některé jsem od toho naopak odradil já. Důvodem mé nechuti byla poněkud obtížná administrace modulu OM Maximenu, který jsem pro tento účel používal.

Můžu jej charakterizovat čímkoli, jenom ne uživatelskou přívětivostí. Má-li majitel webu něco v takovém menu měnit, musí to pro něj být utrpení. Přesto, v praxi jej můžete vidět na webu Život s dietou, který jsem vytvářel.

Ovšem objevil jsem i jiný způsob tvorby megamenu pro Drupal. S přívětivou administrací, podporou Bootstrapu a připravenými styly, díky kterým budete mít s takovým menu minimum práce na CSS, pokud vůbec. Záleží samozřejmě na požadované grafice webu.

Na mysli mám modul TB Mega Menu. Až je mi s podivem, že jsem si jej nevšiml dříve. Používá jej mnohem více lidí, než zmíněné OM Maximenu. Instalace nevyžaduje nic dalšího, snad jen jQuery Upgrade s nastavením minimální verze jQuery na 1.7. To mám prakticky na všech webech, které vytvářím.

Jak začít s TB Mega Menu v Drupalu 7

Modul TB Mega Menu po svém zapnutí vytvoří několik nových bloků. Všechny se jmenují TB Mega Menu: xyz, kde xyz jsou názvy vašich již existujících navigačních menu. Deaktivujte současný blok hlavního menu a místo něj zapněte TB Mega Menu: Hlavní menu.

Tip: dobrá zpráva je, že díky tomuto modulu můžete zahodit i pomocníky v podobě modulů Superfish nebo Nice Menus.

Po uložení si načtěte stránku s nově zapnutým blokem menu, najeďte na jeho ozubené kolečko a přepněte se do volby Config TB Mega Menu.

Dostanete se do rozhraní, ve kterém jednoduše upravíte položky v rozbaleném menu. Řekněme, že některá z hlavních položek menu už obsahuje podmenu a chcete jej pouze přepnout na dva sloupce:

1. Klepněte na takovou hlavní položku zvoleného menu, tím si rozbalíte její obsah, ve kterém bude seznam řádků podmenu.
2. Klepnutím označte první položku podmenu, kterou chcete přepnout do druhého sloupečku. V záhlaví administrace megamenu se objeví tlačítka se šipkami, klepněte na šipku směřující doprava.
3. Tímto se menu rozdělí na dva sloupečky. Když klepnete nikoli na položku submenu, ale na rámeček, který je ohraničuje, objeví se v horní liště tlačítka + a –. Těmi upravujete počet sloupečků.
4. Pokud přidáte další prázdný sloupeček, označte jej a vyberte blok, který v něm chcete zobrazit. Ten se vám také objeví v administračním náhledu menu.
5. Podobně můžete přidat i další řádek. V takovém případě označte klepnutím do prostoru celý obdélník rozbalené položky menu.
6. Takto můžete postupovat se všemi hlavními položkami menu, jejichž obsah chcete proměnit v megamenu. Po úpravách nezapomeňte nastavení uložit.

Případová studie použití TB Mega Menu

Na následujícím obrázku vidíte výsledek, kterého by bylo možné docílit vložením TB Mega Menu na web Stíhačky.cz.

Postup by byl následující:

1. Pomocí modulu Taxonomy menu upravím nastavení kategorie s termíny, které tvoří názvy zemí v katalogu, tak, aby se tyto termíny, tedy jednotlivé země, propsaly do položky hlavního menu s názvem Katalog. Tím by v tuto chvíli vzniklo klasické rozbalovací menu.
2. Pomocí modulu Views bych vytvořil blok zobrazující fotografii a název naposledy přidaného letounu do katalogu.
3. Nyní bych zapnul modul TB Mega Menu, vypnul stávající zobrazení menu a do příslušného regionu bych umístil blok s názvem TB Mega Menu: Hlavní menu.
4. Pomocí výše uvedeného postupu pak stačí rozdělit podmenu na sloupečky a přidat další sloupec pro umístění bloku. Do něj zvolit blok zobrazující nejnovější letoun v katalogu.
5. V nastavení megamenu jsem pro tuto ukázku ještě upravil výchozí styl na modrý.

Na TB Mega Menu oceňuji opravdu povedené ovládání. Připadá mi, že by si s ním mohl poradit i trochu poučenější uživatel a sám si obhospodařovat položky megamenu. Na rozdíl od OM Maximenu, k jehož ovládání to už chce vyšší dívčí.

Jak si můžete všimnout, k dispozici je celá řada dalších nastavení, která zde nezmiňuji. Například šířka rozbalené položky, propojení na ikonku, zarovnání, druh animace atd.

Celé menu je responzivní a založeno na Bootstrapu, nemusíte se tedy trápit s kódováním CSS pro jednotlivé podpoložky a jejich rozmístění, vše by se mělo správně poskládat do sloupců. Výše uvedená ukázka je bez jakéhokoli doplňkového stylování.

Tip: vylepšení základního menu v Drupalu popisuji v několika tipech také v článku Drupal 7: vylepšete si práci s menu a jeho administrací.