Creating a Mega Navigation Bar for WordPress

click to enlarge

There is one decent plugin out there that adds drop down menus to WordPress. It is the Suckerfish plugin. You can find out more info on that here.

Before we get started, take a look at some of these sites that are using mega drop down menus. You will notice that they are multi level, two tier drop downs with a high degree of flexibility and customization.

Food Network uses mega drop down menus

Newegg uses mega drop down menus

As you can see, the main difference between a mega drop down menu and a normal drop down menu is the multiple line list items and the high degree of customization. If you are looking to create just a simple drop down menu, this tutorial will work for you, you can just remove list items.

The first thing that you will need to do is create the actual markup for your drop down menu. For this tutorial we will be using some very basic html incorporating unordered lists and list items. Below will be an example of what the list should look like. Change the item headings and paragraphs to fit your own needs.

<div id="dropmenu">

<ul id="menu">

<li>

<h2>

<a href="#">Home</a>

</h2>

</li>

<li class="megamenu">

<h2> <a href="#">Wine Selection</a> </h2>

<div>

<h3> Red Wine </h3>

<p> <a href="#">Merlot</a>, <a href="#">Bordeaux</a>, <a href="#">Chianti</a>, <a href="#">More Wines</a> </p>

<h3> White Wine </h3>

<p> <a href="#">Crystol</a>, <a href="#">Champagne</a>, <a href="#">More Wines</a> </p>

<h3> Wine Specials </h3>

<p> 20% off all bulk wine orders over $500 <a href="#">Check out our Specials</a> </p> </div> </li>

<li class="megamenu">

<h2> <a href="#">Beer Selection</a> </h2>

<div> <h3> American Beer </h3> <p> <a href="#">Miller</a>, <a href="#">Budweiser</a>, <a href="#">Bush</a>, <a href="#">Keystone</a>, <a href="#">More Beer</a> </p> <h3> Imported Beer </h3> <p> <a href="#">Corona</a>, <a href="#">Heinekens</a>, <a href="#">More Imported Beer</a> </p>

</div> </li>

</ul>

</div>

The above code will give you a mega menu with a home button, a wine button, and a beer button. The wine and beer buttons will feature drop down options in mega menu format. Be sure to check out part 2 to which will cover the CSS and JavaScript.