Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Sidebars:

Bootstrap Sidebar with Yellow Hover Effect

Previous Code Next Code

Sidebars provide users of your website with an extra way of navigating through different pages or various features of your website with more ease. There are many websites out there that have complex features and more than hundreds of subpages. Navigating through all of that is truly a difficult and time-consuming task. Therefore, all of these subpages are categorized neatly in a list for the users to find easier. Of course, if such list was in every page then there wouldn’t be much space for the actual content of that page. This is why a sidebar is useful. You can add everything to your sidebar and which hides conveniently at the side of the page when you don’t need it.

The Bootstrap sidebar that we are sharing with you today is a sidebar with a yellow hover effect. The colour yellow looks really good with the dark background of this sidebar which makes it pleasing to the eye. The sidebar has a unique icon for every item and can be used for different things. Whenever you hover your mouse over an item in this sidebar with hover effect, the background colour of that particular item will turn yellow. You can easily use this beautiful sidebar effect in your own website via the code below.

#

Yellow Hover Effect

#

Bootstrap Sidebar

#

Sidebar with Hover Effect

#

Beautiful Sidebar Effect

<!-- This script got from frontendfreecode.com -->
<div id="wrapper">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <h2>Logo</h2>
        </div>
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><i class="fa fa-home"></i>Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-plug"></i>Plugins</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-user"></i>Users</a>
            </li>
        </ul>
    </aside>

    <div id="navbar-wrapper">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand" id="sidebar-toggle"><i class="fa fa-bars"></i></a>
                </div>
            </div>
        </nav>
    </div>

    <section id="content-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="content-title">Test</h2>
                <p>
                    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.
                </p>
            </div>
        </div>
    </section>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    padding-bottom: 30px;
    position: relative;
    min-height: 100%;
}
a {
    transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
    text-decoration: none;
}
#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
    position: relative;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #222;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
.sidebar-brand {
    position: absolute;
    top: 0;
    width: 250px;
    text-align: center;
    padding: 20px 0;
}
.sidebar-brand h2 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}
.sidebar-nav {
    position: absolute;
    top: 75px;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav > li {
    text-indent: 10px;
    line-height: 42px;
}
.sidebar-nav > li a {
    display: block;
    text-decoration: none;
    color: #757575;
    font-weight: 600;
    font-size: 18px;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li.active > a {
    text-decoration: none;
    color: #fff;
    background: #f8be12;
}
.sidebar-nav > li > a i.fa {
    font-size: 24px;
    width: 60px;
}
#navbar-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -250px;
}
#navbar-wrapper .navbar {
    border-width: 0 0 0 0;
    background-color: #eee;
    font-size: 24px;
    margin-bottom: 0;
    border-radius: 0;
}
#navbar-wrapper .navbar a {
    color: #757575;
}
#navbar-wrapper .navbar a:hover {
    color: #f8be12;
}

#content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    top: 100px;
}
#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -250px;
}

@media (min-width: 992px) {
    #wrapper {
        padding-left: 250px;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 60px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #wrapper {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
@media (max-width: 767px) {
    #wrapper {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}

const $button = document.querySelector("#sidebar-toggle");
const $wrapper = document.querySelector("#wrapper");
$button.addEventListener("click", (e) => {
    e.preventDefault();
    $wrapper.classList.toggle("toggled");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
    padding-bottom: 30px;
    position: relative;
    min-height: 100%;
}
a {
    transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
    text-decoration: none;
}
#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
    position: relative;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #222;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}
.sidebar-brand {
    position: absolute;
    top: 0;
    width: 250px;
    text-align: center;
    padding: 20px 0;
}
.sidebar-brand h2 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}
.sidebar-nav {
    position: absolute;
    top: 75px;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav > li {
    text-indent: 10px;
    line-height: 42px;
}
.sidebar-nav > li a {
    display: block;
    text-decoration: none;
    color: #757575;
    font-weight: 600;
    font-size: 18px;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li.active > a {
    text-decoration: none;
    color: #fff;
    background: #f8be12;
}
.sidebar-nav > li > a i.fa {
    font-size: 24px;
    width: 60px;
}
#navbar-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -250px;
}
#navbar-wrapper .navbar {
    border-width: 0 0 0 0;
    background-color: #eee;
    font-size: 24px;
    margin-bottom: 0;
    border-radius: 0;
}
#navbar-wrapper .navbar a {
    color: #757575;
}
#navbar-wrapper .navbar a:hover {
    color: #f8be12;
}

#content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    top: 100px;
}
#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -250px;
}

@media (min-width: 992px) {
    #wrapper {
        padding-left: 250px;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -190px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 60px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 60px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #wrapper {
        padding-left: 60px;
    }
    #sidebar-wrapper {
        width: 60px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
@media (max-width: 767px) {
    #wrapper {
        padding-left: 0;
    }
    #sidebar-wrapper {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
    #navbar-wrapper {
        position: relative;
    }
    #wrapper.toggled {
        padding-left: 250px;
    }
    #content-wrapper {
        position: relative;
        top: 0;
    }
    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}
</style>

</head>
<body>
<div id="wrapper">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <h2>Logo</h2>
        </div>
        <ul class="sidebar-nav">
            <li class="active">
                <a href="#"><i class="fa fa-home"></i>Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-plug"></i>Plugins</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-user"></i>Users</a>
            </li>
        </ul>
    </aside>

    <div id="navbar-wrapper">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand" id="sidebar-toggle"><i class="fa fa-bars"></i></a>
                </div>
            </div>
        </nav>
    </div>

    <section id="content-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="content-title">Test</h2>
                <p>
                    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.
                </p>
            </div>
        </div>
    </section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const $button = document.querySelector("#sidebar-toggle");
const $wrapper = document.querySelector("#wrapper");
$button.addEventListener("click", (e) => {
    e.preventDefault();
    $wrapper.classList.toggle("toggled");
});
</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