Responsive Navigation Bar using html , css and jquery || Responsive header

Responsive Navigation Bar View

Navigation Bar View For Mobile Screen

View when you click on the Menu Bar Icon

Hello Readers ,

Today you will learn how to create a Responsive Navigation Bar using html ,css and Jquery.

What is in this ?

- Responsive behaviour(Adjust according to the size of the screen ) .

- Menu bar animation when you click on menu bar it change form three bar to two bar that cross each other.

- When you click on Menu bar the menu come from the left side and the menu items come one by one .

Need of the Responsive Navigation Bar

In the past few year the use of the smartphone has grow rapidly .By the end of the 2016 ,the mobile web usage overtaken the desktop for the first time which just show how people browse on smartphone.

where use Jquery in the code ?

we use jquery for the menu icon when you click on the menu icon middle bar become disappear and remaining two bar cross each other . And a cool and beautiful animated menu come from the left of the code.

we also add a delay to the menu item so they come one by one .

Video Tutorial for the above Design:

HTML FILE

  <!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation || Coding Zone</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="header">

        <div class="logo">

             <img src="logo.jpg">

        </div>

        <div class="menu-wrapper">

            <div class="menu">
                         
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>

            </div>


        </div>

        <div id="bar-animation">

                    <span></span>             
         </div>

    </div>


</body>
</html>

JQUERY FILE

  <!DOCTYPE html>

  <script>
   
            $(document).ready(function(){
   
             $("#bar-animation").click(function(){

                $(this).toggleClass("active-bar");
                $(".menu-wrapper").toggleClass("full-Width");
                $(".menu").toggleClass("startComeIn");
                  
             });

            });


    </script>

CSS FILE

  @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{

    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body{

    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(fantasy.jpg);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: cover;
    font-family: 'Poppins', sans-serif;
}


.header{

    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #3498db;
    position: fixed;
    width: 100%;
    height: 100px;
    border-radius: 0 0 20% 10%;
    box-shadow: 0px 2px 4px #E6E7E8;
}

.header .logo{

    height: 60px;
    width: 60px;
    margin-left: 20px;
}

.header .logo img{

    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.header .menu{

    margin-right: 30px;
}

.header .menu ul li{

    display: inline-block;
}
.header .menu ul li a{

    color: #E6E7E8;
    padding: 10px 20px;

}

.header .menu ul li a:hover{

    border-bottom: 2px solid #E6E7E8;
    border-radius: 20px;

}

.header #bar-animation{

    position: relative;
    height: 20px;
    width: 20px;
    margin-right: 20px;
    cursor: pointer;
    display: none;
}

.header #bar-animation span{

    position: absolute;
    height: 2px;
    width: 100%;
    background-color: white;

}

.header #bar-animation span::before{

    content: '';
    position: absolute;
    height: 2px;
    width: 70%;
    right: 0;
    background-color: white;
    margin-top: 50%;
    transform: translateY(-50%);
    

}

.header #bar-animation span::after{

    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    right: 0;
    background-color: white;
    margin-top: 100%;
    

}

#bar-animation.active-bar span::before{

    transition: 1s;
    opacity: 0;

}

#bar-animation.active-bar span{

    transition: 1s;
    transform: translateY(13px) rotate(45deg);
}


#bar-animation.active-bar span::after{

    transition: 1s;
    transform: translateY(-20px)  rotate(-90deg);

}

.menu-wrapper.full-Width{
    transition: 0.5s;
    left: 0;
}


@media(max-width:726px){

    body{

        background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(marriage.jpg);
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
        background-size: cover;
        
    }

    .header #bar-animation{

        display: block;
    }

    .menu-wrapper{

        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        left: -150%;
        background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(marriage.jpg);
        background-repeat: no-repeat;
       
        background-size: cover;
        

    }

    .header .menu{

        position: absolute;
        margin-top: 100px;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
    }

    .menu ul li{

        position: relative;
        width: 100%;
        left: -100%;
        padding: 10px 20px;
       
    }


    .menu.startComeIn ul li:nth-child(1){

        animation: 1s comeIn;
        animation-fill-mode: forwards;

    }

    .menu.startComeIn ul li:nth-child(2){

        animation: 2s comeIn;
        animation-fill-mode: forwards;

    }

    .menu.startComeIn ul li:nth-child(3){

        animation: 3s comeIn;
        animation-fill-mode: forwards;

    }

    .menu.startComeIn ul li:nth-child(4){

        animation: 4s comeIn;
        animation-fill-mode: forwards;

    }


    
}

@keyframes comeIn{

    0%{
 
         left: -50%;

    }
    100%{

        left: 0;
    }
}

Thanks For Visiting ,Keep Visiting

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Navigation Bar using html , css and jquery || Responsive header

You might like

Post a Comment

Post a Comment

Contact Form