Bootstrap Snippet Bootstrap 4 Hover-toggle Sidebar using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">
        <a class="navbar-brand" href="#">BS <strong>Hover Sidebar</strong></a>
        <br class="hidden-lg-up">
        <br class="hidden-lg-up">
        <ul class="nav navbar-nav hidden-lg-up">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about" title="Go to About Us section">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#resume" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#skills" title="Navigate to 'Our Services' section">Skills</a>
            </li>
        </ul>
        <ul class="nav navbar-nav hidden-md-down float-lg-right">
            <li class="nav-item">
                <button id="menu-toggle" href="#" class="navbar-toggler float-lg-right toggle" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation"></button>
            </li>
        </ul>
        <form class="form-inline float-lg-right">
            <input class="form-control" type="text" placeholder="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        <nav id="sidebar-wrapper" class="navbar-dark bg-primary">
            <ul class="sidebar-nav">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Global Styles */
*, *:before, *:after{
         -webkit-box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
                 box-sizing: border-box !important;
}
body{
    width: 100%;
    height: 100%;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow-x:hidden;
    margin-top:55px;
}
html{
    width: 100%;
    height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
}
section{
    padding-bottom:5%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function()
{
    
    // Closes the sidebar menu on menu-close button click event
    $("#menu-close").click(function(e)                          //declare the element event ...'(e)' = event (shorthand)
    {
                                                                // - will not work otherwise")
        $("#sidebar-wrapper").toggleClass("active");            //instead on click event toggle active CSS element
        e.preventDefault();                                     //prevent the default action ("Do not remove as the code
        
        /*!
        ======================= Notes ===============================
        * see: .sidebar-wrapper.active in: style.css
        ==================== END Notes ==============================
        */
    });                                                         //Close 'function()'
    // Open the Sidebar-wrapper on Hover
    $("#menu-toggle").hover(function(e)                         //declare the element event ...'(e)' = event (shorthand)
    {
        $("#sidebar-wrapper").toggleClass("active",true);       //instead on click event toggle active CSS element
        e.preventDefault();                                     //prevent the default action ("Do not remove as the code
    });
    $("#menu-toggle").bind('click',function(e)                  //declare the element event ...'(e)' = event (shorthand)
    {
        $("#sidebar-wrapper").toggleClass("active",true);       //instead on click event toggle active CSS element
        e.preventDefault();                                     //prevent the default action ("Do not remove as the code
    });                                                         //Close 'function()'
    $('#sidebar-wrapper').mouseleave(function(e)                //declare the jQuery: mouseleave() event 
                                                                // - see: ('//api.jquery.com/mouseleave/' for details)
    {
        /*! .toggleClass( className, state ) */
        $('#sidebar-wrapper').toggleClass('active',false);      /* toggleClass: Add or remove one or more classes from each element
                                                                in the set of matched elements, depending on either the class's
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Hover-toggle Sidebar"
Bootstrap 4.0.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Bootstrap 4 Hover-toggle Sidebar" Bootstrap 4.0.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Bootstrap 4 Hover-toggle Sidebar"
Bootstrap 4.0.0 Snippet by blayderunner123