Posted By

telltec on 10/08/11


Tagged

javascript js menu wordpress navigation jquery wp nav twolevel


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

rpm


Wordpress optimized two level nav


 / Published in: jQuery
 

Assumes that you have got a #mainnav around your menu. Works nicely with wpnavmenu inside.

  1. // --------------------------------------------------
  2. // Multi level navigation using jQuery
  3. // by Aaron Meder, www.telltec.ch
  4. //
  5. // With a little help of my friend Pierre, thanks!
  6. // --------------------------------------------------
  7.  
  8.  
  9. $(document).ready(
  10.  
  11. function() {
  12.  
  13. // hide second level navs by default
  14. $("#mainnav .sub-menu").css("visibility", "hidden");
  15.  
  16.  
  17. // when hovering the main nav
  18. // TODO change this to the path to the li element inside your main nav
  19. $("#mainnav > div > div > ul > li").hover(
  20.  
  21. // on hover
  22. function() {
  23.  
  24. // if menu has a sub menu
  25. if ($(this).find(".sub-menu").length > 0){
  26.  
  27. $("#subnav").css("visibility", "visible");
  28. $(this).find(".sub-menu").css("visibility", "visible");
  29. }
  30. },
  31.  
  32. // when cursor leaves
  33. function() {
  34.  
  35. $("#subnav").css("visibility", "hidden");
  36. $("#mainnav .sub-menu").css("visibility", "hidden");
  37. }
  38.  
  39. );
  40.  
  41. }
  42.  
  43. );

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: junelt on March 22, 2013

I try your code in my site. why is not working? http://zoomflume.stagemywebsite.com/

pls help/

You need to login to post a comment.