jquery implementation Cascade menu (imitation Taobao Home)

Believe that beginners HTM+DIV+CSSL students will also want to make the menu of Taobao home page animation bar. Today we will bring you to realize the display of a subordinate menu. Small series I just achieved a simple effect, but the overall principle is the same oh, then let everyone see the effect of the picture bar.

So the way we're going to do that is jquery, so I'll start with the HTML and CSS code.

<! DOCTYPE html> Menu.css

@CHARSET "UTF-8";

*{
	margin:0px;
	padding:0px;
	
}

ul,li{
	list-style-type:none
	
}

. menu{
	width:190px;
	BORDER:1PX Red Solid;
	Background-color: #fffdd2;

optn{
	width:190px;
	line-height:28px;
	border-top:1px red dashed;


content{
	padding-top:10px;
	Clear:left;
}


a{
	Text-decoration:none;
	Color: #666;
	padding:10px
}
. optnfocus{
	background-color: #fff;
	Font-weight:bold;
	
}

div{
	padding:10px
}

. tip{
	width:190px;
	BORDER:2PX Red Solid;
	Position:absolute;
	Background-color: #fff;
	Display:none
}

. Tip li{
	line-height:23px;
}
 

The next step is the main jquery code: menu.js

$ (function () {
	
	var cury;//gets the selected top Var curh;//to get the selected
	height
	var curw;//get the selected width
	var objl;//get the current object
	
	//Custom function to get current position
	function Setinitvalue (obj) {
		cury=obj.offset (). Top;
		Curh=obj.height ();
		Curw=obj.width ();
	}
	
	Sets the mouse sliding event for the current selection
	$ (". Optn"). MouseOver (function () {
		objl=$ (this);//Get current object
		Setinitvalue (OBJL);
		var ally=cury-curh + "px";
		
		Objl.addclass ("Optnfocus");
		Get the next UL
		$ (". Tip", this) under the gas element. Show (). CSS ({' Top ': AllY, Left: CURW});;
		
	})
	; $ (". Optn"). Mouseout (function () {
		
		$ (this). Removeclass ("Optnfocus");
		$ (". Tip", this). Hide ();
		
	});
	
	To prevent the submenu from being moved to the submenu, we also set mouse event
	
	$ (". Tip") for the submenu. MouseOver (function () {
		
		$ (this). Show ();
		objl=$ (This). Prev ("Li");
		Setinitvalue (OBJL);
		Objl.addclass ("Optnfocus");
	
	$ (". Tip"). Mouseout (function () {
		$ (this). Hide ();
		$ (this). Prev ("Li"). Removeclass ("Optnfocus");
		
	});
	
	
Note The main points:
1. Since we are using a higher version of the jquery file library, there are some methods that are not supported, such as getting the first child element next (ERP) for the next element, which is not supported in 10.1, so I changed the method $ (chiled,select), Represents the selection of elements in the scope of a select

2. The implementation of the entire effect we also want to bind the mouse event for the child option box, in order to not disappear when we move to the Child tab.

To achieve good results you need to add some pictures and styles, but the principle is the same OH