一个炫酷的Bootstrap导航菜单

本文实例为大家分享了Bootstrap导航菜单的具体代码，供大家参考，具体内容如下

效果图：

点击菜单的箭头有点小问题，后面改，不是很影响。

 

 

  
  
   Dashboard 
  
 
 

  
  
  Elements
  
  
  

  

   Basic Elements
  
  

   
   Icons
   
   
   

   

    
    
    Font Awesome
    
   
   

    
    
    Glyph Icons
    
   
   
  
  

   
   Tabs & Accordions
   
  
  

   
   Alerts & Tooltips
   
  
  

   
   Modals & Wells
   
  
  
 
 

  
  
  More Pages
  
  
  

  

   Error 404
  
  

    Grid
  
  

   
   Multi Level Menu
   
   
   

   

    
    
    Level 3
    
   
   

    
    
    Level 4
    
    
    

    

     
     
     Some Item
     
    
    

     
     
     Another Item
     
    
    
   
   
  
  
 
 

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个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。