JQuery realizes cascading menu effect of imitation taobao home menu animation
- 2020-03-30 02:36:12
- OfStack
Believe HTM + DIV + CSSl beginners must also want to make taobao home menu animation bar. Today we're going to show you a menu with links. This site I just realized the simple effect, but overall principle is the same oh, so let you see the effect picture.
So to do that we're going to use jQuery of course, so I'm going to show you how to do that, HTML and CSS first, okay
Menu. The CSS
Next comes the main jquery code :menu.js
Notes:
1. Since we use a higher version of jquery file library, some methods are not supported, such as getting the first child of the next element next(erp), which is not supported in 10.1, so I changed a method $(chiled,select), which means element selection in the select range
2. To achieve the whole effect, we also need to bind mouse events to the subtab, so as not to disappear suddenly when we move to the subtab.
To make it look good, you need to add some pictures and styles, but the principle is the same
So to do that we're going to use jQuery of course, so I'm going to show you how to do that, HTML and CSS first, okay
<!DOCTYPE html>
<html>
<head>
<title>menu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<ul>
<li class="menu">
<div class="title">
<span> Computer digital products </span>
</div>
<ul class="content">
<li class="optn"><a href="#"> The notebook </a>
<ul class="tip">
<li><a href="#"> The notebook 1</a></li>
<li><a href="#"> The notebook 1</a></li>
<li><a href="#"> The notebook 1</a></li>
<li><a href="#"> The notebook 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> Mobile hard disk </a>
<ul class="tip">
<li><a href="#"> Mobile hard disk 1</a></li>
<li><a href="#"> Mobile hard disk 1</a></li>
<li><a href="#"> Mobile hard disk 1</a></li>
<li><a href="#"> Mobile hard disk 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> Computer software </a>
<ul class="tip">
<li><a href="#"> Computer software 1</a></li>
<li><a href="#"> Computer software 1</a></li>
<li><a href="#"> Computer software 1</a></li>
<li><a href="#"> Computer software 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> Digital products </a>
<ul class="tip">
<li><a href="#"> Digital products 1</a></li>
<li><a href="#"> Digital products 1</a></li>
<li><a href="#"> Digital products 1</a></li>
<li><a href="#"> Digital products 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Menu. The 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;
}
Next comes the main jquery code :menu.js
$(function(){
var curY;//Gets the TOP of your choice
var curH;//Gets the selected Height
var curW;//Gets the selected width
var objL;//Get the current object
//The custom function is used to get the current position
function setInitValue(obj){
curY=obj.offset().top;
curH=obj.height();
curW=obj.width();
}
//Sets the currently selected mouse - over event
$(".optn").mouseover(function(){
objL=$(this);//Get the current object
setInitValue(objL);
var allY=curY-curH +"px";
objL.addClass("optnFocus");
//Gets the next ul under the gas element
$(".tip",this).show().css({"top":allY,"left":curW});;
});
$(".optn").mouseout(function(){
$(this).removeClass("optnFocus");
$(".tip",this).hide();
});
//To prevent the submenu from disappearing when we move to the submenu, we also set mouse events for the submenu
$(".tip").mouseover(function(){
$(this).show();
objL=$(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus");
});
$(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");
});
});
Notes:
1. Since we use a higher version of jquery file library, some methods are not supported, such as getting the first child of the next element next(erp), which is not supported in 10.1, so I changed a method $(chiled,select), which means element selection in the select range
2. To achieve the whole effect, we also need to bind mouse events to the subtab, so as not to disappear suddenly when we move to the subtab.
To make it look good, you need to add some pictures and styles, but the principle is the same