点击菜单的箭头有点小问题，后面改，不是很影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta content="width=device-width, initial-scale=1"/> <link type="text/css" href="https://www.jb51.net/bootstrap/bootstrap.min.css" /> <link type="text/css" href="https://www.jb51.net/css/beyond.css" /> <title>beyond网站模板练习</title> </head> <body> <!-- 导航 --> <div> <ul> <li> <a href="#"> <i></i> <span> Dashboard </span> </a> </li> <li> <a href="#collapse1" data-toggle="collapse" data-parent="#nav_parent"> <i></i> <span>Elements</span> <i></i> </a> <ul> <li> <a href="#"><span>Basic Elements</span></a> </li> <li> <a href="#collapse2" data-toggle="collapse"> <span>Icons</span> <i></i> </a> <ul> <li> <a href="#"> <i></i> <span>Font Awesome</span> </a> </li> <li> <a href="#"> <i></i> <span>Glyph Icons</span> </a> </li> </ul> </li> <li> <a href="#"> <span>Tabs & Accordions</span> </a> </li> <li> <a href="#"> <span>Alerts & Tooltips</span> </a> </li> <li> <a href="#"> <span>Modals & Wells</span> </a> </li> </ul> </li> <li> <a href="#collapse5" data-toggle="collapse" data-parent="#nav_parent"> <i></i> <span>More Pages</span> <i></i> </a> <ul> <li> <a href="#"><span>Error 404</span></a> </li> <li> <a href="#"><span> Grid</span></a> </li> <li> <a href="#collapse6" data-toggle="collapse"> <span>Multi Level Menu</span> <i></i> </a> <ul> <li> <a href="#"> <i></i> <span>Level 3</span> </a> </li> <li> <a href="#collapse7" data-toggle="collapse"> <i></i> <span>Level 4</span> <i></i> </a> <ul> <li> <a href="#"> <i></i> <span>Some Item</span> </a> </li> <li> <a href="#"> <i></i> <span>Another Item</span> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <script type="text/javascript" src="https://www.jb51.net/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ //点击菜单箭头变化 $(".page-sidebar .sidebar-menu a").each(function(){ $(this).click(function(){ var Oele = $(this).children('.menu-expand'); if($(Oele)){ if($(Oele).hasClass('glyphicon-chevron-right')){ $(Oele).removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down'); }else{ $(Oele).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right'); } } //选中增加active if(! $(this).hasClass('panel-heading')){ $(".page-sidebar .sidebar-menu a").removeClass('active'); $(this).addClass('active'); } }); }); }) </script> </body> </html>
CSS代码：
.page-sidebar{ position: absolute; top: 0; bottom: 0; width: 224px; display: block; } .page-sidebar .sidebar-menu { margin: 0; padding: 0; margin-left: 5px; } .page-sidebar:before{ content: ""; position: fixed; display: block; width: 219px; bottom: 0; top: 0; left: 5px; background-color: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2); box-shadow: 0 0 10px 0 rgba(0,0,0,.2); z-index: 1; } .page-sidebar .sidebar-menu a{ color: #737373; z-index: 123; padding: 0 16px 0 7px; margin: 0; height: 38px; line-height: 36px; -webkit-text-shadow: none!important; text-shadow: none!important; font-size: 13px; } .page-sidebar .submenu{ margin: 0; padding: 0; position: relative; float: none; background-color: #fbfbfb; border: 0; box-shadow: inset 0 4px 4px -2px rgba(0,0,0,.15),inset 0 -4px 4px -2px rgba(0,0,0,.15); border-radius: 0; z-index: 123; } .page-sidebar .sidebar-menu>li>a { border-top: 1px solid #f3f3f3; } /* 菜单前面的小图标*/ .page-sidebar .sidebar-menu a .menu-icon { display: inline-block; vertical-align: middle; min-width: 30px; text-align: center; font-size: 14px; font-weight: normal; font-style: normal; margin-top: -3px; } /* 向右的箭头*/ .page-sidebar .sidebar-menu a .menu-expand{ display: inline-block; position: absolute; font-size: 10px; line-height: 10px; height: 10px; width: 10px; right: 12px; top: 15px; margin: 0; text-align: center; padding: 0; -webkit-text-shadow: none; text-shadow: none; color: #666; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; font-style: normal; font-weight: normal; } .panel-group .panel{ margin: 0; margin-top:0 !important; border: none; } /* 第一层级缩进 */ .page-sidebar .sidebar-menu .submenu>li>a { padding-left: 40px; } /* 第二层级缩进 */ .page-sidebar .sidebar-menu .submenu>li .submenu>li>a { padding-left: 50px; } .page-sidebar .sidebar-menu a:hover { color: #262626; } /* 选中增加蓝色border */ .page-sidebar .sidebar-menu .active:before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; max-width: 4px; overflow: hidden; background-color: #2dc3e8; } .page-sidebar .sidebar-menu li a:not(.panel-heading):hover:before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; max-width: 4px; overflow: hidden; background-color: #fb6e52; }
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：