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

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:

• baidu




baidu



< ;li>goolge




google




• yahoo




yahoo




• microsoft




microsoft

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.