jquery侧边栏菜单插件

最新推荐文章于 2026-05-21 16:30:02 发布

原创最新推荐文章于 2026-05-21 16:30:02 发布 · 2.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #html #菜单 #左侧菜单 #左侧导航

html类点专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一款基于jQuery的侧边栏菜单插件，提供了下载链接及HTML、JS、CSS代码示例，帮助用户快速构建网页左侧导航菜单。

下载地址：https://github.com/ybx13579/left-menu

效果图：侧边栏效果图

html:

<div class="nav">
            <ul>
                <li class="nav-item">
                    <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>
                    <ul>
                        <li><a href="javascript:;"><span>网站设置</span></a></li>
                        <li><a href="javascript:;"><span>友情链接</span></a></li>
                        <li><a href="javascript:;"><span>分类管理</span></a></li>
                        <li><a href="javascript:;"><span>系统日志</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>
                    <ul>
                        <li><a href="javascript:;"><span>站内新闻</span></a></li>
                        <li><a href="javascript:;"><span>站内公告</span></a></li>
                        <li><a href="javascript:;"><span>登录日志</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span></a>

                </li>
            </ul>
        </div>

js:

$(function(){
    // nav收缩展开
    $('.nav-item>a').on('click', function () {
        $(".nav ul ul li").removeClass('active');
        $('.nav-item').children('ul').slideUp(300);
        if ($(this).next().css('display') == "none") {
            //展开
            $('.nav-item').children('ul').slideUp(300);
            $(this).next('ul').slideDown(300);
            $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
        } else {
            //收缩
            $(this).next('ul').slideUp(300);
            $('.nav-item.nav-show').removeClass('nav-show');
        }
    });
});

css:

/* nav */
.nav{width: 220px;height: 100%;background: #263238;transition: all .3s; position: absolute;top:0;left: 0;}
.nav a{display: block;overflow: hidden;padding-left: 20px;line-height: 46px;max-height: 46px;color: #ABB1B7;transition: all .3s;}
.nav a span{margin-left: 30px;}
.nav-item{position: relative;}
.nav-item.nav-show{border-bottom: none;}
.nav-item ul{display: none;background: rgba(0,0,0,.1);}
.nav-item.nav-show ul{display: block;}
.nav-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 46px;background: #34A0CE;opacity:0;transition: all .3s;}
.nav .nav-icon{font-size: 20px;position: absolute;margin-left:-1px;}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after{content: "\e62b";}
.icon_2::after{content: "\e669";}
.icon_3::after{content: "\e61d";}
/*---------------------*/
.nav-more{float:right;margin-right: 20px;font-size: 12px;transition: transform .3s;}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.nav-more::after{content: "\e621";}
/*---------------------*/
.nav-show .nav-more{transform:rotate(90deg);}
.nav-show,.nav-item>a:hover{color: #FFF;background:rgba(0,0,0,.1);}
.nav-show>a:before,.nav-item>a:hover:before{opacity:1;}
.nav-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}