Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Sidebars:

Bootstrap Sidebar with Background Image

Previous Code Next Code

The more complex websites get, the harder it becomes to navigate through them. By employing a simple sidebar, you can add in all the extra content and navigation links to a list neatly packed on one side of the screen. It is possible to add anything from pages in your own site, subscriptions, call to actions, social media links, and even links to related websites. All of these help your users experience a better overall quality in your website which is your ultimate goal when you are a website owner. Although a simple sidebar allows you to have all the necessary information and vital features readily available at any given time but why stop on simple designs when you can use beautiful sidebars with background images.

The code below features a Bootstrap sidebar with a certain charm to it. it has a beautiful background sidebar with some key information and the necessary social media links. Also, since this is a sidebar with toggle button, it is hidden until you click on the toggle button available at the top of the screen. All in all, using such a charming Bootstrap sidebar makes your website really unique and special among the rest of the sites out there. We suggest you try this code out right now by scrolling down to the respective section.

#

Sidebar with Background

#

Bootstrap Sidebar

#

Beautiful Background Sidebar

#

Sidebar with Hamburger Button

<!-- This script got from frontendfreecode.com -->
<aside class="sidebar">
    <div class="toggle">
        <a href="#" class="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar">
            <span></span>
        </a>
    </div>
    <div class="side-inner align-items-end" style="background-image: url('http://frontendfreecode.com/img/Background.jpg');">
        <div class="sidebar-content">
            <div class="bio">
                <h3>Journal</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illum facere ut!</p>
            </div>
            <ul class="list-unstyled main-nav">
                <li><a href="#">Latest</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
            </ul>
            <ul class="list-unstyled social">
                <li>
                    <a href="#"><span class="fa fa-instagram"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-twitter"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-dribbble"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-linkedin"></span></a>
                </li>
            </ul>
        </div>
    </div>
