<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="css/nav.css" rel="external nofollow" ><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<nav class="sider-bar small-bar"> <ul>  <li class="home_btn">   <a href="javascript:;" id="full-bar" >    <i class="fa fa-navicon nav_icon"></i>   </a>  </li>  <li>   <a href="javascript:;">    <i class="fa fa-home nav_icon"></i>    <span class="nav-text">主頁</span>   </a>  </li>  <li class="drop-show">   <a href="javascript:;" >    <i class="fa fa-cogs nav_icon"></i>    <span class="nav-text">系統<i class="fa fa-angle-right nav_icon "></i></span>   </a>   <ul class="drop-list">    <li><a href="user.html">用戶管理</a></li>    <li><a href="buttons.html">權限設置</a></li>    <li><a href="buttons.html">操作日志</a></li>    <li><a href="buttons.html">設備運行日志</a></li>   </ul>  </li>  <li class="drop-show">   <a href="javascript:;">    <i class="fa fa-check-square-o nav_icon"></i>    <span class="nav-text">防區 <i class="fa fa-angle-right nav_icon "></i></span>   </a>   <ul class="drop-list">    <li><a href="buttons.html">防區管理</a></li>   </ul>  </li>  <li class="drop-show">   <a href="javascript:;">    <i class="fa fa-info-circle nav_icon"></i>    <span class="nav-text">警報 <i class="fa fa-angle-right nav_icon "></i></span>   </a>   <ul class="drop-list">    <li><a href="buttons.html">歷史報警曲線</a></li>    <li><a href="buttons.html">報表統計</a></li>    <li><a href="buttons.html">警情處理</a></li>   </ul>  </li>  <li>   <a href="#">    <i class="fa fa-dashboard (alias) nav_icon"></i>    <span class="nav-text">設備</span>   </a>  </li> </ul></nav>

* { margin: 0; padding: 0;}body { font-family:Microsoft YaHei; font-size:14px;}li,ol,ul { list-style: none;}a { text-decoration: none; outline: 0;}a:hover,a:link{ text-decoration:none;}.sider-bar{  float:left; width:220px;  height:100%;  z-index:999; overflow:hidden; background:rgba(0,0,0,0.7); }.sider-bar ul{  width:100%;  float:left}.sider-bar ul li{  width:100%;  float:left;  font-size:14px;}.sider-bar ul li a{  padding:8px 10px; display:block; color:#fff; }.sider-bar ul li.home_btn{  background:#282D2D;  text-align:center}.sider-bar ul li.home_btn:hover{  background:#282D2D}.sider-bar ul li a:hover{  background:#0099CC;}.sider-bar ul li .nav_icon{  font-size:18px;  margin:0 5px;}.small-bar{ width:50px;}.small-bar li {  text-align:center;}.small-bar li a{ display:block;  text-align:center}.small-bar li span{  display:none}.small-bar ul li .nav_icon{  font-size:24px;  margin:0}ul.drop-list{  display:none;  margin-left:30px;  width:190px;}.fa-angle-right{  float:right}body, html { height:100%;}

$(document).ready(function(){ //展開主菜單 $("#full-bar").click(function(){  $(".sider-bar").toggleClass("small-bar");  if($(".sider-bar").hasClass('small-bar')){   $(".drop-list").slideUp();  } }); $(".drop-show").click(function(){  if(!$(".sider-bar").hasClass('small-bar')){   $(this).children(".drop-list").slideToggle();   $(this).siblings('li').children(".drop-list").slideUp();  } });});