TopBusiness

Mega Menu

Content

• Description
• Basic mega menu
• Advanced mega menu

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.

Basic mega-menu

How to build a basic mega menu

1. Step One

   Go to Admin Panel > Appearance > Menus and 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



2. Step Two

   Open the top-level menu item. In our case it is the Basic mega menu. Enter mega-3 into the Title Attribute field to set a mega menu with 3 columns.

   Note: You need only set the mega-3 title attribute for the top-level item in the mega menu. It is not necessary to set this attribute for items lower on the mega menu.

   
3. Step Three

   Click on Save Menu and you're done. If you require a mega menu with 4 columns, enter mega-4 for the title attribute instead. Similarly, enter mega-5 for 5 columns and mega-6 for 6 columns.

Advanced

An advanced mega menu catered to the page the user is currently on. Advanced mega menus allow you to include any kind of content, incl. images.

Shortcodes are allowed.

Advanced mega-menu

How to build an advanced mega menu?

1. Step One

   Create a page:

   

   Paste sample data (from below) -OR- enter your own:

   
   Click for sample data

   <!-- start  C O L U M N   # 1 -->
   [one_fourth]
   
   	<h6>From blog</h6>
   	[posts qty="1" t="left" tw="45" th="45" titletag="strong" excerpt="yes" button="no"]
   
   [/one_fourth]
   <!-- end  C O L U M N   # 1 -->
   
   
   <!-- start  C O L U M N   # 2 -->
   [one_fourth]
   
   	<h6>Services</h6>
   
   	[accordion]
   
   		[toggle title="Design" status="open"]
   			Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).
   		[/toggle]
   
   		[toggle title="Web development"]
   			Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).
   		[/toggle]
   
   	[/accordion]
   	
   [/one_fourth]
   <!-- end  C O L U M N   # 2 -->
   
   
   <!-- start  C O L U M N   # 3 -->
   [one_fourth]
   
   	<h6>Testimonial</h6>
   
   	[quote bg="F5F5F5" color="777" cite="jonknight" subcite="TF customer"] And again, the best service on the planet! Thank you. Works like a charm. [/quote]
   	
   
   [/one_fourth]
   <!-- end  C O L U M N   # 3 -->
   
   
   <!-- start COLUMN #4 -->
   [one_fourth]
   
   	<h6>Get in touch</h6>
   
   	<p>[icon name="user_business.png" url="#" tooltip="Like to know more about our services? Contact me for a quick presentation."] Mike Forrester [/icon], sales manager</p>
   
   	<p>[icon name="lifebuoy.png" url="http://support.pandathemes.com/" tooltip="Find an answer to your question on the support forum. Feel free to start a new topic for an as yet unanswered question."] Get support [/icon]</p>
   
   	<p>[icon name="house.png"] St. Vincent [/icon] Place Glasgow, D99</p>
   
   	<p>[icon name="mobile_phone.png"] +66.123.000.00.99 [/icon]</p>
   
   [/one_fourth]
   <!-- end  C O L U M N   # 4 -->
   

2. Step Two

   Click Publish band get an ID of the page you've created. The URL should look like this: http://yoursite.com/wp-admin/post.php?post=664&action=edit&message=1

   Take a look the post=664. In this case, 664 is the ID you need.

3. Step Three Go to Admin Panel > Appearance > Menus and insert the ID as the Title Attribute field of the top-level menu item:

   

   Please ensure menu item does not include Custom Links, Pages or Categories, like a Basic Mega Menu would.

4. Step Four

   Save your changes and you're done.