Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
在上一篇文章給大家介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)，具體內(nèi)容介紹可以點(diǎn)擊了解詳情。
1. 關(guān)于上一篇文章BUG
上一篇文章中有幾位朋友提出的問題和BUG. 我簡單的說一下。
1>. IE版本的支持？
我寫的這些只是測試火狐谷歌瀏覽。在IE8+下可以添加代碼以實(shí)現(xiàn)兼容。
<!--[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這個(gè)超級瀏覽器，請看： http://www.bootcss.com/p/bsie/
2>. badge 的使用，謝謝 baidixing 的提示
這個(gè)呢，看大家的使用習(xí)慣了。
3>. 示例代碼的二級菜單下面的字體在火狐和google上顯示的字體大小不一致，謝謝 baidixing 的指出。
由于我是在谷歌瀏覽上調(diào)試的,chrome默認(rèn)不支持 12px以下的字體.
2. 左側(cè)折疊菜單 完善版
感興趣的朋友可以點(diǎn)擊查看效果演示：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>
系統(tǒng)管理
<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相關(guān)專題：
以上所述是小編給大家介紹的Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)知識，希望對大家有所幫助，如果大家任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動折疊隱藏）
- Bootstrap 折疊（Collapse）插件用法實(shí)例詳解
- Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap每天必學(xué)之折疊（Collapse）插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
- Bootstrap筆記—折疊實(shí)例代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)鼠標(biāo)滑過圖片變換效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滑過圖片變換效果的方法,涉及javascript控制鼠標(biāo)事件及樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
基于three.js編寫的一個(gè)項(xiàng)目類示例代碼
這篇文章主要給大家介紹了關(guān)于基于three.js編寫的一個(gè)項(xiàng)目類的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了微信小程序調(diào)用支付接口支付，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript Xml增刪改查(IE下)操作實(shí)現(xiàn)代碼
比較不錯(cuò)的實(shí)現(xiàn)代碼，大家可以仔細(xì)的看下，思路。2009-01-01
下面小編就為大家?guī)硪黄獙s中回調(diào)函數(shù)的一些看法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
利用JS做網(wǎng)頁特效_大圖輪播(實(shí)例講解)
下面小編就為大家?guī)硪黄肑S做網(wǎng)頁特效_大圖輪播(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
下面小編就為大家?guī)硪黄J(rèn)識less和webstrom的less配置方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
js中async函數(shù)結(jié)合promise的小案例淺析
這篇文章主要介紹了js中async函數(shù)結(jié)合promise的小案例淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡易貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
本文我們會討論如何通過 JavaScript 在運(yùn)行時(shí)操作 CSS，從而動態(tài)地更新應(yīng)用到我們的元素上的式樣。本文所用的技術(shù)是我們已經(jīng)看到過的，但在利用 CSS DOM 來進(jìn)行操作的時(shí)候還需要注意幾個(gè)特殊點(diǎn)。2014-12-12