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实现侧边菜单栏相关推荐
- vue时间天气插件_基于vue.js 2.0的百度天气应用 – vue-weather
vue-weather 基于vue.js 2.0的百度天气应用. 说明 初学vue,在看完一个简单的视频教程和走两遍完官方文档之后仍然感觉云里雾里,知其然不知其所以然(虽然现在好了点).请教了高手之后 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 基于vue前端聊天插件_基于Vue聊天的实现
基于vue前端聊天插件 基本视频聊天 (basic-vue-chat) Easy to use VueJS chat. 易于使用的VueJS聊天. 安装 (Installation) You can ...
- vue 音乐盒app_VBox 一款基于vue开发的音乐盒 序章
自己基于vue写了一个 Mplayer, 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶 ...
- vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mous ...
- vue连线 插件_基于Vue的任务节点图绘制插件(vue-task-node)
简介: vue-task-node 是一个基于Vue的任务节点图绘制插件(vue-task-node is a Vue based task node mapping plug-in) 此篇博客会随插 ...
- 【jQuery】jQuery与vue实现点击下载图片 以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
- vue连线 插件_基于vue的网页标尺辅助线工具(vue-ruler-tool)
原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 标尺辅助线.gif vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件,觉得在现在的一个项目中能用的上, ...
- vue项目的停止_基于Vue项目开发中遇到的坑及终结
之前一直在公司忙项目,忙项目的,好歹是发布了1.0版本.终于是有时间写一个总结了. 话说我就一个实习生一进来就要做项目核心,真的有点受宠若惊,还好项目是1.0版本,先实现部分功能,访问量也不大,加上一 ...
最新文章
- javascript中作用域,优先级等等问题, 求助中。。。。。。。。
- 逻辑设计中复位的稳妥处理方法?
- centos7 df 命令卡死
- 浙江金华暂时停用“智能头箍”,专家:监测学生脑电违反伦理
- Nginx的虚拟主机配置
- 计算机usb2.0失效,Win10电脑USB2.0-CRW没有驱动程序的解决方法
- 解决 :IDEA 修改代码后 Local Changes 中没有提示待提交文件,代码自动提交了
- php h5微信公众号支付接口,微信公众号H5支付接口调用方法
- ibatis 存储过程 结果集 map_「大数据」(七十五)Spark之弹性分布式数据集
- 《Python学习笔记》——南溪的python编程笔记
- 自动驾驶算法-滤波器系列(一)——详解卡尔曼滤波原理
- c语言中字符名词解释,C语言名词解释哪里有名词的解释 比如 什么型 什么型的...
- 日本定了一个小目标,在2030年让五分之一的汽车实现自动驾驶
- paip.提升用户体验---c++ gcc 命令语法着色搭配方案
- object、param标签及页面显示PDF文件的方法
- 【备忘录】UTM坐标系与经纬度转换 MATLAB C语言
- envoy中的iptable流量劫持
- 加权平均数的例子_加权平均数定义和实例
- Wp和Win8平台在实际开发中的对比
- C语言考试题库之填空题