Advanced Search

Wordpress optimized two level nav

/ Published in: jQuery
Save to your folder(s)
Assumes that you have got a #mainnav around your menu. Works nicely with wp_nav_menu inside.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.