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

Megamenu – místo klasické rozbalovačky s položkami v jednom sloupci je jich několik, mnohdy doplněné o další informace. Jak na něj v Drupalu s podporou responzivní mřížky Bootstrap?

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.

Nastavení 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:

Administrace TB Mega Menu

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.

Studie TB Mega Menu na webu Stíhačky.cz

Postup by byl následující:

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

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Možná by stálo za zmínku, kde všude a jak změnit/doplnit css soubory pro nastylování megamenu k obrazu svému :)
Teď se tím ještě peru ;-)

Profile picture for user Jan Polzer

Nerozumím. Jaké soubory chcete kam doplňovat? Stačí si dopsat požadované CSS do stylů v tématu vzhledu, ne?

návštěvník

Jj, šlo mi to, že kde vlastně začít, když chci změnit to, co nejde v konfigu na webu :)
Protože v těch některých css souborech TB M.M. je snad i 100 deklarací :O
Ale někdo poradil, že ať na to použiji Firebug add-on a prozkoumám, kterou class chci změnit.
Jde mi především o změnu velikosti základního kontejneru menu (velikost, barva apod.)

Nebo máte lepší způsob?
Díky.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru