基于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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Vue点击切换颜色的方法
Sep 13 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
vue实现简单加法计算器
Oct 22 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
微信小程序 参数传递实例代码
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
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python flask中动态URL规则详解
2019/11/22 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
捐款倡议书范文
2014/02/02 职场文书
道德之星事迹材料
2014/05/03 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
公司授权委托书范本
2014/09/18 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
MySQL中order by的使用详情
2021/11/17 MySQL