jquery real--imitation Taobao mall left navigation effect

jquery real--imitation Taobao mall left navigation effect _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Hope to be useful to everyone.

Here is the effect chart:
Effect implementation based on the JQ. HTML () method. Greatly simplifies the operation of the DOM.
Here's the code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Imitation Taobao Mall left navigation effect t</title>
<script src= "Jquery-1.4.2.min.js" type= "Text/javascript" >
</script>
<style type= "Text/css" >
* {
margin:0px;
padding:0px;
}
ul{
List-style:none;
}
Ul.nav Li {
Cursor:pointer;
width:130px;
height:30px;
Text-align:center;
border:1px solid #A91319;
line-height:30px;
MARGIN:4PX Auto;
Background: #FFF8F6
}
Ul.nav Li a {
width:130px;
height:30px;
Display:block;
Color: #A71F37;
Text-decoration:none;
}
Ul.nav Li A:hover {
Background: #A91319;
width:130px;
height:30px;
Display:block;
Color: #ffffff
}
Div#showvalue {
BORDER:3PX solid #A91319; Background: #ffffff; width:400px; Height:auto; padding-bottom:10px;
}
ul.brand_list{Overflow:hidden; width:350px;}
Ul.brand_list li{line-height:30px; height:auto;}
Ul.brand_list li.brand_name{font-weight:bolder; width:100px; float:left; margin-left:10px; color: #A71F37; margin-right:5px;}
Ul.brand_list li.brand_content{width:220px; float:right;}
Ul.brand_list li.brand_content a{color: #A71F37; text-decoration:none;}
Ul.brand_list li.brand_content span{padding:0 3px; border-left:1px solid #cccccc; font-size:14px;}

</style>
<body>
<div id= ' guid ' style= ' width:200px; >
<ul class= "nav" style= "border:none;" >
<li>
<a href= "#" > Fashion apparel </a>
</li>
<li>
<a href= "#" > Boutique shoe bag </a>
</li>
<li>
<a href= "#" > Sports outdoor </a>
</li>
<li>
<a href= "#" > Mobile digital </a>
</li>
<li>
<a href= "#" > Maternal and Infant Supplies </a>
</li>
</ul>
</div>
<div id= "Hdvalue" style= "display:none; Position:absolute; left:0px; " >
<div>
<div class= "Con_st" >
<div>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>

</div>
</div>
</div>

<div>
<div class= "Con_st" >
<div>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
</div>
</div>

</div>
<div>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
</div>
<div>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
</div>
<div>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
<ul class= "Brand_list" >
<li class= "Brand_Name" > Everyone electric ></li>
<li class= "Brand_content" >
<a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a><a href= "#" > Brand </a> <a href= "#" > Brand </a>
</li>

</ul>
</div>
</div>
<div id= "Showvalue" style= "Z-INDEX:22; Display:none; position:fixed; top:-77px; left:130px; margin-left:20px; margin-top:100px; " >
</div>
<script type= "Text/javascript" >
$ (document). Ready (function () {//Load DOM
if (!$ ("#guid"). Is (": Animated")) {///first to determine whether the animation state
var lis = $ ("#guid Ul.nav li");
Traverse the document Tree
Lis.each (function (i) {
$ (this). Bind ("MouseOver", I, function () {
$ ("#showValue"). Show ();
var HV = $ ("#hdValue"). Children (). EQ (i);
$ ("#showValue"). HTML (hv.html ());
$ ("#showValue"). Bind ("MouseOver", function () {
$ ("#showValue"). Show ();
})
});
});
Controlling Mouse Removal events
$ ("#guid, #showValue"). MouseLeave (function () {
$ ("#showValue"). Hide ();
});
}
});
</script>
</body>

The above is all code, JQ code part is relatively simple, so did not write too many comments.
And please forgive me.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery real--imitation Taobao mall left navigation effect _jquery

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support