Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo Responsive Sidebar Menu bằng Bootstrap & Jquery
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo Responsive Sidebar Menu bằng Bootstrap & Jquery
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(); }); });
Bootstrap Xem (7352) Học thiết kế web giá rẻ