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:
- baidu
< ;li>goolge
- yahoo
- microsoft
js code:
< ;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.