</aside>
<main>
    <div class="site-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-9">
                    <div class="row">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fcfcfc;
}
p {
    color: #b3b3b3;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
a {
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}
a,
a:hover {
    text-decoration: none !important;
}
h2 {
    font-size: 20px;
}
body {
    position: relative;
}
body:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
body.show-sidebar {
    overflow: hidden;
}
body.show-sidebar:before {
    opacity: 1;
    visibility: visible;
}
.site-section {
    padding: 7rem 0;
}
aside,
main {
    height: 100vh;
    min-height: 580px;
}
aside {
    width: 400px;
    left: 0;
    z-index: 1001;
    position: fixed;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    background-color: #fff;
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar aside {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
aside .toggle {
    padding-left: 30px;
    padding-top: 30px;
    position: absolute;
    right: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
.show-sidebar aside .toggle .burger:before,
.show-sidebar aside .toggle .burger span,
.show-sidebar aside .toggle .burger:after {
    background: #000;
}
aside .side-inner {
    padding: 30px 0;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
aside .side-inner .sidebar-content {
    padding-left: 40px;
    padding-right: 40px;
}
aside .side-inner .sidebar-content .bio {
    margin-bottom: 40px;
}
aside .side-inner .sidebar-content h3 {
    font-size: 3rem;
    color: #fff;
}
aside .side-inner .sidebar-content p {
    color: #fff;
    line-height: 1.8;
}
aside .side-inner .sidebar-content .main-nav {
    margin-bottom: 40px;
}
aside .side-inner .sidebar-content .main-nav li a {
    color: #fff;
}
aside .side-inner .sidebar-content .social li {
    display: inline-block;
}
aside .side-inner .sidebar-content .social li a {
    font-size: 18px;
    width: 50px;
    height: 50px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    display: block;
    border-radius: 50%;
}
aside .side-inner .sidebar-content .social li a span {
    position: absolute;
    color: #000;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
aside .side-inner .sidebar-content .social li a:hover {
    background: #fff;
}
main {
    width: calc(100%);
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar main {
    -webkit-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}
main .post-entry {
    margin-bottom: 30px;
}
main .post-entry .custom-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
    margin-right: 30px;
}
main .post-content h3 {
    font-size: 18px;
}
main .post-content .post-meta {
    font-size: 15px;
    color: #ccc;
}
/* Burger */
.burger {
    width: 28px;
    height: 32px;
    cursor: pointer;
    position: relative;
    z-index: 99;
    float: right;
}
.burger:before,
.burger span,
.burger:after {
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
}
.burger:before,
.burger:after {
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    content: "";
}
.burger:before {
    top: 4px;
}
.burger span {
    top: 15px;
}
.burger:after {
    top: 26px;
}
/* Hover */
.burger:hover:before {
    top: 7px;
}
.burger:hover:after {
    top: 23px;
}
/* Click */
.burger.active span {
    opacity: 0;
}
.burger.active:before,
.burger.active:after {
    top: 40%;
}
.burger.active:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
    /*for IE*/
}
.burger.active:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
    /*for IE*/
}
.burger:focus {
    outline: none;
}

$(function () {
    "use strict";
    $(".js-menu-toggle").click(function (e) {
        var $this = $(this);
        if ($("body").hasClass("show-sidebar")) {
            $("body").removeClass("show-sidebar");
            $this.removeClass("active");
        } else {
            $("body").addClass("show-sidebar");
            $this.addClass("active");
        }
        e.preventDefault();
    });
    // click outisde offcanvas
    $(document).mouseup(function (e) {
        var container = $(".sidebar");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            if ($("body").hasClass("show-sidebar")) {
                $("body").removeClass("show-sidebar");
                $("body").find(".js-menu-toggle").removeClass("active");
            }
        }
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fcfcfc;
}
p {
    color: #b3b3b3;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
a {
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}
a,
a:hover {
    text-decoration: none !important;
}
h2 {
    font-size: 20px;
}
body {
    position: relative;
}
body:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
body.show-sidebar {
    overflow: hidden;
}
body.show-sidebar:before {
    opacity: 1;
    visibility: visible;
}
.site-section {
    padding: 7rem 0;
}
aside,
main {
    height: 100vh;
    min-height: 580px;
}
aside {
    width: 400px;
    left: 0;
    z-index: 1001;
    position: fixed;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    background-color: #fff;
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar aside {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
aside .toggle {
    padding-left: 30px;
    padding-top: 30px;
    position: absolute;
    right: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
.show-sidebar aside .toggle .burger:before,
.show-sidebar aside .toggle .burger span,
.show-sidebar aside .toggle .burger:after {
    background: #000;
}
aside .side-inner {
    padding: 30px 0;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
aside .side-inner .sidebar-content {
    padding-left: 40px;
    padding-right: 40px;
}
aside .side-inner .sidebar-content .bio {
    margin-bottom: 40px;
}
aside .side-inner .sidebar-content h3 {
    font-size: 3rem;
    color: #fff;
}
aside .side-inner .sidebar-content p {
    color: #fff;
    line-height: 1.8;
}
aside .side-inner .sidebar-content .main-nav {
    margin-bottom: 40px;
}
aside .side-inner .sidebar-content .main-nav li a {
    color: #fff;
}
aside .side-inner .sidebar-content .social li {
    display: inline-block;
}
aside .side-inner .sidebar-content .social li a {
    font-size: 18px;
    width: 50px;
    height: 50px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    display: block;
    border-radius: 50%;
}
aside .side-inner .sidebar-content .social li a span {
    position: absolute;
    color: #000;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
aside .side-inner .sidebar-content .social li a:hover {
    background: #fff;
}
main {
    width: calc(100%);
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar main {
    -webkit-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}
main .post-entry {
    margin-bottom: 30px;
}
main .post-entry .custom-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
    margin-right: 30px;
}
main .post-content h3 {
    font-size: 18px;
}
main .post-content .post-meta {
    font-size: 15px;
    color: #ccc;
}
/* Burger */
.burger {
    width: 28px;
    height: 32px;
    cursor: pointer;
    position: relative;
    z-index: 99;
    float: right;
}
.burger:before,
.burger span,
.burger:after {
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
}
.burger:before,
.burger:after {
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    content: "";
}
.burger:before {
    top: 4px;
}
.burger span {
    top: 15px;
}
.burger:after {
    top: 26px;
}
/* Hover */
.burger:hover:before {
    top: 7px;
}
.burger:hover:after {
    top: 23px;
}
/* Click */
.burger.active span {
    opacity: 0;
}
.burger.active:before,
.burger.active:after {
    top: 40%;
}
.burger.active:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
    /*for IE*/
}
.burger.active:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
    /*for IE*/
}
.burger:focus {
    outline: none;
}
</style>

</head>
<body>
<aside class="sidebar">
    <div class="toggle">
        <a href="#" class="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar">
            <span></span>
        </a>
    </div>
    <div class="side-inner align-items-end" style="background-image: url('http://frontendfreecode.com/img/Background.jpg');">
        <div class="sidebar-content">
            <div class="bio">
                <h3>Journal</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illum facere ut!</p>
            </div>
            <ul class="list-unstyled main-nav">
                <li><a href="#">Latest</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
            </ul>
            <ul class="list-unstyled social">
                <li>
                    <a href="#"><span class="fa fa-instagram"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-twitter"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-dribbble"></span></a>
                </li>
                <li>
                    <a href="#"><span class="fa fa-linkedin"></span></a>
                </li>
            </ul>
        </div>
    </div>
</aside>
<main>
    <div class="site-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-9">
                    <div class="row">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function () {
    "use strict";
    $(".js-menu-toggle").click(function (e) {
        var $this = $(this);
        if ($("body").hasClass("show-sidebar")) {
            $("body").removeClass("show-sidebar");
            $this.removeClass("active");
        } else {
            $("body").addClass("show-sidebar");
            $this.addClass("active");
        }
        e.preventDefault();
    });
    // click outisde offcanvas
    $(document).mouseup(function (e) {
        var container = $(".sidebar");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            if ($("body").hasClass("show-sidebar")) {
                $("body").removeClass("show-sidebar");
                $("body").find(".js-menu-toggle").removeClass("active");
            }
        }
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS