Mega menu

Content

• Description
• Basic mega menu
• Advanced mega menu

Description

Allows to improve navigation bar and highlight selected content.

Basic

The basic is a tree menu dispalyed as 3,4,5 or 6 columns.

How to build the basic mega menu?

1. Step One

   Please follow to Admin Panel > Appearance > Menus and build a hierarchy e.g. you need to have a 3 columns basic menu, therefore 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 this case it is a Basic mega menu. And enter the mega-3 into the Title Attribute input field. Please note, you need to set the mega-3 title attribute on the top level mega menu item only, not on each.

   

3. Step Three

   Save that and you'll get a nice mega menu.

   Please use the mega-4 title attribute in case you need to have 4 columns. Therefore, mega-5 for the 5 columns and mega-6 for 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 the advanced mega menu?

1. 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 -->
   [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="Would you like to know more about our services? I can make a quick presentation."] Mike Forrester [/icon], sales manager</p>
   
   	<p>[icon name="lifebuoy.png" url="http://support.pandathemes.com/" tooltip="Find an answer for your question on the support forum. Otherwise, please, start a new topic."] Get a 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

   Press Publish button and get an ID of the page you've created. Take a look an URL. It will be looks like http://starttica.pandathemes.com/wp-admin/post.php?post=664&action=edit&message=1

   Take a look the post=664. The 664 is an ID you need to remember.

3. Step Three

   Follow to Admin Panel > Appearance > Menus and put an ID on the Title Attribute input field of the top level menu item:

   

   Please make sure that menu item has not a child items.

4. Step Four

   Save that and you'll get a nice mega menu.