首页 / 组件 / 侧边导航菜单组件

侧边导航菜单组件

侧边导航菜单是一种垂直排列的导航组件，通常用于展示网站的主要导航结构，适合用于管理后台、控制面板等场景，可以展示多层级的导航结构，提高导航效率。

导航组件 布局组件

基本用法

最基本的侧边导航菜单，包含图标和文本，点击可以切换选中状态。

控制面板
首页 用户管理 内容管理 数据统计 系统设置
HTML 
<div class="side-nav">
    <div class="side-nav-header">
        <i class="mdi mdi-view-dashboard"></i>
        <span>控制面板</span>
    </div>
    <div class="side-nav-menu">
        <a href="javascript:void(0)" class="side-nav-item active">
            <i class="mdi mdi-home"></i>
            <span>首页</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-account"></i>
            <span>用户管理</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-file-document"></i>
            <span>内容管理</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-chart-bar"></i>
            <span>数据统计</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-cog"></i>
            <span>系统设置</span>
        </a>
    </div>
</div>

多级菜单

支持多级菜单结构，可以展示复杂的导航层次。

多级导航菜单
首页
用户中心
用户列表 角色管理 权限设置
内容管理
文章管理 分类管理 标签管理
数据统计 系统设置
HTML 
<div class="side-nav">
    <div class="side-nav-header">
        <i class="mdi mdi-view-dashboard"></i>
        <span>多级导航菜单</span>
    </div>
    <div class="side-nav-menu">
        <a href="javascript:void(0)" class="side-nav-item active">
            <i class="mdi mdi-home"></i>
            <span>首页</span>
        </a>
        <div class="side-nav-item expanded">
            <i class="mdi mdi-account-group"></i>
            <span>用户中心</span>
            <i class="mdi mdi-chevron-right arrow"></i>
        </div>
        <div class="side-nav-submenu">
            <a href="javascript:void(0)" class="side-nav-subitem active">用户列表</a>
            <a href="javascript:void(0)" class="side-nav-subitem">角色管理</a>
            <a href="javascript:void(0)" class="side-nav-subitem">权限设置</a>
        </div>
        <div class="side-nav-item">
            <i class="mdi mdi-file-document"></i>
            <span>内容管理</span>
            <i class="mdi mdi-chevron-right arrow"></i>
        </div>
        <div class="side-nav-submenu">
            <a href="javascript:void(0)" class="side-nav-subitem">文章管理</a>
            <a href="javascript:void(0)" class="side-nav-subitem">分类管理</a>
            <a href="javascript:void(0)" class="side-nav-subitem">标签管理</a>
        </div>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-chart-bar"></i>
            <span>数据统计</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-cog"></i>
            <span>系统设置</span>
        </a>
    </div>
</div>

可折叠的侧边栏

支持折叠功能的侧边导航，可以节省空间，适用于响应式布局。

HTML 
<div class="side-nav" id="collapsible-nav">
    <div class="side-nav-header">
        <i class="mdi mdi-view-dashboard"></i>
        <span>可折叠导航</span>
        <button class="toggle-collapse" style="margin-left: auto; background: none; border: none; color: white; cursor: pointer;">
            <i class="mdi mdi-chevron-left"></i>
        </button>
    </div>
    <div class="side-nav-menu">
        <a href="javascript:void(0)" class="side-nav-item active">
            <i class="mdi mdi-home"></i>
            <span>首页</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-account"></i>
            <span>用户管理</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-file-document"></i>
            <span>内容管理</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-chart-bar"></i>
            <span>数据统计</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-cog"></i>
            <span>系统设置</span>
        </a>
    </div>
</div>

移动端自适应导航

针对移动设备优化的侧边导航菜单，支持触摸滑动手势和响应式布局。

在移动设备上查看时，点击右下角的菜单按钮打开导航

支持从屏幕左侧向右滑动打开菜单，从右向左滑动关闭菜单

HTML 
<!-- 移动端侧边导航 -->
<div class="side-nav" id="mobile-nav">
    <div class="side-nav-header">
        <i class="mdi mdi-view-dashboard"></i>
        <span>移动端导航</span>
    </div>
    <div class="side-nav-menu">
        <a href="javascript:void(0)" class="side-nav-item active">
            <i class="mdi mdi-home"></i>
            <span>首页</span>
        </a>
        <div class="side-nav-item">
            <i class="mdi mdi-account-group"></i>
            <span>用户中心</span>
            <i class="mdi mdi-chevron-right arrow"></i>
        </div>
        <div class="side-nav-submenu">
            <a href="javascript:void(0)" class="side-nav-subitem">用户列表</a>
            <a href="javascript:void(0)" class="side-nav-subitem">角色管理</a>
        </div>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-file-document"></i>
            <span>内容管理</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-bell"></i>
            <span>消息通知</span>
        </a>
        <a href="javascript:void(0)" class="side-nav-item">
            <i class="mdi mdi-cog"></i>
            <span>系统设置</span>
        </a>
    </div>
