jQuery电商网站左侧商品二级分类图文导航菜单代码特效

92建站   2020-07-24   收藏本文
电商二级分类导航

特效编号:C27

编码格式:UTF8

布局形式:响应式

下载说明:百度盘不限速方法

这款jQuery电商网站左侧商品二级分类图文导航菜单,左侧导航悬停显示热门分类和商家品牌logo布局样式,支持图片和文字格式。

使用方法:

<script type="text/javascript">
$(function() {
    var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height()
    //左侧导航动画
    $('.sec-mainNav li').on('mouseenter', function() {
        var $height = $(this).offset().top + $(this).find('.menu-panel').outerHeight();
        $(this).find('.menu-panel').show();
        if($height - $top >= 0) {
            $(this).find('.menu-panel').css({
                top: -($height - $top) + 'px'
            })
        }
    });
    $('.sec-mainNav li').on('mouseleave', function() {
        $(this).find('.menu-panel').hide();
    });
});
</script>

效果截图:

电商二级分类导航

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开