In the site construction, especially do shopping malls and product sites, usually used to the navigation pop-up menu, such as jquery wrote The imitation Jingdong navigation menu, a classic left-side multi-level navigation menu, learned to arbitrarily change the layout. Jingdong menu has been a lot of JS front-end enthusiasts like to write, today, ant network to share with you a imitation jingdong Mall of the commodity Multi-level category menu, simplified version of the code
First look at jquery imitation Jingdong navigation effect:
The front-end HTML code is as follows:
Copy Code code as follows:
<ul>
<li><a href= "#" >baidu</a></li>
<div class= "Tips" >
<p><a href= "http://www.baidu.com" >baidu</a></p>
</div>
<li>goolge</li>
<div class= "Tips" >
<p><a href= "http://www.google.com" >google</a></p>
</div>
<li>yahoo</li>
<div class= "Tips" >
<p><a href= "http://www.yahoo.com" >yahoo</a></p>
</div>
<li>microsoft</li>
<div class= "Tips" >
<p><a href= "http://www.microsoft.com" >microsoft</a></p>
</div>
</ul>
<style type= "Text/css" >
Html{color: #666; background: #FFF;}
Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}
H1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
table{border-collapse:collapse;border-spacing:0;}
Img{border:none;}
A{text-decoration:none color: #666;}
A:hover{text-decoration:underline color: #FF6600;}
Ul,li{list-style-type:none;}
Q:before,q:after{content: ';}
Sup{vertical-align:text-top;} Sub{vertical-align:text-bottom;}
* All Reset */
body{margin:100px;}
UL li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background: #FFFDD2; position:relative; Z-index:1;}
Tips{position:absolute width:150px; height:150px border:1px solid #E5D1A1 background: #fff; z-index:2; display:none ;}
</style>
JS Code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("ul Li"). each (function (index) {
$ (this). MouseOver (function () {
var obj=$ (this). offset ();
var xobj=obj.left+190+ "px";
var yobj=obj.top-50+ "px";
$ (this). css ({"width": "190px", "Z-index": "9999", "Border-right": "None", "Background": "#fff"});
$ ("UL > Div:eq (" +index+ ")"). CSS ({"Left": xobj, ' top ': Yobj}). Show ();
}). mouseout (function () {
$ ("ul > Tips"). Hide ();
$ (this). css ({"width": "200px", "Z-index": "1", "Border": "1px solid #E5D1A1", "Background": "#FFFDD2"})
})
})
$ ("div"). each (function () {
$ (this). MouseOver (function () {
$ (this). Prev ("Li"). CSS ({"width": "190px", "Z-index": "9999", "Border-right": "None", "Background": "#fff"})
$ (this). Show ();
}). mouseout (function () {
$ (this). Hide ();
$ (this). Prev ("Li"). CSS ({"width": "200px", "Z-index": "1", "Border": "1px solid #E5D1A1", "Background": "#FFFDD2"});
})
})
})
</script>
The effect diagram is as follows
jquery Imitation Jingdong left menu effect, suitable for shopping mall product navigation, here did not do so fine, just use CSS combined with jquery to complete the simple menu effect, if you need to beautify, please in the actual application of their own, compatibility is very good, welcome to use.
