基于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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
js一组验证函数
Dec 20 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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 加密与解密的斗争
2009/04/17 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php接口技术实例详解
2016/12/07 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python操作redis数据库的三种方法
2020/09/10 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
社会调查研究计划书
2014/05/01 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
文明旅游倡议书
2015/04/28 职场文书
单位同意报考证明
2015/06/17 职场文书
企业培训简报范文
2015/07/20 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书