Home > Web Front-end > JS Tutorial > body text

jquery imitates Jingdong navigation/imitation Taobao mall left category navigation drop-down menu effect_jquery

WBOY
Release: 2016-05-16 17:35:24
Original
1968 people have browsed it

In website construction, especially for shopping malls and product websites, navigation pop-up menus are usually used, such as the imitation JD navigation menu written in jquery, a classic left-hand multi-level navigation menu, and the layout can be changed at will. The JD menu has been imitated by many JS front-end enthusiasts. Today Ant Network is sharing with you a multi-level product category menu imitating JD Mall. The streamlined version of the code
first takes a look at the jquery imitation JD navigation effect:



The front-end html code is as follows:

Copy code The code is as follows:





js code:
Copy code The code is 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"});
})
})
})


The rendering is as follows,



jQuery imitates the left menu effect of JD.com, which is suitable for shopping mall product navigation. It is not so detailed here. It just uses CSS combined with jQuery to complete the simple effect of the menu. If you need to beautify it, Please try it out yourself in actual applications. The compatibility is very good and everyone is welcome to use it.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template