基于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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
angularjs基础教程
Dec 25 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP生成静态页面详解
2006/12/05 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php实现微信发红包
2015/12/05 PHP
关于php中一些字符串总结
2016/05/05 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
python基础教程之Hello World!
2014/08/29 Python
python去除文件中重复的行实例
2018/06/29 Python
pandas 选择某几列的方法
2018/07/03 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python 5个实用的技巧
2020/09/27 Python
Django多个app urls配置代码实例
2020/11/26 Python
管理科学大学生求职信
2013/11/13 职场文书
关于青春的演讲稿
2014/05/05 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
网聊搭讪开场白
2015/05/28 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript