基于vue.js实现侧边菜单栏


Posted in Javascript onMarch 20, 2017

侧边菜单栏应该是很多项目里必不可少的 自己手写了一个
下面是效果图

 基于vue.js实现侧边菜单栏

下面就说一下实现的过程 还是比较简单的
首先导入一下需要的文件

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/nav.css" rel="external nofollow" >
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

接下来就是我的html

<nav class="sider-bar small-bar">
 <ul>
  <li class="home_btn">
   <a href="javascript:;" id="full-bar" >
    <i class="fa fa-navicon nav_icon"></i>
   </a>
  </li>
  <li>
   <a href="javascript:;">
    <i class="fa fa-home nav_icon"></i>
    <span class="nav-text">主页</span>
   </a>
  </li>
  <li class="drop-show">
   <a href="javascript:;" >
    <i class="fa fa-cogs nav_icon"></i>
    <span class="nav-text">系统<i class="fa fa-angle-right nav_icon "></i></span>

   </a>
   <ul class="drop-list">
    <li><a href="user.html">用户管理</a></li>
    <li><a href="buttons.html">权限设置</a></li>
    <li><a href="buttons.html">操作日志</a></li>
    <li><a href="buttons.html">设备运行日志</a></li>
   </ul>
  </li>
  <li class="drop-show">
   <a href="javascript:;">
    <i class="fa fa-check-square-o nav_icon"></i>
    <span class="nav-text">防区 <i class="fa fa-angle-right nav_icon "></i></span>
   </a>
   <ul class="drop-list">
    <li><a href="buttons.html">防区管理</a></li>
   </ul>
  </li>
  <li class="drop-show">
   <a href="javascript:;">
    <i class="fa fa-info-circle nav_icon"></i>
    <span class="nav-text">警报 <i class="fa fa-angle-right nav_icon "></i></span>
   </a>
   <ul class="drop-list">
    <li><a href="buttons.html">历史报警曲线</a></li>
    <li><a href="buttons.html">报表统计</a></li>
    <li><a href="buttons.html">警情处理</a></li>
   </ul>
  </li>
  <li>
   <a href="#">
    <i class="fa fa-dashboard (alias) nav_icon"></i>
    <span class="nav-text">设备</span>
   </a>
  </li>
 </ul>
</nav>

然后是css

* {
 margin: 0;
 padding: 0;
}
body {
 font-family:Microsoft YaHei;
 font-size:14px;
}
li,ol,ul {
 list-style: none;
}
a {
 text-decoration: none;
 outline: 0;
}
a:hover,a:link{
 text-decoration:none;
}
.sider-bar{ 
 float:left;
 width:220px; 
 height:100%; 
 z-index:999;
 overflow:hidden;
 background:rgba(0,0,0,0.7); 
}
.sider-bar ul{ 
 width:100%; 
 float:left
}
.sider-bar ul li{ 
 width:100%; 
 float:left; 
 font-size:14px;
}
.sider-bar ul li a{ 
 padding:8px 10px;
 display:block;
 color:#fff; 
}
.sider-bar ul li.home_btn{ 
 background:#282D2D; 
 text-align:center
}
.sider-bar ul li.home_btn:hover{ 
 background:#282D2D
}
.sider-bar ul li a:hover{ 
 background:#0099CC;
}
.sider-bar ul li .nav_icon{ 
 font-size:18px; 
 margin:0 5px;
}
.small-bar{
 width:50px;
}
.small-bar li { 
 text-align:center;
}
.small-bar li a{
 display:block; 
 text-align:center
}
.small-bar li span{ 
 display:none
}
.small-bar ul li .nav_icon{ 
 font-size:24px; 
 margin:0
}
ul.drop-list{ 
 display:none; 
 margin-left:30px; 
 width:190px;
}
.fa-angle-right{ 
 float:right
}
body, html {
 height:100%;
}

最后也就是我的js

$(document).ready(function(){
 //展开主菜单
 $("#full-bar").click(function(){
  $(".sider-bar").toggleClass("small-bar");
  if($(".sider-bar").hasClass('small-bar')){
   $(".drop-list").slideUp();
  }
 });
 $(".drop-show").click(function(){
  if(!$(".sider-bar").hasClass('small-bar')){
   $(this).children(".drop-list").slideToggle();
   $(this).siblings('li').children(".drop-list").slideUp();
  }
 });
});

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
javascript的内存管理详解
Aug 07 Javascript
javascript打印输出json实例
Nov 11 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
精通JavaScript的this关键字
May 28 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
vue.js指令v-model使用方法
Mar 20 #Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 #Javascript
vue.js中指令Directives详解
Mar 20 #Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 #Javascript
windows下vue.js开发环境搭建教程
Mar 20 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
python线程池的实现实例
2013/11/18 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python笔记之工厂模式
2019/11/20 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
为什么python比较流行
2020/06/19 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
2014年小学元旦活动方案
2014/02/12 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
就业证明函
2015/06/17 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python