Pin Me

Creating a Mega Navigation Bar for WordPress

written by: Nicholas•edited by: Michele McDonough•updated: 8/9/2011

Want to add a drop down menu to your WordPress blog? How about a MEGA drop down menu? We'll show you how with this simple HTML code.

  • slide 1 of 4

    Plugins and Coding

    WordPress - WordPress.Org Plugins, of course, are always the easiest route to take. They require no coding knowledge and can be easily added to your WordPress blog with little effort. However, choosing to manually add elements to your blog will not only teach you more about coding, but also give you a better understanding of your site so that future modifications can be done easily.

    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.

  • slide 2 of 4

    Examples

    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.

  • slide 3 of 4

    Create the List

    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>

  • slide 4 of 4

    Part 2

    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.

References

  •  Image Credit: WordPress Logo - http://wordpress.org
  • Suckerfish Plugin - http://wordpress.org/extend/plugins/ryans-suckerfish-wordpress-dropdown-menu/

How To Add A Mega Drop Down Menu To Your WordPress Blog

This two part series tutorial will teach you how to add a basic drop down menu to WordPress using CSS, HTML, JavaScript, and jQuery.
  1. Creating a Mega Navigation Bar for WordPress
  2. How To Create A Mega Drop Down Menu For WordPress Part 2