The wp_jquery_dropdownmenu plugin at a glance:
- Create a navigation menu with drop down menus for you Wordpress blog
- Slick JQuery animated sliding down for menus and fading out.
- Works with javascript turned off.
- Auto highlight of the current page you are are on.
- New features in v.02
- Add a link to your blog to the navigation menu.
- Arrange the order of the page to suit your needs.
- Parents pages can can be either links to pages or not if required.
I wrote this plugin to provide my wordpress blog with a navigation or menu that provides drop down menus or sub navigation menus where you need them.
This plugin uses the cross browser JQuery javascript framework for the sliding down menus and JQuery is installed with the plugin.
Each ‘Page’ of your wordpress blog becomes a link in the new navigation bar. Pages that are ‘children’ populate the drop menu of the parent ‘Page’.
For example. You might have a page titled About. You can then set or create pages such as contact us, team, location or whatever and set the parent of each of these pages to ‘About’.
In your new navigation menu hover over the ‘About’ link and a dropdown menu containing contact us, team, location appears.
I’ve tested this on Wordpress version 2.31 and above. It will not work on version 2.0.x as these version does not support the concept of parent and child pages.
Try out the Demo
Installation
Download wp_jquery_dropdownmenu plugin here
Simply unzip the wp_jquery_dropdownmenu.zip and copy the wp_jquery_dropdownmenu directory into your ./wp-content/plugins directory.
Login to the WordPress Admin Interface and enable the PlugIn in the PlugIn section.
Next put the tag below somewhere inside one of your wordpress template files.
That’s it.
Usage
Example:
Insert this somewhere into one of your templates, eg header.php
<?php
echo wp_jquery_dropdownmenu(2, “Blog”,1, 0);
?>
This is the default dropdown menu configuration. If you would like to learn about how you can alter your dropmenu further please read the following:
There are four settings to consider.
The first value(2 in the above example):
0 - does not put a link to you blog into the dropdown menu.
1 - Put a lnk to your blog on the left hand side of the dropdown menu.
2 - put a link to your blog in the right hand side of the navigation menu.
Second value (”blog” in the above example):
If you would like a lin to you blog to appear in your dropdown menu. Put the text here. In the above example “Blog” is used and will probably do for most people.
Third value (1 in the above example):
0 - pages will by sorted by their ID
1 - pages will be arranged accorded to their menu order. The menu order can be set in the pages section of your wordpress blog.
Fourth value (0 in the above example):
0 - if you would prefer the ‘parent’ of a dropdownmenu to be unavailable for clicking.
1 - if you would prefer the ‘parent’ of a dropdownmenu to to click to it’ page.
Further notes
You can style the css by editing the files styles.css in the plugins/wp_jquery_dropdownmenu folder
Comments, questions or suggestions most welcome!
Enjoy.