请选择 进入手机版 | 继续访问电脑版

jQuery电商网站左侧商品分类导航菜单代码

[复制链接]
查看1230 | 回复0 | 2021-2-22 11:49 | 显示全部楼层 |阅读模式

jQuery电商网站左侧商品分类导航菜单代码

jQuery电商网站左侧商品分类导航菜单代码


jQuery电商网站左侧商品分类导航菜单代码,一款购物商城常用的网站左侧导航悬停显示更多分类、热门分类和商家品牌logo布局样式

  1. js代码

  2. <script type="text/javascript">
  3. $(function() {
  4.         var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height()
  5.         //左侧导航动画
  6.         $('.sec-mainNav li').on('mouseenter', function() {
  7.                 var $height = $(this).offset().top + $(this).find('.menu-panel').outerHeight();
  8.                 $(this).find('.menu-panel').show();
  9.                 if($height - $top >= 0) {
  10.                         $(this).find('.menu-panel').css({
  11.                                 top: -($height - $top) + 'px'
  12.                         })
  13.                 }
  14.         });
  15.         $('.sec-mainNav li').on('mouseleave', function() {
  16.                 $(this).find('.menu-panel').hide();
  17.         });
  18. });
  19. </script>
复制代码
jQuery电商网站左侧商品分类导航菜单代码.zip (58.37 KB, 下载次数: 364)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
436
贡献
4
丢币
318
主题
163
回帖
1
注册时间
2021-2-21
最后登录
2023-3-12