Mega Menu
Content
Description
For websites offering a large range of products or services, a Mega Menu comes in handy. Unlike normal drop menus, a Mega Menu allows you to include multiple categories in your menu, making navigation straightforward and clear at just one glance.Basic
The basic Mega Menu is a tree-based menu which can be displayed as 3–6 columns according to your preference.How to build a basic mega menu
- Step One
Go to
Admin Panel > Appearance > Menusand build a hierarchy. e.g. For a 3-column basic menu, you need to create a hierarchy like this:- Basic mega menu
- Column #1
- Column #2
- Column #3
- Animals
- Fruits
- Apple
- Cars
- Basic mega menu
- Step Two
Open the top level menu item. In this case it is a
Basic mega menu. And enter themega-3into theTitle Attributeinput field. Please note, you need to set themega-3title attribute on the top level mega menu item only, not on each.
- Step Three
Save that and you'll get a nice mega menu.Please use the
mega-4title attribute in case you need to have 4 columns. Therefore,mega-5for the 5 columns andmega-6for the 6 columns.
Advanced
An advanced mega menu based on the selected page. Advanced mega menu allows to contain any kind of content. Shortcodes allowed.How to build an advanced mega menu?
- Step One
Create a page:
Paste a sample data -OR- enter your own:
Get a sample data<!-- start C O L U M N # 1 -->
<!-- end C O L U M N # 1 --> <!-- start C O L U M N # 2 --><h6>From blog</h6>
A trip back to your rootsThousands of people flock to Salt Lake City each year, not for Utah’s skiing or national parks, but to search through endless records of births, deaths and marriages at one the world's largest repositories of genealogy information on the planet.
<h6>Services</h6>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).Design[/accordion] [/one_fourth] <!-- end C O L U M N # 2 --> <!-- start C O L U M N # 3 -->Web developmentAliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).<!-- end C O L U M N # 3 --> <!-- start COLUMN #4 --><h6>Testimonial</h6>And again, the best service on the planet! Thank you. Works like a charm.
jonknight
TF customer<!-- end C O L U M N # 4 --> [/toggle]<h6>Get in touch</h6> <p> Mike Forrester , sales manager</p> <p> Get a support </p> <p> St. Vincent Place Glasgow, D99</p> <p> +66.123.000.00.99 </p> - Step Two
Press
Publishbutton and get an ID of the page you've created. Take a look an URL. It will be looks likehttp://yoursite.com/wp-admin/post.php?post=664&action=edit&message=1Take a look thepost=664. The664is an ID you need to remember. - Step Three
Follow to
Admin Panel > Appearance > Menusand put an ID on theTitle Attributeinput field of the top level menu item:
Please make sure that menu item has not a child items.
- Step Four Save that and you'll get a nice mega menu.