js实现仿京东2级菜单效果(带延时功能)

本文实例讲述了jquery实现仿京东2级菜单效果。分享给大家供大家参考。具体如下：

这里介绍js实现仿京东2级菜单效果代码，带有延时功能，操作上更加舒适自然。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/

具体代码如下：

ul{margin:0;padding:0;list-style-type:none;}
a{ text-decoration:none;}
.mold_open_hover,.mold_open{background-image:url();background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
h1{margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url() no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}





 简单的2级菜单导航
 
  
  

  
Wedding
  
Women's Shoes
  
Accessories
  
Beauty & Health
  
  
  
  

   

   Wedding Dresses
   
   
   

   Bridesmaid Dresses
   
   
   

   Wedding Party Dresses
   
   Mother of the Brides Dresses
   |
   Flower Girl Dresses
   |
   Wedding Guest Dresses
   
   
   

   Wedding Accessories
   
    Fabric Swatch
    |
    Bridal Lingerie
    |
    Wedding Flowers
    |
    Wedding Petticoats
   
   
   
  
  
   

   

    Prom Dresses
    
    
   
   

    Military Ball Dresses
    
    
   
   

    Evening Dresses
    
    
   
   

    Cocktail Dresses
    
    
   
   

    Ball Gowns
    
    
   
   

    Homecoming Dresses
    
    
   
   

    Little Black Dresses 
    
    
   
   

    Quinceanera Dresses
    
    
   
   
  
  
   

   

    Dresses
    
    
   
   

    Clubwear
    
    
   
   

    Leggings
    
    
   
   

    Lingeries
    
    Bras
    |
    Babydolls
    |
    Panties
    |
    Hosiery
    
   
   

    Swimwear
    
    
   
   

    Activewear
    
    
   
   
  
  
   

   

    Heels
    
    
   
   

    Pumps
    
    
   
   

    Boots
    
    
   
   
  
  
   

   

    Evening Bags
    
    
   
   

    Hats & Scarves
    
    Womens Hats
    |
    Womens Scarves
    
   
   

    Jewelry
    
    Earrings
    |
    Necklaces
    |
    Rings
    
   
   

    Watches
    
    
   
   
  
  
   

   

    Wigs & Hair extensions
    
    
   
   

    Fascinators
    
    
   
   

    Makeup Tools
    
    
   
   

    Spas & Massagers
    
    
   
   

    Health & Fitness
    
    
   
   
  
  
 
 
若提示有错误，请刷新网页

希望本文所述对大家的jquery程序设计有所帮助。