Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo Bootstrap Collapsible Sidebar Left & Right

Trong bài tự học lập trình web này các Bạn sẽ được Hướng dẫn cách tạo Bootstrap Collapsible Sidebar Left & Right cho website

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

 
 Tạo Bootstrap Collapsible Sidebar Left và Right 
 		
  			
   				
    					
     #sidebar-left
     					
     .col-md-3
     				
    				
    Nội dung cột trái.			
   			
   				
    #content .col-md-6 .col-md-9 .col-md-12
    				
    					
     					
     				
    				
    Nội dung chính			
   			
   				
    					
     #sidebar-right
     					
     .col-md-3
     				
    				
    Nội dung cột phải.

Bước 2: Tạo cấu trúc CSS

html,		body {	
		height: 100%;	
	}	

	#content,		.sidebar {	
		min-height: 650px;	
	}	

	#row-main {	
		overflow-x: hidden;	
	}	

	#content {	
		background-color: lightyellow;	
					-webkit-transition: width 0.3s ease;	
		-moz-transition: width 0.3s ease;	
		-o-transition: width 0.3s ease;	
		transition: width 0.3s ease;	
	}	

	#content .btn-group {	
		margin-bottom: 10px;	
	}	

	.col-md-6 .width-9,		.col-md-6 .width-12,		.col-md-9 .width-6,		.col-md-9 .width-12,		.col-md-12 .width-6,		.col-md-12 .width-9 {			display: none; 		}		
.sidebar {	
		background-color: lightgrey;	
					-webkit-transition: margin 0.3s ease;	
		-moz-transition: margin 0.3s ease;	
		-o-transition: margin 0.3s ease;	
		transition: margin 0.3s ease;	
	}	

	.collapsed {	
		display: none; 	
	}	

	@media (min-width: 992px) {	
		.collapsed {	
			display: block;	
		}	

		#sidebar-left.collapsed {	
			margin-left: -25%; 	
		}	

		#sidebar-right.collapsed {	
			margin-right: -25%; 	
		}	

	}

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

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

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

$(document).ready(function () {	
		function toggleSidebar(side) {	
			if (side !== "left"; && side !== "right") {	
				return false;	
			}	

			var left = $("#sidebar-left"),	
				right = $("#sidebar-right"),	
				content = $("#content"),	
				openSidebarsCount = 0,	
				contentClass = "";
	
							if (side === "left") {	
				left.toggleClass("collapsed");	
			} 
else if (side === "right") {	
				right.toggleClass("collapsed");	
			}	

if (!left.hasClass("collapsed")) {	
				openSidebarsCount += 1;	
			}	

							if (!right.hasClass("collapsed")) {	
				openSidebarsCount += 1;				}	

			if (openSidebarsCount === 0) {	
				contentClass = "col-md-12";	
			} 

else if (openSidebarsCount === 1) {	
				contentClass = "col-md-9";	
			} 
else {					contentClass = "col-md-6";	
			}	

							content.removeClass("col-md-12 col-md-9 col-md-6")					   
.addClass(contentClass);	
		}	

		$(".toggle-sidebar-left").click(function () {	
			toggleSidebar("left");	
							return false;	
		});	

		$(".toggle-sidebar-right").click(function () {	
			toggleSidebar("right");	
							return false;	
		});	
	});

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất