jQuery implements cascading menu effect (imitation of Taobao homepage menu animation)

jQuery implements cascading menu effect (imitation of Taobao homepage menu animation)_jquery

WBOY

Release： 2016-05-16 16:52:42

Original

1246 people have browsed it

I believe that students who are new to HTM DIV CSSl will also want to create menu animations for Taobao’s homepage. Today we will show you how to display the cascading menu. The editor just achieved a simple effect, but overall the principle is the same, so let everyone take a look at the renderings first.

So to achieve this effect, of course we have to use jQuery, then I will start to explain how to do it, first the html and css codes

Copy code The code is as follows:

< title>menu.html

< /head>

< ;span>Computer digital products
- Notebook
  - Notebook 1< /li>
  - Notebook 1
  - Notebook 1< ;/a>
  - Notebook 1
  < /li>
- Mobile hard drive
- Computer Software
  - Computer Software 1
  - Computer Software 1
  - Computer Software 1
  - Computer Software 1
  - Digital Products
    - Digital Product 1
    - Digital product 1
    - < ;a href="#">Digital Products 1

menu.css

Copy code The code is as follows:

 
@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; 
} 

接下来就是主要的jquery代码:menu.js

复制代码代码如下:

 
$(function(){ 

var curY;//获取所选想的TOP 
var curH;//获取所选的Height 
var curW;//获取所选的width 
var objL;//获取当前对象 

//自定义函数用于获取当前位置 
function setInitValue(obj){ 
curY=obj.offset().top; 
curH=obj.height(); 
curW=obj.width(); 
} 

//设置当前所选项的鼠标滑动事件 
$(".optn").mouseover(function(){ 
objL=$(this);//获取当前对象 
setInitValue(objL); 
var allY=curY-curH  "px"; 

objL.addClass("optnFocus"); 
//获取气元素下的下一个ul 
$(".tip",this).show().css({"top":allY,"left":curW});; 

}); 
$(".optn").mouseout(function(){ 

$(this).removeClass("optnFocus"); 
$(".tip",this).hide(); 

}); 

//为了防止移到子菜单时子菜单不见，我们也要为子菜单设置鼠标事件 

$(".tip").mouseover(function(){ 

$(this).show(); 
objL=$(this).prev("li"); 
setInitValue(objL); 
objL.addClass("optnFocus"); 
}); 

$(".tip").mouseout(function(){ 
$(this).hide(); 
$(this).prev("li").removeClass("optnFocus"); 

}); 
}); 

注意要点：

1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp)，在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择

2.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在我们移动到子选项卡中，突然消失。

要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