</div>

<!-- 移动端触发按钮和遮罩 -->
<button class="mobile-toggle" id="mobile-nav-toggle">
    <i class="mdi mdi-menu"></i>
</button>
<div class="mobile-overlay" id="mobile-overlay"></div>

<!-- 移动端导航JavaScript -->
<script>
    // 初始化移动端导航
    function initMobileNav() {
        const mobileToggle = document.getElementById('mobile-nav-toggle');
        const mobileOverlay = document.getElementById('mobile-overlay');
        const sideNav = document.getElementById('mobile-nav');
        
        // 移动端菜单切换
        mobileToggle.addEventListener('click', function() {
            sideNav.classList.add('mobile-active');
            mobileOverlay.style.display = 'block';
            setTimeout(() => {
                mobileOverlay.classList.add('active');
            }, 10);
        });
        
        // 点击遮罩关闭菜单
        mobileOverlay.addEventListener('click', function() {
            sideNav.classList.remove('mobile-active');
            this.classList.remove('active');
            setTimeout(() => {
                this.style.display = 'none';
            }, 300);
        });
        
        // 添加触摸滑动支持
        let touchStartX = 0;
        let touchEndX = 0;
        
        document.addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        }, false);
        
        document.addEventListener('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, false);
        
        function handleSwipe() {
            // 从左向右滑动（打开菜单）
            if (touchEndX - touchStartX > 100) {
                sideNav.classList.add('mobile-active');
                mobileOverlay.style.display = 'block';
                setTimeout(() => {
                    mobileOverlay.classList.add('active');
                }, 10);
            }
            // 从右向左滑动（关闭菜单）
            if (touchStartX - touchEndX > 100) {
                if (sideNav.classList.contains('mobile-active')) {
                    sideNav.classList.remove('mobile-active');
                    mobileOverlay.classList.remove('active');
                    setTimeout(() => {
                        mobileOverlay.style.display = 'none';
                    }, 300);
                }
            }
        }
    }
</script>

API

侧边导航菜单组件的属性和类。

CSS 类

类名 描述 默认值
side-nav 侧边导航菜单容器 -
side-nav-header 侧边导航菜单头部 -
side-nav-menu 侧边导航菜单内容区域 -
side-nav-item 侧边导航菜单的单个项目 -
side-nav-item.active 激活状态的菜单项 -
side-nav-item.expanded 展开状态的菜单项 -
side-nav-submenu 子菜单容器 -
side-nav-subitem 子菜单项 -
arrow 展开/收起箭头图标 -
side-nav.collapsed 折叠状态的侧边栏 -
side-nav.mobile-active 移动端激活状态的侧边栏 -
mobile-toggle 移动端菜单触发按钮 -
mobile-overlay 移动端菜单遮罩层 -
mobile-overlay.active 激活状态的遮罩层 -

方法

方法名 描述 参数
toggleSubmenu(element) 切换子菜单的展开/收起状态 element: 需要切换的菜单项元素
toggleCollapse(element) 切换侧边栏的折叠/展开状态 element: 侧边栏元素
setActive(element) 设置菜单项为激活状态 element: 需要激活的菜单项元素
showMobileNav(element) 显示移动端侧边导航 element: 侧边栏元素
hideMobileNav(element) 隐藏移动端侧边导航 element: 侧边栏元素
handleSwipe() 处理触摸滑动手势 无

移动端适配

侧边导航菜单在移动端的适配策略：

  • 在小屏幕设备上，侧边导航菜单会变为固定定位，从屏幕左侧滑出
  • 提供右下角的浮动按钮，点击可以打开侧边导航
  • 支持触摸滑动手势，从屏幕左侧向右滑动打开菜单，从右向左滑动关闭菜单
  • 打开菜单时会显示半透明遮罩层，点击遮罩层可以关闭菜单
  • 菜单项的触摸区域增大，提升移动端操作体验
  • 折叠状态下的菜单在移动端会完全隐藏，节省屏幕空间