Wordpress优化的两级导航

Posted 2021-02-24

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

// --------------------------------------------------
// Multi level navigation using jQuery
// by Aaron Meder, www.telltec.ch
//
// With a little help of my friend Pierre, thanks!
// --------------------------------------------------
 
 
$(document).ready(
 
	function() {
 
		// hide second level navs by default
		$("#mainnav .sub-menu").css("visibility", "hidden");
 
 
		// when hovering the main nav
		// TODO change this to the path to the li element inside your main nav
		$("#mainnav > div > div > ul > li").hover(
 
			// on hover
			function() {
 
				// if menu has a sub menu	
				if ($(this).find(".sub-menu").length > 0){
 
					$("#subnav").css("visibility", "visible");
					$(this).find(".sub-menu").css("visibility", "visible");
				}
			}, 
 
			// when cursor leaves
			function() {
 
				$("#subnav").css("visibility", "hidden");
				$("#mainnav .sub-menu").css("visibility", "hidden");
			}
 
		);
 
	}
 
);