Bootstrap打造一个左侧折叠菜单的系统模板(二)


Posted in Javascript onMay 17, 2016

在上一篇文章给大家介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一),具体内容介绍可以点击了解详情。

1. 关于上一篇文章BUG

上一篇文章中有几位朋友提出的问题和BUG. 我简单的说一下。

1>. IE版本的支持?

我写的这些只是测试火狐谷歌浏览。在IE8+下可以添加代码以实现兼容。

<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

如果是要兼容IE6这个超级浏览器,请看: http://www.bootcss.com/p/bsie/

2>. badge 的使用,谢谢 baidixing 的提示

这个呢,看大家的使用习惯了。

3>. 示例代码的二级菜单下面的字体在火狐和google上显示的字体大小不一致,谢谢 baidixing 的指出。

由于我是在谷歌浏览上调试的,chrome默认不支持 12px以下的字体.

2. 左侧折叠菜单 完善版

Bootstrap打造一个左侧折叠菜单的系统模板(二)

感兴趣的朋友可以点击查看效果演示:http://static.demo.ruyo.net/Bootstrap_left_menu.html2.html

1>. 箭头跟随菜单的展开合并而变化

<a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
<i class="glyphicon glyphicon-cog"></i>
系统管理
<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
</a>
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li class="active"><a href="#"><i class="glyphicon glyphicon-user"></i> 用户管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-th-list"></i> 菜单管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i> 角色管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-edit"></i> 修改密码</a></li>
<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i> 日志查看</a></li>
</ul> 
/*控制菜单箭头*/
.nav-header.collapsed > span.glyphicon-chevron-toggle:before {
content: "\e114";
}
.nav-header > span.glyphicon-chevron-toggle:before {
content: "\e113";
}

2>. 二级菜单 选中样式

.secondmenu a {
font-size: 12px;
color: #4A515B;
text-align: center;
}
.secondmenu li.active {
background-color: #eee;
border-color: #428bca;
}

三水点靠木推荐bootstrap相关专题:

BootStrap组件操作技巧

BootStrap相关知识汇总

以上所述是小编给大家介绍的Bootstrap打造一个左侧折叠菜单的系统模板(二)的相关知识,希望对大家有所帮助,如果大家任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 #Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 #Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 #Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 #Javascript
js字符串截取函数slice、substring和substr的比较
May 17 #Javascript
javascript Promise简单学习使用方法小结
May 17 #Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 #Javascript
You might like
php,ajax实现分页
2008/03/27 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python: 传递列表副本方式
2019/12/19 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
教师自我反思材料
2014/02/14 职场文书
大学生求职计划书
2014/04/30 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
普通员工辞职信范文
2015/05/12 职场文书
国博复兴之路观后感
2015/06/02 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS