Bootstrap create a system template with a left-folded menu (ii) _javascript tips

In the previous article to introduce Bootstrap to create a left-side folding menu system template (a), specific content can be clicked to learn more details.

1. About the previous article bug

A few friends raised questions and bugs in the last article. Let me say it briefly.

1>. IE version of support?

I wrote these just to test Firefox Google browsing. You can add code to achieve compatibility under 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>

If you want to be compatible IE6 This super browser, please see: http://www.bootcss.com/p/bsie/

2>. The use of badge, thank baidixing Tips

This, see everyone's use habits.

3> of the two level menu of the sample code the font size shown on Firefox and Google is inconsistent , thanks to Baidixing's point.

Because I was debugging on Google browsing, Chrome does not support fonts below 12px by default.

2. Left folding Menu Perfect version

Interested friends can click to view the effect demo: http://static.demo.ruyo.net/Bootstrap_left_menu.html2.html

1>. The arrows follow the expansion of the menu and the merge changes

<a href= "#systemSetting" class= "Nav-header collapsed" data-toggle= "collapse" > <i class= "Glyphicon
GLYPHICON-COG "></i> System Management <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>  User management </ A></li> <li><a href= "#" ><i class= "Glyphicon glyphicon-th-list" ></i>  Menu Management < /a></li> <li><a href= "#" ><i class= "Glyphicon glyphicon-asterisk" ></i>  role management </a></li> <li><a href= "#" ><i class= "Glyphicon glyphicon-edit" ></i>  Modify password </a></li> <li><a href= "#" ><i class= "Glyphicon glyphicon-eye-open" ></i>  Log View </a></li> </ul>/* Control menu Arrows//nav-header.collapsed > Span.glyphicon-chevron-toggle:before {
Content: "\e114";  }. Nav-header > Span.glyphicon-chevron-toggle:before {content: "\e113";}

2>. Second-level menu selection style

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

Recommended bootstrap related topics in cloud-dwelling communities:

Bootstrap component Operation tips

Bootstrap Related Knowledge Summary

The above is a small set to introduce the bootstrap to create a left-side folding menu system Template (ii) of the relevant knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!