jQuery黑色左侧边导航菜单(可折叠可缩进滑出)

技术频道 - html技术

jQuery黑色左侧边导航菜单(可折叠可缩进滑出)

作者:admin 时间:2023-5-12 19:10:28 浏览:

前面介绍过一款layui框架实现的可折叠侧栏导航菜单，本文介绍的侧栏导航可以说是前面介绍的升级，因为它多了一些特色，比如增加了图标字体，画面观感更好了，此外，最主要的是它还可以缩进滑出。

效果图

jQuery黑色左侧边导航菜单(可折叠可缩进滑出)

demo download

示例介绍

本示例由CSS3+jQuery实现，另外用到了图标字体iconfont。

点击主菜单时，打开或折叠二级菜单。
打开二级菜单时，其父菜单项右边的小箭头由向右转为向下。
关闭二级菜单时，其父菜单项右边的小箭头由向下转为向右。
点击左上角四横图标，导航菜单会缩向左侧（最后只显示各菜单项的图标）或从左侧滑出。
菜单消失后，鼠标移到图标上时，其右边显示该菜单项的二级菜单。

HTML代码

下面是示例的HTML代码结构。

<div class="nav">
  <div class="nav-top">
    <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="statics/images/mini.png"></div>
  </div>
  <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><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>
  </ul>
</div>

div标签是导航的盒子，div里面第一层ul标签是导航菜单的容器，其子元素li标签是主菜单项目列举。

每个主菜单项目的li标签，里面都可以嵌入一个ul标签，这是一个二级菜单的容器，而这个ul标签里的li元素，就是二级菜单列举项。

CSS

本示例导航的CSS样式代码不多，下面分析下主要的样式。

.nav 设置导航盒子的宽度、高度、背景等样式。

.nav {
  width: 220px;
  height: 100%;
  background: #263238;
  transition: all .3s;
}

这里用了一个transition属性，其值是 all .3s; 。transition 属性用于在特定时间段内改变 CSS 属性的值，例如宽度、高度、不透明度和变换。参阅 css transition 属性。

.nav-item 设置导航主菜单项的位置等样式。

.nav-item {
  position: relative;
}
li {
  list-style: none;
}

菜单名称前面的i标签，是一个图标字体的标签，其属性值为 my-icon nav-icon icon_1 。

.icon_1::after 是图标字体的伪元素。

.nav-icon 设置位置等样式。

.my-icon 设置字体样式。

.icon_1::after {
  content: "\e62b";
}
.nav .nav-icon {
  font-size: 20px;
  position: absolute;
  margin-left: -1px;
}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

本示例CSS代码比较简单易懂，不过需要引用iconfont图标字体。

<link rel="stylesheet" type="text/css" href="statics/font/iconfont.css">

iconfont图标字体有一些关联文件。

请放心，这些文件都在源码包里，示例引用的文件都是本地的而不是使用公共库文件。

你可能需要在你的web服务器进行相关配置，以支持该图标字体。可参阅我写的几篇文章。

JavaScript

本示例需要使用jQuery编程，以实现鼠标点击事件的交互功能。

$(function(){
    // nav收缩展开
    $('.nav-item>a').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            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');
            }
        }
    });
    //nav-mini切换
    $('#mini').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            $('.nav-item.nav-show').removeClass('nav-show');
            $('.nav-item').children('ul').removeAttr('style');
            $('.nav').addClass('nav-mini');
        }else{
            $('.nav').removeClass('nav-mini');
        }
    });
});