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;
}
Here side panel style was declared with absolute position, width 250px and given transition style also. Magin-left -250px will make the side panel invisible. Whenever .sidebar-nav-togled added to side panel div, the side panell will appear with animation from left side.

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:

Blogroll

Follow this blog by Email

Popular Posts