Hướng dẫn flexible sidebar css - css thanh bên linh hoạt

Bước 1: Tạo cấu trúc HTML

 
 
 
 
   
 
    
Chào mừng các Bạn đến với website hocwebgiare.com
 
   

  

 
  
 

Bước 2: Định dạng CSS

body,html{    
height: 100%;
}

.container-main .row{    
padding: 0px;    
margin: 0px;
}


nav.sidebar.navbar {    
border-radius: 0px;
}


nav.sidebar, .container-main{    
-webkit-transition: margin 200ms ease-out;    
-moz-transition: margin 200ms ease-out;    
-o-transition: margin 200ms ease-out;    
transition: margin 200ms ease-out;
}


.menu-icon {    
font-size: 20px;
}


.navbar-m2p {    
background-color: #00464f;    
border-color: #00464f;
}

.navbar-m2p span, .navbar-m2p a {    
color: #FFFFFF;
}

.active .dropdown-toggle {    
background-color: rgba[126, 169, 39, 0.3];    
border-color: rgba[126, 169, 39, 0.3];
}

.nav .open > a {    
background-color: rgba[126, 169, 39, 0.3];    
border-color: rgba[126, 169, 39, 0.3];
}

.nav li > a:hover, .nav .open > a:hover,.nav li > a:focus, .nav .open > a:focus,.nav li > a:active, .nav .open > a:active {    
background-color: rgba[126, 169, 39, 0.3];
}

.nav .open ul > li {    
background-color: rgba[126, 169, 39, 0.4]
}

.navbar-m2p .navbar-nav .open .dropdown-menu>li>a {    
color: #FFFFFF;    
padding: 10px;
}


.navbar-m2p .navbar-nav .active a {    
margin-left: -1px;    
border-left: 5px solid #7ea927;
}


.navbar-toggle {    
background-color: transparent;    
border: 1px solid rgba[126, 169, 39, 0.4];
}

.navbar-toggle .icon-bar,.navbar-toggle .icon-bar + .icon-bar {    
background-color: #7ea927;
}


nav:hover .forAnimate{    
opacity: 1;
}


.navbar-m2p .dropdown-menu {    
padding: 0px;
}


.nav li.separator {    
padding: 10px 15px;    
text-transform: uppercase;    
background-color: rgba[0, 0, 39, 0.2];    
color: rgba[208, 208, 207, 0.4];
}


@media [min-width: 768px] {
    
.container-main{        
position: absolute;        
width: calc[100% - 40px];         
margin-left: 40px;        
float: right;    
}
    

nav.sidebar:hover + .container-main{        
margin-left: 300px;    
}
    

nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {        
margin-left: 0px;    
}      

nav.sidebar .navbar-brand, nav.sidebar .navbar-header{        
text-align: center;        
width: 100%;        
margin-left: 0px;        
font-size: 25px;        
line-height: 27px;    
}
    

nav.sidebar a{        
padding-right: 13px;    
}
    

nav.sidebar .navbar-nav .open .dropdown-menu {        
position: static;        
float: none;        
width: auto;        
margin-top: 0;        
background-color: transparent;        
border: 0;        
-webkit-box-shadow: none;        
box-shadow: none;    
}
    

nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{        
padding: 0 0px 0 0px;    
}
    

nav.sidebar{        
width: 300px;        
height: 100%;        
margin-left: -260px;        
float: left;        
z-index: 8000;        
margin-bottom: 0px;    
}
    

nav.sidebar li {        
width: 100%;    
}
    

nav.sidebar:hover{        
margin-left: 0px;    
}
    

.forAnimate{        
opacity: 0;    
}

}


@media [min-width: 1330px] {
    
.container-main{        
width: calc[100% - 300px];         
margin-left: 300px;    
}
    

nav.sidebar{        
margin-left: 0px;        
float: left;    
}
    

nav.sidebar .forAnimate{        
opacity: 1;    
}

} 

Bước 3: Gọi thư viện Bootstrap và Font

Bước 4: Gọi thư viện JQUERY

Bước 5: Tạo hiệu ứng bằng JQUERY

function htmlbodyHeightUpdate[] {    
var height3 = $[window].height[];    
var height1 = $['.nav'].height[] + 50;    
height2 = $['.container-main'].height[];    
if [height2 > height3] {        
$['html'].height[Math.max[height1, height3, height2] + 10];        
$['body'].height[Math.max[height1, height3, height2] + 10];    
} else    {        
$['html'].height[Math.max[height1, height3, height2]];        
$['body'].height[Math.max[height1, height3, height2]];    
}
}$[document].ready[function [] {    
htmlbodyHeightUpdate[];    
$[window].resize[function [] {        
htmlbodyHeightUpdate[];    
}];    
$[window].scroll[function [] {        
height2 = $['.container-main'].height[];        
htmlbodyHeightUpdate[];    
}];
}];