You might have seen many websites and mobile apps with hamburger menu on the left side. Whenever user clicks on that hamburger menu, one panel will open from left side. Now we are going implement the same style menu panel using jQuery and bootstrap
Observe below CSS
.sidebar-nav { margin-left: -250px; width: 250px; z-index: 10001; position: absolute; left: 0px; top: 0px; overflow: hidden; height: 100vh; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #fafafa; border-right: 1px solid #ccc; } .sidebar-nav-togled { margin-left: 0px; }
After side panel got displayed, uncovered main panel area should be dull in colour. For that, we will add backdrop. It should cover whole screen. Whenever side panel displayed, backdrop also should be displayed. The below css is for backdrop class
.backdrop { height: 100vh; width: 100%; z-index: 10000; position: fixed; top: 0; left: 0; display: none; background-color: #000; opacity: 0.2; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
Whenever user clicks on hamburger menu or close icon on the side panel or backdrop, .sidebar-nav-togled class has to be toggled. If user clicks on list item, it will be active and remaining all will be normal. Find below jQuery code.
$(function() { $("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() { $("#mySideBar").toggleClass("sidebar-nav-togled"); $(".backdrop").toggle(); }); $(".list-group-item").click(function(){ $(".list-group-item").removeClass("active"); $(this).addClass("active"); }); });
Your blogs are great.Are you also searching for Nursing Writing Services? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.whatsapp us:+1-(951)-468-9855
ReplyDeleteYour blogs are great.Are you also searching for Nursing evidence-based practice writing services ? we are the best solution for you. We are best known for delivering the best nursing writing services to students without having to break the bank.
ReplyDelete