分针网——每日分享：实现电商菜单切换效果

最新推荐文章于 2024-07-13 09:43:34 发布

分针网

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量437

点赞数

本文介绍如何使用HTML和CSS创建一个响应式的侧边菜单，并通过JavaScript动态控制菜单项的展开和隐藏，实现良好的用户体验。

本文转自：http://www.f-z.cn/id/292

 
  实现如下菜单效果
 

 
  第一步 先实现布局
 

  
   <div class="wrap" id="menu">
  
          
   <ul>
  
              
   <li data-id="a">
  
                  
   <span>家用电器
   </span>
  
              
   </li>
  
              
   <li data-id="b">
  
                  
   <span>手机/运营商/数码
   </span>
  
              
   </li>
  
              
   <li data-id="c">
  
                  
   <span>电脑办公
   </span>
  
              
   </li>
  
              
   <li data-id="d">
  
                  
   <span>家居/家具/家装/厨具
   </span>
  
              
   </li>
  
              
   <li data-id="e">
  
                  
   <span>男装/女装/童装/内衣
   </span>
  
              
   </li>
  
              
   <li data-id="e">
  
                  
   <span>个户化妆/清洁用品/宠物
   </span>
  
              
   </li>
  
              
   <li data-id="f">
  
                  
   <span>鞋靴/箱包/珠宝/奢侈品
   </span>
  
              
   </li>
  
              
   <li data-id="g">
  
                  
   <span>运动/户外/钟表
   </span>
  
              
   </li>
  
              
   <li data-id="h">
  
                  
   <span>汽车/汽车用品
   </span>
  
              
   </li>
  
              
   <li data-id="i">
  
                  
   <span>女婴/玩具乐器
   </span>
  
              
   </li>
  
              
   <li data-id="j">
  
                  
   <span>食品/酒类/生鲜/特产
   </span>
  
              
   </li>
  
              
   <li data-id="k">
  
                  
   <span>医疗保健
   </span>
  
              
   </li>
  
          
   </ul>
  
  
   </div>

 
  左边栏是一个列表，我们就用ul将这个列表所有信息都列出来,得到下面的效果
 

 
  我们开始添加css样式来实现左边栏的样式
 

  
   .wrap
   {
  
      
   position
   : relative
   ;
  
      
   width
   : 200px
   ;
  
      
   top
   : 50px
   ;
  
      
   left
   : 50px
   ;
  
  
   }
  
  
   ul
   {
  
      
   padding
   : 15px 0
   ;
  
      
   margin
   : 9px 0
   ;
  
      
   list-style
   : none
   ;
  
      
   background-color
   : #6c6669
   ;
  
      
   color
   : #fff
   ;
  
      
   border-right-width
   : 0
   ;
  
  
   }
  
  
   li
   {
  
      
   display
   : block
   ;
  
      
   height
   : 30px
   ;
  
      
   line-height
   : 30px
   ;
  
      
   padding-left
   : 12px
   ;
  
      
   cursor
   : pointer
   ;
  
      
   font-size
   : 14px
   ;
  
      
   position
   : relative
   ;
  
  
   }
  
  
   li.active
   {
  
      
   background
   : #999395
   ;
  
  
   }
  
  
   li span:hover
   {
  
      
   color
   : #c81623
   ;
  
  
   }

 
  这里我们最外层的div设置div是相对定位，因为等会我们的右边的详细信息会通过设置绝对定位，外层div是相对div，内层的div相对外层的div进行绝对定位，这样实现布局的效果
 

  
   <div id="sub" class="">
  
              
   <div id="a" class="sub_content ">
  
                  
   <dl>
  
                      
   <dt>
  
                          
   <a href="#">电视
   <i>>
   </i>
   </a>
  
                      
   </dt>
  
                      
   <dd>
  
                          
   <a href="#">合资品牌
   </a>
  
                          
   <a href="#">国产品牌
   </a>
  
                          
   <a href="#">互联网品牌
   </a>
  
                      
   </dd>
  
                  
   </dl>
  
                  
   <dl>
  
                      
   <dt>
  
                          
   <a href="#">空调
   <i>>
   </i>
   </a>
  
                      
   </dt>
  
                      
   <dd>
  
                          
   <a href="#">壁挂式空调
   </a>
  
                          
   <a href="#">柜式空调
   </a>
  
                          
   <a href="#">中央空调
   </a>
  
                          
   <a href="#">空调配件
   </a>
  
                      
   </dd>
  
                  
   </dl>
  
                  
   <dl>
  
                      
   <dt>
  
                          
   <a href="#">洗衣机
   <i>>
   </i>
   </a>
  
                      
   </dt>
  
                      
   <dd>
  
                          
   <a href="#">滚筒洗衣机
   </a>
  
                          
   <a href="#">洗烘一体机
   </a>
  
                          
   <a href="#">波轮洗衣机
   </a>
  
                          
   <a href="#">迷你洗衣机
   </a>
  
                          
   <a href="#">洗衣机配件
   </a>
  
                      
   </dd>
  
                  
   </dl>
  
                  
   <dl>
  
                      
   <dt>
  
                          
   <a href="#">冰箱
   <i>>
   </i>
   </a>
  
                      
   </dt>
  
                      
   <dd>
  
                          
   <a href="#">对门
   </a>
  
                          
   <a href="#">对开门
   </a>
  
                          
   <a href="#">三门
   </a>
  
                          
   <a href="#">双门
   </a>
  
                          
   <a href="#">冷柜/冰吧
   </a>
  
                          
   <a href="#">酒柜
   </a>
  
                          
   <a href="#">冰箱配件
   </a>
  
                      
   </dd>
  
                  
   </dl>
  
              
   </div>

 
  添加上右边详细菜单的div，这里因为是一个大类后面多个小类，使用dt和dd的语义化标签，更好,在添加上布局样式
 

  
   .none
   {
  
      
   display
   : none
   ;
  
  
   }
  
  
   #sub
   {
  
      
   width
   : 600px
   ;
  
      
   position
   : absolute
   ;
  
      
   border
   : 1px solid #f7f7f7
   ;
  
      
   background
   : #f7f7f7
   ;
  
      
   box-shadow
   : 2px 0 5px 
   rgba
   (0, 0, 0, .3
   )
   ;
  
      
   left
   : 200px
   ;
  
      
   top
   : 0
   ;
  
      
   box-sizing
   : border-box
   ;
  
      
   margin
   : 0
   ;
  
      
   padding
   : 10px
   ;
  
  
   }
  
  
   .sub_content a
   {
  
      
   font-size
   : 12px
   ;
  
      
   color
   : #666
   ;
  
      
   text-decoration
   : none
  
  
   }
  
  
   .sub_content dd a
   {
  
      
   border-left
   : 1px solid #e0e0e0
   ;
  
      
   padding
   : 0 10px
   ;
  
      
   margin
   : 4px 0
   ;
  
  
   }
  
  
   .sub_content dl 
   {
  
      
   overflow
   : hidden
   ;
  
  
   }
  
  
   .sub_content dt
   {
  
      
   float
   : left
   ;
  
      
   width
   : 70px
   ;
  
      
   font-weight
   : bold
   ;
  
      
   clear
   : left
   ;
  
      
   position
   : relative
   ;
  
  
   }
  
  
   .sub_content dd
   {
  
      
   float
   : left
   ;
  
      
   margin-left
   : 5px
   ;
  
      
   border-top
   : 1px solid #eee
   ;
  
      
   margin-bottom
   : 5px
   ;
  
  
   }
  
  
   .sub_content dt i
   {
  
      
   width
   : 4px
   ;
  
      
   height
   : 14px
   ;
  
      
   font
   : 400 9px/14px consolas
   ;
  
      
   position
   : absolute
   ;
  
      
   right
   : 5px
   ;
  
      
   top
   : 5px
   ;
  
  
   }

 
  这里的sub定位就是绝对定位，这样实现贴合左边布局显示成功，这里的小括号使用了一个i标签，同时这个i标签,i相对于外层的dt进行了定位，同时这里设置的none是为了隐藏右边，会通过js动态控制添加的class，同时li下的active也是通过js动态添加。
 

 
  这里的js代码已经写了详细的注释，大家可以下源码，在本地自己打开看看
 

  
   $
   (document
   )
   .
   ready
   (
   function
   (
   )
   {
  
      
   var sub 
   = 
   $
   (
   '#sub'
   )
   ;       
   //jquey获取页面sub元素 sub元素为右侧子菜单的div
  
  
      
   var activeRow
   ;                
   //定义变量 鼠标动态放置的左侧menu行
  
      
   var activeMenu
   ;                
   //定义变量 右侧动态展示的子菜单
  
  
      
   var timer
   ;                        
   //设置变量  让鼠标移动放置菜单时 有一个延时
  
      
   var mouseInsub 
   = 
   false
   ;            
   //定于变量  鼠标是否在右侧子菜单上放置
  
  
      
   //这里通过监听鼠标是否在右侧子菜单设置 mouseInsub 是为true和false
  
  
       sub
   .
   on
   (
   'mouseenter'
   ,
   function
   (e
   )
   {
  
  
           mouseInsub 
   = 
   true
   ;
  
      
   }
   )
   .
   on
   (
   'mouseleave'
   ,
   function
   (e
   )
   {
  
  
           mouseInsub 
   = 
   false
   ;
  
      
   }
   )
  
  
  
      
   $
   (
   '#menu'
   )                           
   //menu是最外层的div，这里只要鼠标移至这个div下面就开始监听 并进行一系列控制
  
          
   .
   on
   (
   'mouseenter'
   ,
   function
   (e
   )
   {       
  
  
               sub
   .
   removeClass
   (
   'none'
   )
   ;     
   //鼠标进入menu时就移除sub最外层的隐藏控制，sub用了两层控制是否显示和隐藏，可在html中看到两个none
  
          
   }
   )
  
          
   .
   on
   (
   'mouseleave'
   ,
   function
   (e
   )
   {
  
  
               sub
   .
   addClass
   (
   'none'
   )
   ;        
   //鼠标移出menu添加none 隐藏sub
  
  
              
   //这里判断是否鼠标正放在某个菜单上，是的话移出已经放上去的添加的class效果，并设置activeRow为空
  
              
   if
   (activeRow
   )
   {
  
  
                   activeRow
   .
   removeClass
   (
   'active'
   )
   ;
  
  
                   activeRow 
   = 
   null
   ;
  
              
   }
  
  
              
   //同理这里判断是否放在子菜单上
  
              
   if
   (activeMenu
   )
   {
  
  
                   activeMenu
   .
   addClass
   (
   'none'
   )
   ;
  
  
                   activeMenu 
   = 
   null
   ;
  
              
   }
  
          
   }
   )
  
          
   //通过监听li的方式，使不必要每个li都写触发函数，这里监听li，在通过e找到当前鼠标所放的具体是哪个目标li
  
          
   .
   on
   (
   'mouseenter'
   ,
   'li'
   ,
   function
   (e
   )
   {
  
              
   //如果鼠标之前没有放在哪个菜单上执行if里面的操作
  
              
   if
   (
   !activeRow
   )
   {
  
  
                   activeRow 
   = 
   $
   (e
   .target
   )
   .
   addClass
   (
   'active'
   )
   ;     
   //给activeRow赋值为当前鼠标放上去的菜单
  
  
                   activeMenu 
   = 
   $
   (
   '#' 
   + activeRow
   .
   data
   (
   'id'
   )
   )
   ;    
   //这里取到html页面上设置data-id的值，对应sub下的id，可看html
  
  
                   activeMenu
   .
   removeClass
   (
   'none'
   )
   ;
  
                  
   return          
   //因为鼠标之前没有放在哪个菜单栏上，添加效果后，直接返回，不需要进行下面操作
  
              
   }
  
              
   //这里的timer添加判断，是为了只执行鼠标放上菜单的最后一次操作，不然划过几个菜单到目标菜单，之前的子菜单都会闪现
  
              
   //这里添加后clear定时函数，让之前划过的不在执行，只执行最后停留的那个方法
  
              
   if
   (timer
   )
   {
  
                  
   clearTimeout
   (timer
   )
   ;    
  
              
   }
  
  
              
   //定时函数，让鼠标放上过300毫秒在出现效果
  
  
               timer 
   = 
   setTimeout
   (
   function
   (
   )
   {
  
                  
   //这里判断鼠标是否爱子菜单，右侧菜单上，如果在，直接return出去，不用执行其他操作了，不然则继续
  
                  
   if
   (mouseInsub
   )
   {
  
                      
   return
  
                  
   }
  
                  
   //如果鼠标在移动来之前放在其他菜单上，需要清除这些，加一个if判断，
  
                  
   //因为不加判断直接写在外面，因为settime的原因可能报错，大家可以试试，但是不影响使用
  
                  
   if
   (activeRow
   )
   {
  
  
                       activeRow
   .
   removeClass
   (
   'active'
   )
   ;
  
  
                       activeMenu
   .
   addClass
   (
   'none'
   )
   ;    
  
                  
   }    
  
  
                  
   //重新赋值，显示菜单的效果
  
  
                   activeRow 
   = 
   $
   (e
   .target
   )
   ;
  
  
                   activeRow
   .
   addClass
   (
   'active'
   )
   ;
  
  
  
                   activeMenu 
   = 
   $
   (
   '#' 
   + activeRow
   .
   data
   (
   'id'
   )
   )
   ;
  
  
                   activeMenu
   .
   removeClass
   (
   'none'
   )
   ;
  
  
                  
   //最后将定时器设置为空
  
  
                   timer 
   = 
   null
   ;
  
              
   }
   ,
   300
   )
  
  
          
   }
   )
  
  
   }
   )