vue菜单点击html,基于vue.js实现侧边菜单栏

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

下面是效果图

下面就说一下实现的过程 还是比较简单的

首先导入一下需要的文件

接下来就是我的html

• 主页

• 系统

  • 用户管理
  • 权限设置
  • 操作日志
  • 设备运行日志

• 防区

  • 防区管理

• 警报

  • 历史报警曲线
  • 报表统计
  • 警情处理

• 设备

然后是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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。