js實作的常用的左側導航效果_javascript技巧

常用的左側導航效果，JS簡單，為提高導航性能而生，各位可 參考應用。

效果展示：
 
HTML:

複製程式碼

複製程式碼複製程式碼 程式碼🎜>

• 
  

  服饰箱包

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  


• 
  

  酒水饮料

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  


• 
  

  居家建材

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  


• 
  

  餐饮娱乐

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  


• 
  

  美容保健

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  


• 
  

  教育培训

  
  

  
  女装男装童装包包
  

  
  


• 
  

  工业品

  
  

  
  女装男装童装包包
  

  
  


• 
  

  新奇特

  
  

  
  女装男装童装包包
  
  鞋饰品
  

  
  

项目视频

• 


• 


• 


• 


• 

;

;

• 
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  


• 
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

2

;

3

;

4

5

;

6

;

7

8

;

JS：

複製程式碼程式碼如下：

$(".menu_list li").mouseenter(function(){
$(".menu_box").show();
var nav_index = $(".menu_list li") .index(this);
$(".menu_cont").eq(nav_index).show()//滑動選單對應目前內容
.siblings().hide();
}) ;
$(".menu").mouseleave(function(){

$(".menu_box").hide();
}) ;