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"); }); });
0 comments:
Post a Comment