基于vue.js实现侧边菜单栏

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

下面就说一下实现的过程还是比较简单的首先导入一下需要的文件

链接rel='样式表'类型=' text/CSS ' href=' bootstrap/CSS/bootstrap。量滴CSS ' rel='外部nofollow '链接rel='样式表'类型=' text/CSS ' href=' CSS/font-真棒。量滴CSS ' rel='外部nofollow '链接rel='样式表'类型=' text/CSS ' href=' CSS/nav。CSS ' rel='外部nofollow '脚本类型=' text/JavaScript ' src=' http 3333接下来就是我的超文本标记语言

nav=' sider-bar small-bar ' ul Li=' home _ BTN ' a href=' JavaScript :'id=' full-bar ' I class=' fa-navicon nav _ icon '/I/a/Li阿利href=' JavaScript : ' I span=' fa fa-home nav _ icon '/I span=' nav-text '主页/span/a/Li Li class=' drop-show ' a href=' JavaScript :'“导航图标”系统用户。' html '用户管理/a/li lia href='buttons.html '权限设置/a/li lia href='buttons.html '操作日志/a/li lia href='buttons.html '设备运行日志/a/Li/ul/Li Li class=' drop-show ' a href=' JavaScript :'I span=' fa-fa-check-square-o nav _ icon '/I span=' nav-text '防区I/span/a ul class='下拉列表' lia href='按钮。' html '防区管理/a/Li/ul/Li Li class=' drop-show ' a href=' JavaScript :'I span=' fa fa-info-circle nav _ icon '/I span=' nav-text '警报I/span/a ul class='下拉列表' lia href='按钮。' html '历史报警曲线/a/li lia href='buttons.html '报表统计/a/li lia href='buttons.html '警情处理/a/li /ul /li阿利设备/span /a /li /ul/nav然后是钢性铸铁

* { margin : 0；padd : 0；} body { font-family :微软雅黑；font-size :14 px}li、ol、ul {列表式：无；} a { text-decoration : none轮廓： 0；}a:hover，a : link { text-decoration : none；}.侧杆{ float:left宽度宽度：220像素高度：100%;z指数：999;飞越：隐藏；background:rgba(0，0，0，0.7)；}.侧杆ul{宽度：100%;float:left} .侧面杆ul li{宽度：100%;float : left font-size :14 px；}.阿利河畔酒吧{ padding:8px 10px显示：块；color: # fff}。李酒吧。home _ BTN {背景： # 282 2D；文本对齐：居中}。李酒吧。home _ BTN :悬停{背景： # 282 2D } .sider-bar ul阿利：悬停{背景： # 0099 CC}.sider-bar ul linav _ icon { font-size :18 px；margin:0 5px}。小棒{ width:50px}。小杠李{文字对齐：居中；}.阿利小酒吧；文本对齐：居中}。小条形li span{ display:none} .小酒吧nav _ icon { font-size :24 px边距：0 } ul。下拉列表{显示：无；边距-左侧：30像素；宽度宽度：190px}。fa-angle-right { float : right } body，html { height :100%；}最后也就是我的射流研究…

$(文档)。就绪（函数(){ //展开主菜单$(' #全条')。单击(函数(){ $(').侧杆)。toggleClass('小小节');if($(').侧杆)。hasClass(')小条形图'){ $('。下拉列表')。向上滑动()；} });$('.拖放').单击(function(){ if(！$('.侧杆)。有类('小条'){ $(this).孩子们。下拉列表')。slide Toggle()；$(这个)。兄弟姐妹('里').孩子们。下拉列表')。向上滑动()；} });});本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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