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
   [MegaMenuScreen1.png]
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. Advanced mega-menu

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 -->
  
  
  	<h6>From blog</h6>
  	
  
  
  						
  
  
  							
  A trip back to your roots
  Thousands 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.
  
  								
  
  
  							
  
  						
  
  					
  
  
  
  <!-- end  C O L U M N   # 1 -->
  
  <!-- start  C O L U M N   # 2 -->
  
  
  	<h6>Services</h6>
  
  	
  
  
  		
  
  			
  
  
  				
  
  
  				
  Design
  
  				
  
  
  					
  
  
  						
  
  					
  
  				
  
  			
  
  		                                            
  			Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).
  		                                            
  
  					

  Web development

  Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation).
  [/accordion] [/one_fourth] <!-- end C O L U M N # 2 --> <!-- start C O L U M N # 3 -->
  <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 # 3 --> <!-- start COLUMN #4 -->
  <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>
  <!-- end C O L U M N # 4 --> [/toggle]
• 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://yoursite.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.
• 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.
• Step Four Save that and you'll get a nice mega menu.