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組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持萬仟網。
總結
以上是生活随笔為你收集整理的vue菜单点击html,基于vue.js实现侧边菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flask 上传excel 前端_fla
- 下一篇： vue-router路由、mixin混入