content logo
Bootstrap Headers: Vertical Bootstrap Header with Animation

Using headers is essential on any site. You can use animated headers to further enhance your website. Like the following code, which normally only one hamburger menu is visible, and when we click on it, the menu is displayed vertically with the animation. So the background of this menu is black when it is displayed, and the hamburger button is closed. It changes.

#Animating Navbar Code # Bootstrap Navbar Animation # Bootstrap Dynamic Navbar
<!-- this script got from www.frontendfreecode.com -->
<header class="head-main"> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <strong>DiNeuron</strong> </a> <a class="nav-button ml-auto mr-4"><span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a> </div> </div> <!--navbar end--> <div class="fixed-top dineuron-menu"> <div class="flex-center p-5"> <ul class="nav flex-column"> <li class="nav-item delay-1"><a class="nav-link" href="#">HOME</a></li> <li class="nav-item delay-2"><a class="nav-link" href="#">ABOUT US</a></li> <li class="nav-item delay-3"><a class="nav-link" href="#">PRODUCTS</a></li> <li class="nav-item delay-4"><a class="nav-link" href="#">APPLICATIONS</a></li> <li class="nav-item delay-5"><a class="nav-link" href="#">FACILITIES</a></li> <li class="nav-item delay-6"><a class="nav-link" href="#">QUALITY</a></li> <li class="nav-item delay-7"><a class="nav-link" href="#">CAREER</a></li> <li class="nav-item delay-8"><a class="nav-link" href="#">CONTACT US</a></li> </ul> </div> </div> <!--dineuron-menu end--> </header> <main role="main" class="container"> <div class="jumbotron my-5"> <h1>Navbar example</h1> <p class="lead">If you want to implement this into your website, please visit link below, you will get full guideline.</p> <a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">Read</a> </div> </main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.dineuron-menu {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.nav-open .dineuron-menu {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.92);
}

.dineuron-menu .nav li a {
    color: #FFF;
    font-size: 5vh;
    font-weight: 600;
}

.dineuron-menu .nav li {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -o-animation-timing-function: cubic-bezier(.45,.005,0,1);
    animation-timing-function: cubic-bezier(.45,.005,0,1);
}

.nav-open .dineuron-menu .nav li {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform .2s,opacity .2s;
    transition: transform .2s,opacity .2s;
}

.dineuron-menu .nav li.delay-1 {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.dineuron-menu .nav li.delay-2 {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.dineuron-menu .nav li.delay-3 {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.dineuron-menu .nav li.delay-4 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.dineuron-menu .nav li.delay-5 {
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.dineuron-menu .nav li.delay-6 {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.dineuron-menu .nav li.delay-7 {
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.dineuron-menu .nav li.delay-8 {
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.dineuron-menu .nav li.delay-9 {
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.nav-button {
    position: relative;
    z-index: 1111;
    border: solid 1px #f8f8f8;
    height: 42px;
    display: block;
    width: 50px;
    padding: 12px;
}

    .nav-button #nav-icon3 {
        width: 24px;
        height: 22px;
        display: inline-block;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

        .nav-button #nav-icon3 span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: #FFFFFF;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out
        }

            .nav-button #nav-icon3 span:nth-child(1) {
                top: 0
            }

            .nav-button #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
                top: 7px
            }

            .nav-button #nav-icon3 span:nth-child(4) {
                top: 14px
            }

.nav-open #nav-icon3 span:nth-child(1) {
    top: 9px;
    width: 0;
    left: 50%
}

.nav-open #nav-icon3 span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav-open #nav-icon3 span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.nav-open #nav-icon3 span:nth-child(4) {
    top: 9px;
    width: 0;
    left: 50%
}

.flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}
$(document).ready(function () {
    $('.nav-button').click(function () {
        $('body').toggleClass('nav-open');
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.dineuron-menu {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.nav-open .dineuron-menu {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.92);
}

.dineuron-menu .nav li a {
    color: #FFF;
    font-size: 5vh;
    font-weight: 600;
}

.dineuron-menu .nav li {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -o-animation-timing-function: cubic-bezier(.45,.005,0,1);
    animation-timing-function: cubic-bezier(.45,.005,0,1);
}

.nav-open .dineuron-menu .nav li {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform .2s,opacity .2s;
    transition: transform .2s,opacity .2s;
}

.dineuron-menu .nav li.delay-1 {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.dineuron-menu .nav li.delay-2 {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.dineuron-menu .nav li.delay-3 {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.dineuron-menu .nav li.delay-4 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.dineuron-menu .nav li.delay-5 {
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.dineuron-menu .nav li.delay-6 {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.dineuron-menu .nav li.delay-7 {
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.dineuron-menu .nav li.delay-8 {
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.dineuron-menu .nav li.delay-9 {
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.nav-button {
    position: relative;
    z-index: 1111;
    border: solid 1px #f8f8f8;
    height: 42px;
    display: block;
    width: 50px;
    padding: 12px;
}

    .nav-button #nav-icon3 {
        width: 24px;
        height: 22px;
        display: inline-block;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

        .nav-button #nav-icon3 span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: #FFFFFF;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out
        }

            .nav-button #nav-icon3 span:nth-child(1) {
                top: 0
            }

            .nav-button #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
                top: 7px
            }

            .nav-button #nav-icon3 span:nth-child(4) {
                top: 14px
            }

.nav-open #nav-icon3 span:nth-child(1) {
    top: 9px;
    width: 0;
    left: 50%
}

.nav-open #nav-icon3 span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav-open #nav-icon3 span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.nav-open #nav-icon3 span:nth-child(4) {
    top: 9px;
    width: 0;
    left: 50%
}

.flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}
</style>

</head>
<body>
<header class="head-main">
  <div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>DiNeuron</strong>
      </a>
      <a class="nav-button ml-auto mr-4"><span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a>
    </div>
  </div> <!--navbar end-->
  
  <div class="fixed-top dineuron-menu">
    <div class="flex-center p-5">
      <ul class="nav flex-column">
        <li class="nav-item delay-1"><a class="nav-link" href="#">HOME</a></li>
        <li class="nav-item delay-2"><a class="nav-link" href="#">ABOUT US</a></li>
        <li class="nav-item delay-3"><a class="nav-link" href="#">PRODUCTS</a></li>
        <li class="nav-item delay-4"><a class="nav-link" href="#">APPLICATIONS</a></li>
        <li class="nav-item delay-5"><a class="nav-link" href="#">FACILITIES</a></li>
        <li class="nav-item delay-6"><a class="nav-link" href="#">QUALITY</a></li>
        <li class="nav-item delay-7"><a class="nav-link" href="#">CAREER</a></li>
        <li class="nav-item delay-8"><a class="nav-link" href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div> <!--dineuron-menu end-->
</header>

<main role="main" class="container">
  <div class="jumbotron my-5">
    <h1>Navbar example</h1>
    <p class="lead">If you want to implement this into your website, please visit link below, you will get full guideline.</p>
    <a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">Read</a>
  </div>
</main>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(document).ready(function () {
    $('.nav-button').click(function () {
        $('body').toggleClass('nav-open');
    });
});
</script>

</body>
</html>
Preview