Frontend Free Code
Frontend Free Code
Developers Codes
Javascript Codes
HTML Codes
CSS Codes
PHP Codes
Home Home How to How to use Sitemap Sitemap About us About Us

Feel The Power


content logo
Bootstrap Headers: Vertical Bootstrap Header with Animation
Previous Code Next Code

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
RECENT CODES
Bootstrap Table with Sorting Animation
Bootstrap Table with Col and Row Effect on Hover
Bootstrap Table with Fixed Header
Bootstrap Collapsing / Expanding Table
Bootstrap Pricing Table with Fade Effect
Bootstrap Header with Hover Effect
Bootstrap Dynamic Header with Style Change
Bootstrap Header with Material Effect for Tabs
Animating Bootstrap 4 Navbar
Vertical Bootstrap Header with Animation
CATEGORIES
Bootstrap Search Boxes
Bootstrap Tabs
Bootstrap Grids
Bootstrap Forms
Bootstrap Headers
Bootstrap Tables
FIND US
Twitter LinkedIn YouTube
LINK US
download Link to us:
Site Logo
Please put this code in your page.
Frontend Free Code
© 2021 Kerixa Inc