How to Build a jQuery Dropdown in WordPress

by Sara Williams

Although you can code an entire dropdown menu in HTML and CSS (Cascading Style Sheets), jQuery allows you to add some animations that work across browsers. JQuery is a library that adds to JavaScript and makes script-writing easier for designers less familiar with programming, though some programming skills help. Applying CSS and jQuery effects to the HTML WordPress generates for blogs requires that you write lean, flexible CSS and check that jQuery is enqueued.

Style the Menu With CSS

Open the “style.css” file for your WordPress theme, using a code editor or Notepad. Start by giving the entire menu a relative position:

.menu { position: relative; }

The relative positioning makes it possible to give absolute positioning to sub-menus without having those float into the corners of the browser window. Use the “menu” class name to target any menu in a WordPress theme. WordPress adds this class to menus automatically.

Float each list item in the menu so each aligns to the left of the other, forming a horizontal bar. Add relative positioning to the list items as well:

.menu li { float: left; position: relative; }

Style the anchor tags that form the links within your menu. Give the links padding, remove text underlines and add a background color. Also add “display: block” to force block-level styling onto the links, which allows you to add the padding:

.menu a { background: black color: white; font-size: 18px; font-weight: bold; text-decoration: none; padding: 10px; display: block; }

The “text-decoration” property removes underlines.

Set a hover state for the links using the “:hover” pseudo-class:

.menu a:hover { background: #aa0000; }

This example uses a hexadecimal color code to create a dark red color. When the user hovers her mouse pointer over a menu item, its background will change.

Hide the sub-menus by shifting all nested “<ul>” tag contents to the left of the browser screen:

.menu ul { position: absolute; left: -9999px; }

While “display: none” also works, this method is more accessible to blind visitors using screen readers.

Add “clear: both” to the sub-menus to make them vertical. Give the sub-menus a set width:

.menu ul li { clear: both; width: 200px; }

Bring the sub-menus back when the user hovers his mouse over its parent item, the top-level link in the menu bar:

.menu li:hover ul { left: 0; }

Write the jQuery Script

Open the “header.php” file for your theme and check that it enqueues jQuery:

<?php wp_enqueue_script('jquery'); ?>

Add this code above “<?php wp_head(); ?>” and the “<body>” tag if it isn't already there.

Open the “footer.php” script and find a pair of “<script>” tags somewhere above the closing “</body>” tag. You can also add the tags yourself. Place between the “<script>” tags your “document ready” function, which checks if the page finished loading:

<script> jQuery(document).ready(function() { }); </script>

Select the sub-menus and use the CSS function to hide them:

<script> jQuery(document).ready(function() { jQuery('.menu li ul').css({ display: “none” }); }); </script>

Select the list items in your menu and use the “hover” event to add your dropdown animation:

jQuery('.menu li').hover(function() { jQuery(this) .find('ul') .stop(true, true) .slideDown('slow'); });

This code goes beneath the first “});” that is in your script so far. In jQuery, “jQuery(this)” is a selector that copies the function's first selector, in this case “.menu li”. The function finds each “<ul>” tag nested inside the hovered list item, stops any other animations going on and then slides the nested list -- the sub-menu -- down.

Change the slide-down function to add an animation when the user hovers her mouse pointer away from a menu item. You can add a fade-out animation on the hover-out:

jQuery('.menu li').hover(function() { jQuery(this) .find('ul') .stop(true, true) .slideDown('slow'); }, function() { jQuery(this) .find('ul') .stop(true, true) .fadeOut('slow'); });


About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.

More Articles