Previously - I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).

Since writing that post - I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes - that would be a much nicer way to work with menus. For this - I give you Jappler Menus version 2.

Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/

There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.

The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
[html]

Home
About Us

Our Story
Our Clients
Our Philosophy

Our Products

WordPress Themes
WordPress Plugins
WordPress Consultation

HOWTOs

bbPress
… [more]

Awhile back, I put something together (sons of suckerfish and sliding doors) and then was recently asked how to get this to work dynamically in WordPress.

The key to getting this to work dynamically is to first choose how you want to organize your site. I have done numerous sites based on categories and a lot also done using pages. Once you figure out what you want your menus to be driven from (page hierarchy or category hierarchy) you can then use some built in WordPress functions to dynamically fill out your menus.

For categories: you will want to use the wp_list_categories function
Example: (using the CSS and JS from the article I posted previously)

With that example, you can exclude certain categories, and their will not be a "Categories" text as the first level of the list. For more options, check out the wp_list_categories documentation.

For categories: you will want to use the wp_list_pages function
Example: (using the CSS and JS from the article I posted previously)

With that example, you can exclude certain pages, and their will not be a "Pages" text as the first level of the ... [more]