Jquery convert Wordpress sub-menus into drop-down menus

/ Published in: jQuery
Save to your folder(s)

When applied to a page, this script converts any sub-menus created in the Wordpress menu editor into drop-down menus without having to specify each menu item individually. Fades in sub-menu of selected list item quickly, then fades out when leaving list item or sub-menu. See url above.

Only decided to post this because I couldn't find anything similar and was sick of working with inefficient menu creator plugins in WP.

Copy this code and paste it in your HTML
  1. //the container wrapping the menu
  2. var menuContainer = '#mainnavigation';
  4. $(document).ready(function() {
  6. //hover display for main menu items
  7. $(menuContainer+' ul.menu li').hover(
  9. //on enter
  10. function() {
  11. selectedItem = this.id;
  12. $(menuContainer+' ul li#'+selectedItem+' ul.sub-menu').fadeIn('fast');
  13. },
  14. //on leave
  15. function() {
  16. selectedItem = this.id;
  17. $(menuContainer+' ul li#'+selectedItem+' ul.sub-menu').fadeOut('fast');
  18. }
  19. );
  20. });

URL: http://www.happynuclear.com/sandbox/wpsubdropper/version1.html

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.