New wordpress plugin for creating a drop down navigation menu using JQuery

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.

78 Responses to “New wordpress plugin for creating a drop down navigation menu using JQuery”

  1. svante Says:

    Hoy, this sounds great, I was just looking for something like this, but you forgot to add the files!

  2. Jamie Says:

    Thanks for the heads up, svante :-)
    The link to download the plugin is now fixed. Let me know what you think when you get the chance, thanks.

  3. str3ss Says:

    Jamie!
    This sounds BRILLIANT! Thank you so much for writing this. However, I feel like I’m missing something… I can’t quite get it to work. Does the location of the echo in header.php matter?

  4. Jamie Says:

    Hi str3ss,

    yes the position is important. It must be outside the html head tags and inside the html body tags.

    The header.php is probably not the best example to choose as it contains both header and a body tag, usually.. :-/

    So just make sure it is inside the first HTML body tag and also since it is a PHP function it should be enclosed in the usual PHP opening and closing symbols.
    Hope that helps!

    Jamie

  5. B-man Says:

    Hi str3ss,
    This sounds fantastic (have been looking for a way to do this effectively for quite some time).

    Would you happen to have a site where it is demonstrated? (I hovered over your top menu pages but didn’t see any ‘children’ drop down).

    Thanks very much!

    B.

  6. B-man Says:

    Apologies! Should have said “Jamie” not “str3ss”
    Sorry about that!

    B

  7. David Says:

    Hi Jamie. The drop-down menu is just what I was looking for. I am no programmer and have no idea where to add “echo wp_jquery_dropdownmenu();” in my header and what the usual PHP opening or closing symbols are. Could you give me a tip or do you need the header text?! Thanks in advance! David

  8. David Says:

    Hi Jamie. The plugin is just what I was looking for. No being a programmer, I have no idea where to integrate “echo wp_jquery_dropdownmenu();” in the header. What are PHP opening an closing symbols? I am useing the mandigo themplate for wordpress. Can you help me? Would you need a copy of the header txt? Thanks David

  9. WordPress plugin easily creates drop-down navigation | WordPressGarage.com Says:

    [...] is really handy: the Drop Down Menu WordPress plugin creates a drop-down navigation scheme where sub-pages appear under their parent pages in the menu. [...]

  10. Jamie Says:

    Hello B-man.
    I’ve tested it on WinXP Firefox, Opera and IE 7.
    What browser and OS are you using?
    Thanks.

    Hi David.
    By PHP and closing symbols, I was referring to this
    <?php
    echo wp_jquery_dropdownmenu();
    ?>

    Basically your template is made up of PHP files, one of which is usually called header.php. These files create your blog webpages. So we want to insert the above line into a template file as that line will print out the navigation bar.

    If you are not familiar with PHP/HTML and CSS and editing template files I think your best bet is to get help from someone or pay someone to do it for you.
    Good luck :-)

  11. links for 2008-01-14 at orioa Says:

    [...] New wordpress plugin for creating a drop down navigation menu using JQuery | we eat bricks drop down navigation プラグイン (tags: wordpress plugin navigation) [...]

  12. Gail Says:

    Hi,
    Thanks for creating this great plugin. Just one question, how can I control the order with which my pages are listed both at the top-menu parent level and in the child sub-menu items?

    It appears the code orders by the PAGE ID, however I can’t edit the page ids to change the sequential order of the menu items, I can only edit the PAGE ORDER attribute for a given page.

    The Page IDs assigned to each of my pages as we created them is not a logical order to display my menu items. How can I change the order of the menu items for my pages?

  13. ChaZz Says:

    What a great plug-in!! I have it running quite nicely, but I have a few questions…

    I no longer have my Home page (or Blog page with all my posts). The first tab in the menu is the first page that I created, but it doesn’t show my Home page. Is there a way to have the Home Page show in the menu? Or is there a way for me to create a Page that will show my posts? (I’m still kinda new with WP).

    Also, is there a way to make Parent links un-clickable. I’d like the Parent names to just be the headers, and you need to hover over them to open the Children Links, and not have the
    Parent do anything if you try to click it.

    does this even make any sense?? ;-)

    Thanks for all your hard work!!!
    ~ ChaZz

  14. Jamie Says:

    Hi Gail,
    Thats’s a great suggestion, I have prepared the next version of the plugin that allows you to use the page_order feature to arrange the order of the links on the nav bar yourself.
    I’ll try post it up next week. It’s Friday now and I have a rule. No computers at weekend ;-) Stay tuned!

    Hi ChaZz, thanks for the positive feedback. And yes it makes perfect sense ;-) The next version has those 2 features you are looking for. It works just great. I’ll try post it up next week if I can. Watch this space.

  15. Buffer Dump 18JAN08 « Feet up, eyes closed, head back Says:

    [...] drop down navigation menu using JQuery - demo [...]

  16. Jamie Says:

    Hello,
    Improved version of the JQuery drop down menu now available.

    It contains the extra features requested above:
    Order the pages yourself by using the Page menu order feature.
    Put a link into into the menu for you blog.
    Make the the parent of a drop down menu clickable or not.

    Enjoy

  17. attic Says:

    Hello ! I tried your demo but it doesn’t work fine with Firefox 2.0.0.11 on Mac OSX. The menu Drop down once and when I return on it, it doesn’t drop downn again. Is there an issue with firefox Mac version ?
    I tested it on Safari 3.0.4 and all is Ok.

  18. Jamie Says:

    Thanks for the feedback. I’ve updated the plugin code which should fix this bug.

  19. attic Says:

    Hi, there is another problem always with Firefox 2.0.0.11 on Mac OSX. You can see it in action on my personnal webshare :
    http://www.steekr.com/index.php?m=c9ae77e8&a=7d397569&share=LNK286347a25991eda77
    Thank you for your work

  20. Suckerfish WordPress Plugin | Ryan Hellyer Says:

    [...] It looks like the “JQuery Dropdown Menu” I modeled mine on has undergone some improvements. I haven’t had a chance to try it [...]

  21. Andy Says:

    I like teh plugin a lot but when I save my pages in Admin I get this error:

    Warning: Cannot modify header information - headers already sent by (output started at /home/jflytecr/public_html/cockpit/wp-content/plugins/wp_jquery_dropdownmenu/jquery_dropdownmenu.php:262) in /home/jflytecr/public_html/cockpit/wp-includes/pluggable.php on line 391

    Any ideas? WP v.2.3.2

    A

  22. Andy Says:

    I like the plug-in a lot but when I save my pages in Admin I get this error:

    Warning: Cannot modify header information - headers already sent by (output started at /home/jflytecr/public_html/cockpit/wp-content/plugins/wp_jquery_dropdownmenu/jquery_dropdownmenu.php:262) in /home/jflytecr/public_html/cockpit/wp-includes/pluggable.php on line 391

    Any ideas? WP v.2.3.2

    A

  23. Joseph Says:

    Great plugin! I’ve got it working on http://arearthinstitute.org/ except for one issue. If you hover over a submenu, it usually keeps reloading the drop down menu, making it difficult to see and click. I’m betting that it’s an issue on my site, but do you have any idea why it could be doing this?

    Thanks!

  24. Jamie Says:

    I’ve updated the plugin to solve theses bugs, the latest is version 0.04. Should fix the bugs mentioned by Andy and Josoph.

    Thanks for the feedback guys.

  25. Jamie Says:

    Hello Attic, that’s a neat service you have there, the screencast was most useful!
    The bug should now be fixed in the version 0.04 of the plugin.

  26. Joseph Says:

    Thanks for looking into it Jamie, unfortunately the issue still seems to be there. After opening a menu, if you move the cursor off the drop down menu, then move the cursor back to the drop down menu, it will “drop down” continuously. Any idea what could be causing that?

  27. tedd Says:

    Hi Jamie,
    I have been looking all over my pages code and see no html body tags etc, its all php tags.
    Should I create a new php in DW or so?
    Thanks,
    T

  28. Jamie Says:

    Hi Joseph, I had uploaded old version of the plugin by mistake. The up to date one is now available to download.
    Thanks.

    HI Tedd, you will want to go to your wordpress template files.
    usually in this directory wp-content\themes
    You need to edit one of the php files in the tempalte your blog is currently using. It will probably be the header.php files you will want to edit. Put the < ?php
    echo wp_jquery_dropdownmenu(2, “Blog”,1, 0);
    ?>
    at the end of the header.php file. Be sure you place it outside the head tags though.
    You should not need to create a new php file. Just be sure to check that you are looking at the right files… ;-) Good luck

  29. Rune Says:

    I installed the plugin today, and got the same problem as Andy. I get the error message when I save the changes in the header file.

    Also when I tried to disable the plugin again I got the same error message…

  30. Jamie Says:

    IMPORTANT UPDATE:
    There maybe be a error in the latest plugin. Causing a php error in the admin section. I’ve taken down the plugin download for the moment.
    If you experience this please deactivate and remove the plugin .

    Thanks for the feedback Rune, please remove the plugin until I have this fixed.

    Apologises!!

  31. Rune Says:

    Plugin removed :-)
    Good luck on solving the problem…this will be a godsend for me when it works :-)

  32. Michael Says:

    Is there a way to exclude pages from the list? I only want some of my pages to display on this horizontal navigation, while others will be listed in a different part of my site.

    Thanks!

    Kindly,

    Michael

  33. Midcpro Says:

    I would like to see if I can get this plugin to work with grandchild and great grandchild links as well. Would I just tweak the css to include ul ul ul, etc or is it something in the js or php file that would need tweaking? I was thrilled that I could get this to work, but it breaks for any page links that are not parent or child.

  34. Jamie Says:

    The plugin should be working again. If you have been experiencing problems with earlier version please update to the latest. Thanks.

    Michael: that feature sounds interesting, I’ll try include that in the next version when I get the chance. ;-)
    Midcpro: it will not work for pages grand children or more. At the moment anyway. To achieve this you would need to edit the css and rewrite the plugin PHP. However you might like to try the suckerfish-wordpress-plugin from Ryan Heller at http://ryanhellyer.net/2008/01/14/suckerfish-wordpress-plugin/

    Rune: Thanks for the encouragement, I hope this latest version solves those issues!

  35. Rob Says:

    Nice plugin, thanks.

    Like Michael on Feb 8 it would be great if there was a way to exclude pages from the list.

    Any way to do it with the current plugin?

  36. Becky Says:

    Thank you!!!

    Of course.. I have a question :-D I know you can use cookies to keep the submenu open on other frameworks, but how do you do this with jquery?

    What I would like to do is one the user clicks on the submenu item, it stays open while you are viewing the submenu items.

    I have been trying to solve this but cannot find a solution since I am no good at JS (more of a php person)

  37. Bernardo Says:

    Hi Jamie

    First I’d like to greet you for this nice plugin. Second I have a few questions regarding it.

    Is it possible to make it a sidebar menu, just by tweeking the css? And can I do it?
    Can I put the code at the sidebar instead of the header?

    Best regards

  38. ginny Says:

    Love this plugin. great flexibility. I do have one question… is it possible to change the alt tag and not have it read permanent link “home” I would like it to just read home…

    thanks,

  39. Bernardo Says:

    Hehe

    I’m a designer and .net person.

    Started learning AS3 and PHP this year.

  40. Ryan Ward Says:

    Hi,

    I’m having trouble opening this to unzip it…never had that problem before. It just opens and asks me where to save it…Any help for this?

    Thank you,

  41. Kugelblitz Says:

    Hello Jamie,
    thanks for the nice Plugin. I used Suckerfish-wordpress-plugin from Ryan Heller befor I switched to yours. Cause I like it that you can change the Order in that the Menu entrys appear.
    I’m more a “Design” Person so I have no clue about Programming at all. I got a small issue. Could not find a way to make the Font black when the Mouse is over a button.
    the Font is white and the page is white too. so they disappear if the cursor is not right on the “Menu-word”.
    Have a glance on my Page and you’ll know what I mean.

  42. MrFlesh Says:

    Is there a way I can move the style sheet into wordpress? Or can I copy it onto my main style sheet? Will it still work? This maybe be a noob question…but I’m a noob so…

  43. MrFlesh Says:

    Is there a way I can move the style sheet into wordpress? Or can I copy it onto my main style sheet? Will it still work? This maybe be a noob question…but I’m a noob so…hmmm this maybe a duplicate post if so sorry browser acts goofy on this site.

  44. Steve Says:

    Hi Jamie, this was just what I was looking for , a great plugin, but having a problem getting it working (probably me not the plugin)

    At http://www.pepperedsprout.com/index.php I have 3 menu items , about and CV are just pages and I wanted the dropdown to appear on publishing, which is a category and has 3 posts under it, can you think of anything why it wouldn’t be working?

  45. Steve Says:

    Hi, just regarding my last post is the dropdown not working as its version 2.2.2?

  46. Rob Says:

    I am new to jQuery code, but I can’t download a proper plugin package. Right now the link leads me to a .rar file, though your post indicates it should be a .zip file. Any chance you could post a link to the .zip?

    Thanks
    - Rob

  47. Drop-down menus with WordPress Themes and Plugins | WordPressGarage.com Says:

    [...] wp_jquery_dropdownmenu plugin [...]

  48. Stephen Says:

    Hi,
    I am having a problem with the drop-down part of the menu. All the child page links appear on the page below the menu in the body of the blog. When you mouse over the links just vanish.see the site at http://www.smyrnahighsoccer.com
    Any ideas? Thanks.

  49. Stephen Says:

    This menu works much better without the animation on dropdown.
    I changed this line:-

    $(this).find(”.dropdown_menu”).slideDown(”fast”);

    to

    $(this).find(”.dropdown_menu”).show();

    in wp_jquery_dropdownmenu.js to remove the slide down animation which was causing the menus to stay open when quickly running the mouse along the menu headers.

  50. Eenvoudig drop-down nagivatie integreren in je WordPress Theme | I-Dimensie Says:

    [...] de Drop Down Menu WordPress plugin creëert een drop-down menu navigatie functionaliteit door die extra subpagina’s te laten [...]

  51. Wp Wordpress » Blog Archive » Wordpress JQuery Dropdown Menu Says:

    [...] Visit [...]

  52. Lucy Says:

    Oh drat, WP has stripped out the code above …

  53. Lucy Says:

    OK - I cheated. I put my home page link as the first li item in a horizontal ul menu, and the call to the plug-in as the second li item. Took a little fiddling with the CSS to get my first li to match up with the rest, but it works!

    I now have a ‘hardcoded’ link to my home page, and by virtue of your plugin setting the blog link to the left, that appears as my second link from the left.

  54. FEED.NIO.NAME » Wordpress JQuery Dropdown Menu Says:

    [...] Visit [...]

  55. Raquel Says:

    Hi there. Sweet plugin, but I am having an issue with the blog link - it keeps defaulting to the HOME page!! I’m racking my brains trying to figure out if I am missing something obvious in the plugin setup, or if this a non-plugin related problem. Any suggestions? You can check it in action at http://www.grenadamarine.com/home

  56. Powerfull List of WordPress Lifesavers Plugins Says:

    [...] Creating a drop down navigation menu using jQuery- Create a navigation menu with drop down menus for you WordPress blog, with a slick jQuery animated [...]

  57.   73个强大且最节省您的时间wordpress插件 #1 by 爱跑-edi run Says:

    [...] 18) Creating a drop down navigation menu using jQuery-创建一个AJAX(jQuery框架)的导航条,动态的下拉效果。 [...]

  58. Aleksander Says:

    Hi, thank you for a great plugin, I do however have one problem. When sliding the mouse quick over the drop down menus they don’t reset, hence I quite often get drop down menues all over my page. I have tried the same thing on you test site with the same result. To remove them all I have to do is move my mouse over the parent menu, but needless to say this is getting annoying all the time.

  59. kevin Says:

    GREAT PLUG-IN! thank you!
    For those that have asked to eliminate pages from the dropdown… I was able to do this by creating a page - i called,”blank” and saved but did not ‘pubiish’ this page.
    I then created a new page and made it a ‘child’ page of this “blank” page then saved and ‘published’ this page. This enables you to link tho the page but not have it in the menue.
    Hope that helps.
    Kevin

  60. kevin Says:

    GREAT PLUG-IN! thank you!
    For those that have asked to eliminate pages from the drop-down… I was able to do this by creating a page - i called,”blank” and saved but did not ‘publish’ this page.
    I then created a new page and made it a ‘child’ page of this “blank” page then saved and ‘published’ this page. This enables you to link tho the page but not have it in the menu.
    Hope that helps.
    Kevin

  61. 精通Wordpress系列教程- 3: 78个强大的Wordpress插件列表 | 帕兰映像 Says:

    [...] Creating a drop down navigation menu using jQuery- 为你的Wordpress博客创建一个下拉式的导航菜单, [...]

  62. ted Says:

    Works great when viewed on FF2.

    But when viewed on ie6, the dropdown menu becomes very narrow. This happens even to your demo too:
    http://throwingshapes.net/hp_wordpress/

  63. Rene Says:

    Thank you for writing this! It works very well and in all browsers without complication. That is exactly the right plugin I was searching for!

  64. Rene Says:

    Great work! Thank you! It works in all tested browser (ie6, ie7 and, of course, in firefox). This is exactly the plugin I was searching for!

  65. Jeff Says:

    Thx, Kevin! I was going to ask about getting this to work with the ‘Exclude Pages’ plugin. But.. your idea worked great.

    Can someone tell me how you center this menu? The default left doesn’t look good with my theme.

  66. Jeff Says:

    Also.. It removed the link to my ‘Home’ page. How can I get this to show?
    Thx!

  67. Jeff Says:

    Oops.. scratch that last question. I see it now! Didn’t read well enough. :)

  68. Feldstudie.net .::. Admin, AdSense, Apache, Gehalt, Hacking, Lohn, MySQL, Navigation, Netzwerk, Passwörter, Performance, PHP, Plugin, Proxy, Wordpress .::. Links vom 11.-30.04.08 Says:

    [...] New wordpress plugin for creating a drop down navigation menu using JQuery | WeEatBricks:: Web desig… - zu sehen auf Sebbis Blog [...]

  69. Cecilia Says:

    I have tried so many plugins that claim to do the same, but none of them works. This one works perfectly. Thanks.

  70. Los mejores 72 plugins para wordpress - MundoBloggers:::Comunidad de Bloggers Says:

    [...] Creating a drop down navigation menu using jQuery - Te permite crear un menú desplegable en tu blog. Usa jQuery para dar efectos en el despliegue de opciones y un desvanecimiento para ocultarlas. [...]

  71. צעצועים לדף הבית » ITbananas Says:

    [...] הזה יש כמה פיתוחי המשך: Sons of Suckerfish חלקם מצריכים שימוש ב- JQuery (סוג חדש של גאווה סקריפט) וחלקם לא: Ryan’s [...]

  72. WildBlog » Blog Archive » Los 72 mejores plugins wordpress para facilitarte la vida Says:

    [...] Creating a drop down navigation menu using jQuery - Te permite crear un menú desplegable en tu blog. Usa jQuery para dar efectos en el despliegue de [...]

  73. Ben Says:

    Hi Jamie

    Just wanted to say thanks for a great plug-in and all the time you put into it. I’m having a problem with it in FF3. If I have more than 2 items on a drop down menu as soon as I move of the 2nd one it closes.

    I was wondering if you’ve come across this, and if you know of any work arounds.

    Thx
    Ben

  74. Cassie Says:

    Is there any way to add direct links to this menu?

  75. Amber Says:

    Hi there,

    I love this plugin, but when I mouse-over a parent link, and then try to move the mouse down to the sub item, the menu dissapears, so I can’t ever click on a submenu item. Any idea how to fix?

    Thanks,
    Amber

  76. Tim Says:

    Anybody successfully turned this into a menu built off the *Category* hierarchy?

    That’s what I was originally looking for. Implemented this, got it working fine…. and realized it was for *posts* instead.

    Otherwise, great job on this!

  77. Overshee Says:

    The menus get stuck open when you move off them too quickly and then sometimes after a while they stop opening. Am I doing something wrong?

  78. inntell Says:

    Thanks it helpfully.

Leave a Reply