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();    
});
});