Pin Me

How To Create A Mega Drop Down Menu For WordPress Part 2

written by: Nicholas•edited by: Michele McDonough•updated: 12/10/2009

One common request that many WordPress bloggers have is "how to add a drop down menu to my blog". This article explains how to add a mega drop down menu to a blog. A mega drop down menu is basically a simple drop down menu with extra functionality. This is part two in the series.

  • slide 1 of 3

    The CSS

    The CSS for our dropdown menu is also quite simple. It will need to be added to your style.css file located within your WordPress theme.

    /* ---------------[ Mega Drop-Down Wine and Beer Menu ]--------------- */

    ul#menu {

    background: #fff;

    color: #fff;

    margin: 0;

    padding: 0.25em 0 0.6em 0;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid #ccc;

    }

    ul#menu li {

    display: inline;

    margin: 0.1em 0em;

    position: relative;

    z-index: 2;

    }

    ul#menu h2, ul#menu h3 {

    font-size: 100%;

    font-weight: normal;

    display: inline;

    }

    ul#menu li a {

    color: #2F2F2F;

    text-decoration: none;

    padding: 0 1em;

    font-size: 105%;

    font-weight: bold;

    font-family: Lucida Grande,Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif;

    z-index: 2;

    }

    ul#menu li a:hover {

    text-decoration: underline;

    }

    ul#menu li.mega a {

    background: transparent url(arrow.gif) center right no-repeat;

    padding: 0 0.5em;

    }

    ul#menu li.mega a:hover {

    text-decoration: underline;

    }

    ul#menu div {

    display: none;

    }

    ul#menu li.mega div {

    border: 1px solid #CCC;

    border-top: none;

    width: 25em;

    position: absolute;

    top: 2em;

    left: 0em;

    padding: 0.4em;

    background: #fff;

    color: #105cb6;

    }

    ul#menu li.hovering div {

    display: block;

    }

    ul#menu li.mega div a {

    color: #000;

    padding: 0;

    background-image: none;

    text-decoration: none;

    font-size: 11px;

    }

    ul#menu li div a.more {

    color: #390;

    font-weight: bold;

    }

    ul#menu div h3 {

    color: #000;

    font-weight: bold;

    font-size: 1.1em;

    }

    ul#menu div p {

    margin: 0 0 0.8em 0;

    padding: 0;

    }

  • slide 2 of 3

    Loading the jQuery Library and adding Hover Intent

    Now that we have the markup and styling done. You should notice that the menu does look pretty much done on your blog. However, the drop downs are not yet working, so you cannot see any of the list items. This is where we will add some jQuery to animate the menus.

    You will first need to load up the jQuery library to your WordPress theme. You can find out how to do that here.

    We will also be using a plugin called hoverintent to make the menu work properly. Without hoverintent, the dropdown menu would not activate correctly when a visitor hovers over it. You will need to add hover intent to your WordPress theme the same way that you added the jQuery library. You can download the hoverintent file here.

  • slide 3 of 3

    The jQuery

    Last but not least, you need to add some additional code within the <head> portion of header.php to set timings and mods for the drop down menu.

    //<![CDATA[

    jQuery(document).ready(function() {

    function addMegamenu(){

    jQuery(this).addClass("hovering");

    }

    function removeMegamenu(){

    jQuery(this).removeClass("hovering");

    }

    var megaConfig = {

    interval: 100,

    sensitivity: 4,

    over: addMegamenu,

    timeout: 500,

    out: removeMegamenu

    };

    jQuery("li.megamenu").hoverIntent(megamenuConfig)

    });

    //]]>

    </script>

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