content logo

Bootstrap Sidebars:

Bootstrap Sidebar with White Hover Effect

Sidebars are a handy feature for any website owner that wants to add something a little extra for their users’ comfort and ease. Although using a bootstrap sidebar is a really popular method of attracting people’s attention. Even with that, still building a proper sidebar menu can prove to be rather difficult. It needs a lot of experience and time to create a simple sidebar with effect, well enough to attract viewers. Due to this fact and to save a lot of time when designing your web pages, you can choose a template from the list of codes available on our website. We have a lot of really awesome and useful sidebars with different features.

In this post, we are introducing a simple sidebar with the ability to open and close with a click on the toggle icon. This saves a lot of space in your web pages and makes it much more organized. This sidebar with close button is ordinarily minimized and when you click on it, it becomes larger. In the minimized version, the background is ground and when expanded it becomes a nice shade of green. Also, the hover mode has a nicely designed white effect in sidebar which makes everything look more beautiful and interesting.

#

Bootstrap Sidebar

#

White Effect in Sidebar

#

Simple Sidebar with Effect

#

Sidebar with Close Button

<!-- This script got from frontendfreecode.com -->
<div class="overlay"></div>
<div class="container">
    <div class="col-sm-3 col-md-3">
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>
            <ul class="list-unstyled components">
                <!--<p>Dummy Heading</p>-->
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li><a href="#">Home 1</a></li>
                        <li class="active"><a href="#">Home 2</a></li>
                        <li><a href="#">Home 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-md-9">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn active">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
    color: #1d2129;
    text-decoration: none;
    transition: all 0.3s;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
    color: #1d2129;
}
.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    display: none;
}
#sidebar .sidebar-header {
    display: none;
}
#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    border-left: 3px solid #e9ebee;
}
#sidebar ul li a:hover {
    border-left: 3px solid #009688;
    color: #1d2129;
    background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
    border-left: 3px solid #009688;
    color: #1d2129;
    background-color: #fff;
}
#sidebar ul li .active > a {
    color: #009688;
}
a[data-toggle="collapse"] {
    position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
    content: "\e259";
    display: block;
    position: absolute;
    right: 20px;
    font-family: "Glyphicons Halflings";
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: "\e260";
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}
/*Botao menu sidebar*/
#sidebarCollapse {
    display: none;
}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar a {
        color: #fff;
    }
    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #1d2129 !important;
        background-color: #fff;
    }
    #sidebar {
        margin-left: -250px;
        width: 250px;
        color: #fff;
        background: #009688;
        overflow-y: scroll;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        left: -250px;
        height: 100vh;
        z-index: 999;
    }
    #sidebar.active {
        margin-left: 0;
        left: 0;
    }
    #sidebar .sidebar-header {
        display: block;
        padding: 20px;
    }
    #sidebar ul li a,
    #sidebar ul li a:hover,
    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        border-left: none;
    }

    /*Botao menu sidebar*/
    #sidebarCollapse {
        display: inline-block;
        width: 44px;
        height: 34px;
        padding: 9px 10px;
        background: #f5f5f5;
        margin-left: 15px;
    }
    #sidebarCollapse span {
        width: 22px;
        height: 2px;
        border-radius: 1px;
        margin: 0 auto;
        display: block;
        background: #1d2129;
        transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
        transition-delay: 0.2s;
    }
    #sidebarCollapse span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
    #sidebarCollapse.active span {
        transform: none;
        opacity: 1;
    }
    #sidebarCollapse.active .icon-bar + .icon-bar {
        margin-top: 4px;
    }
}
/*retirar*/
body {
    background: #e9ebee;
}
$(document).ready(function () {
    $("#sidebar").niceScroll({
        cursorcolor: "#53619d",
        cursorwidth: 4,
        cursorborder: "none",
    });
    $(".overlay").on("click", function () {
        $("#sidebarCollapse").addClass("active");
        $("#sidebar").removeClass("active");
        $(".overlay").fadeOut();
    });
    $("#sidebarCollapse").on("click", function () {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
            $("#sidebar").addClass("active");
            $(".overlay").fadeIn();
            $(".collapse.in").toggleClass("in");
            $("a[aria-expanded=true]").attr("aria-expanded", "false");
        }
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
<style>
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
    color: #1d2129;
    text-decoration: none;
    transition: all 0.3s;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
    color: #1d2129;
}
.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    display: none;
}
#sidebar .sidebar-header {
    display: none;
}
#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    border-left: 3px solid #e9ebee;
}
#sidebar ul li a:hover {
    border-left: 3px solid #009688;
    color: #1d2129;
    background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
    border-left: 3px solid #009688;
    color: #1d2129;
    background-color: #fff;
}
#sidebar ul li .active > a {
    color: #009688;
}
a[data-toggle="collapse"] {
    position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
    content: "\e259";
    display: block;
    position: absolute;
    right: 20px;
    font-family: "Glyphicons Halflings";
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: "\e260";
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}
/*Botao menu sidebar*/
#sidebarCollapse {
    display: none;
}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar a {
        color: #fff;
    }
    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #1d2129 !important;
        background-color: #fff;
    }
    #sidebar {
        margin-left: -250px;
        width: 250px;
        color: #fff;
        background: #009688;
        overflow-y: scroll;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        left: -250px;
        height: 100vh;
        z-index: 999;
    }
    #sidebar.active {
        margin-left: 0;
        left: 0;
    }
    #sidebar .sidebar-header {
        display: block;
        padding: 20px;
    }
    #sidebar ul li a,
    #sidebar ul li a:hover,
    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        border-left: none;
    }

    /*Botao menu sidebar*/
    #sidebarCollapse {
        display: inline-block;
        width: 44px;
        height: 34px;
        padding: 9px 10px;
        background: #f5f5f5;
        margin-left: 15px;
    }
    #sidebarCollapse span {
        width: 22px;
        height: 2px;
        border-radius: 1px;
        margin: 0 auto;
        display: block;
        background: #1d2129;
        transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
        transition-delay: 0.2s;
    }
    #sidebarCollapse span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
    #sidebarCollapse.active span {
        transform: none;
        opacity: 1;
    }
    #sidebarCollapse.active .icon-bar + .icon-bar {
        margin-top: 4px;
    }
}
/*retirar*/
body {
    background: #e9ebee;
}
</style>

</head>
<body>
<div class="overlay"></div>
<div class="container">
    <div class="col-sm-3 col-md-3">
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>
            <ul class="list-unstyled components">
                <!--<p>Dummy Heading</p>-->
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li><a href="#">Home 1</a></li>
                        <li class="active"><a href="#">Home 2</a></li>
                        <li><a href="#">Home 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-md-9">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn active">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $("#sidebar").niceScroll({
        cursorcolor: "#53619d",
        cursorwidth: 4,
        cursorborder: "none",
    });
    $(".overlay").on("click", function () {
        $("#sidebarCollapse").addClass("active");
        $("#sidebar").removeClass("active");
        $(".overlay").fadeOut();
    });
    $("#sidebarCollapse").on("click", function () {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
            $("#sidebar").addClass("active");
            $(".overlay").fadeIn();
            $(".collapse.in").toggleClass("in");
            $("a[aria-expanded=true]").attr("aria-expanded", "false");
        }
    });
});
</script>

</body>
</html>
Preview