we will learn how to enhance you WordPress in a whole new way. Multi-Level or Multi-Dimensional navigation menus can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. We will start off by making a HTML version, then making it compatible with WordPress.

Beginning the Script

At the beginning of every new project it’s good to have a good basic setup to work with. I prefer to have the basic elements every page needs, head and body, along with importing one stylesheet and the latest jQuery.

Starting the Navigation

Before we dive into WordPress, in this tutorial or in any case, you want to make a working HTML version first. First, we are going to open up a header div width a unordered list inside of it that will end up being are navigation menu. You can give that unordered list a class or id but i am choosing not to for this tutorial. Next, fill the unordered list with about 4 list items (make sure the text is nested in anchor tags).

Styling the Top Level List

Now, let’s style that basic top level list. We want our list items aligned horizontally, and of course centered in the middle of the page. We will also give the header a nice subtitle gradient using CSS3.

Adding the Next Level

Here is where we separate this navigation menu from most; we will add another list of items under each current item so there are submenus when hovered. On the list items you want to have sub menus you will need to open a new unordered list before the parent closing list item, like so:

jQuery Animation Time

Now, time for the fun part! Before we style those sub level menus we want to be able to see the content they hold and be able to make them appear on hovering the parent. To do this, we will use jQuery’s .hover() function.

Making it Work with WordPress

The Admin Panel

The items for the menu are going to be pages, so when you create your pages the ones you want to be the top level menu items make them have no parent. The items you want under a main item and appear on hover give them the parent of said element. The field to give a page parent is located in the right sidebar during page creation.

The PHP

Now, making this work with WordPress is very easy. All you need to do is include the CSS and JavaScript with your current theme and then do the following with your header.php file.