首页 | 常用工具 | 一周排行榜 | 一个月排行榜 | 半年排行榜 | 一年排行榜
当前位置：JS特效 » 菜单导航 » jquery带商品分类侧边栏列表的商城导航菜单
jquery带商品分类侧边栏列表的商城导航菜单
如果您觉得内容不错，请分享：
标签： 导航菜单兼容ie8大型菜单商城菜单

插件介绍

这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城导航菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。

浏览器兼容性

浏览器兼容性
时间：2021-07-24 阅读：51
查看演示 下载插件
简要教程

这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。

使用方法

在页面中引入样式文件style.css和jquery.min.js文件。
HTML结构

该商城导航菜单的HTML结构如下：

JavaScript

在页面DOM元素加载完毕之后，通过下面的方法来初始化该导航菜单：

(function(){
  var $subblock = $(".subpage"), $head=$subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul.find("li"), inter=false;
  
  $head.click(function(e){
    e.stopPropagation();
    if(!inter){
      $ul.show();
    }else{
      $ul.hide();
    }
    inter=!inter;
  });
  
  $ul.click(function(event){
    event.stopPropagation();
  });
  
  $(document).click(function(){
    $ul.hide();
    inter=!inter;
  });

  $lis.hover(function(){
    if(!$(this).hasClass('nochild')){
      $(this).addClass("prosahover");
      $(this).find(".prosmore").removeClass('hide');
    }
  },function(){
    if(!$(this).hasClass('nochild')){
      if($(this).hasClass("prosahover")){
        $(this).removeClass("prosahover");
      }
      $(this).find(".prosmore").addClass('hide');
    }
  });
  
})();
上一篇： css3 transform属性制作6种隐藏的侧边导航菜单动画效果
下一篇： Material Design风格下拉菜单jquery插件

相关插件

jquery滑动侧边栏插件jSide
jquery滑动侧边栏插件jSide
jQuery和CSS3滑动展开菜单按钮插件
jQuery和CSS3滑动展开菜单按钮插件
基于CSS Grid的全屏多网格菜单布局特效
基于CSS Grid的全屏多网格菜单布局特效
js和CSS3漂亮的手风琴菜单特效
js和CSS3漂亮的手风琴菜单特效
兼容ie8的jquery圆形弹出按钮菜单插件
兼容ie8的jquery圆形弹出按钮菜单插件
适合移动手机的jQuery多级侧边栏菜单插件
适合移动手机的jQuery多级侧边栏菜单插件
js带模糊效果的隐藏滑动侧边栏插件
js带模糊效果的隐藏滑动侧边栏插件
bootstrap4滑动侧边栏特效
bootstrap4滑动侧边栏特效
Top