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 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
layui自定义ajax左侧三级菜单
Jul 26 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
简单实现php上传文件功能
2017/09/21 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
js实现时钟定时器
2020/03/26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python对象及面向对象技术详解
2016/07/19 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
人事助理自荐信
2014/02/02 职场文书
个人银行贷款担保书
2014/04/01 职场文书
销售员岗位职责
2014/06/09 职场文书
班组拓展活动方案
2014/08/14 职场文书
道德模范事迹材料
2014/12/20 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书