Bootstrap Snippet SIDE NAV by John niro yumang using HTML CSS Bootstrap 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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- I AM THE MAIN CONTAINER -->
<div class="container-fluid shadow-sm" id="global-top-nav">
    <!-- I AM THE SECOND MAIN CONTAINER -->
    <div class="container">
        <!-- I AM THE TOP NAV-BAR -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                        </button>
            <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰   </span>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand font-weight-light mx-4" href="index_controller/dashboard"> ADMIN</a>
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <!--<li class="nav-item">
                                <a class="nav-link disabled" href="users.html">USERS</a>
                            </li> -->
                </ul>
                welcome
                <span class="navbar-text mx-3">
                               username
                        </span>
                <span class="navbar-text">
                            <button type="button" class="btn btn-outline-light btn-sm" onclick="logout" data-toggle="tooltip" data-placement="top"  title="LOGOUT"><i class="fas fa-power-off fa-lg" style="color:red;"></i>
                          </button>
                        </span>
            </div>
        </nav>
    </div>
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 side Side Left navigation Hide/Show Navbar*/  
/*side nav code*/   
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color:#fff;
    overflow-x: scroll;
    transition: 0.8s;
  }
.sidenav a {
     text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover {
    color:#007bff;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 35px;
    font-size: 4rem;
    margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
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
// I AM THE SIDENAV BAR JAVA CODE
function openNav() {
     document.getElementById("global-side-nav").style.width = "25%";
 }
 function closeNav() {
     document.getElementById("global-side-nav").style.width = "0%";
 }
 
  
// I AM THE CLOCK IN THE BOTTOM NAVBAR
 function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SIDE NAV by John niro yumang"
Bootstrap 4.1.1 Snippet by jeanyu23

Related: See More

Questions / Comments:

"SIDE NAV by John niro yumang" Bootstrap 4.1.1 Snippet by jeanyu23

Related: See More

Questions / Comments:

"SIDE NAV by John niro yumang"
Bootstrap 4.1.1 Snippet by jeanyu23