Create Responsive Navigation Bar Using HTML, CSS, and JavaScript.

In this article you'll learn how to create a responsive navigation bar using HTML, CSS, and JavaScript. To make the navigation bar responsive I've used CSS media query. By the end of this tutorial, you'll be able to create a navigation bar that could looks great on almost all device.

You may have seen navigation in many websites, that use to navigate the site and shows services and options, the website offers.

Credit :

Close icons created by Freepik - Flaticon
Open menu icons created by Freepik - Flaticon

Navigation menu on website is now a days neccessary to add. By adding, it easy for user to navigate site. (good navigation menu improve the user experience).

This navigation is responsive, adjust it size automatically according to screen sizes. Have a hover effects on list items. when user hover on items or options, a blue coloured underline appears which width increase from left to right. For show and hide the navigation menu on small screen size I've used JavaScript.

Video Tutorial on responsive Navigation Menu Using HTML, CSS & JavaScript.

You may like:

Final code:

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="container">
        <div class="navbar">
            <h1><a href="#">MakeTechStuff</a></h1>

            <nav class="navbar_items">
                <img src="image/cancel.png" class="close_button">
                <ul>
                    <li><a href="#">Home</a><span></span></li>
                    <li><a href="#">Services</a><span></span></li>
                    <li><a href="#">About</a><span></span></li>
                    <li><a href="#">Contact</a><span></span></li>
                </ul>
            </nav>
            <img src="image/menu.png" class="open_button">


        </div>
    </div>

</body>
</html>

CSS


*{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg , #ce5491 , #03089a);
}
.container .navbar{
    position: fixed;
    background-color: #fff;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 80px;
}
.navbar h1 a{
    font-size: 40px;
    color: #000;
    text-decoration: none;
}

.navbar_items .close_button{
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 4px;
    margin: 20px;
    float: right;
    display: none;
}
.navbar .open_button{
    width: 40px;
    height: 40px;
    padding: 4px;
    cursor: pointer;
    display: none;

}
.navbar .navbar_items ul{
    display: flex;
}
.navbar .navbar_items ul li{
    margin: 0px 15px;
    list-style: none;
    position: relative;
}
.navbar .navbar_items ul li span{
    position: absolute;
    width: 0%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: blue;
    transition: 0.2s;
}
.navbar .navbar_items ul li:hover span{
    width: 100%;
}
.navbar .navbar_items ul li a{
    font-size: 30px;
    text-decoration: none;
    color: #000;
    display: block;
    padding: 10px;
}
@media (max-width: 1024px){
    .container .navbar{
        padding: 10px 50px;
    }
    .navbar h1 a{
        font-size: 35px;
    }
    .navbar .navbar_items ul li a{
        font-size: 28px;
    }
}

@media (max-width: 920px){
    .navbar .navbar_items{
        position: absolute;
        width: 250px;
        height: 100vh;
        background-color: #fff;
        top: 0;
        right: -500px;
        transition: 0.2s;
    }
    .navbar_items .close_button , .navbar .open_button{
        display: block;
    }
    .navbar .navbar_items ul{
        display: block;
        padding-top: 80px;
    }
    .navbar .navbar_items ul li{
        margin: 0px 100px 20px 10px;
    }
}

@media (max-width: 600px){
    .container .navbar{
        padding: 10px 40px;
    }
    .navbar h1 a{
        font-size: 30px;
    }
    .navbar_items .close_button{
        width: 25px;
        height: 25px;
    }
    .navbar .open_button{
        width: 35px;
        height: 35px;
    }
    .navbar .navbar_items{
        width: 200px;
    }
    .navbar .navbar_items ul li{
        margin: 0px 70px 20px 10px;
    }
    .navbar .navbar_items ul li a{
        font-size: 25px;
    }
}

@media (max-width: 480px){
    .container .navbar{
        padding: 10px 20px;
    }
    .navbar h1 a{
        font-size: 30px;
    }
    .navbar .navbar_items{
        width: 200px;
    }

}

@media (max-width: 320px){
    .container .navbar{
        padding: 6px 16px;
    }
    .navbar h1 a{
        font-size: 20px;
    }
    .navbar_items .close_button{
        width: 20px;
        height: 20px;
    }
    .navbar .open_button{
        width: 30px;
        height: 30px;
    }
    .navbar .navbar_items{
        width: 100%;
    }
    .navbar .navbar_items ul{
        text-align: center;
    }
    .navbar .navbar_items ul li{
        margin: 0px 40px 20px 40px;
    }
}

JavaScript


    let open_button = document.querySelector(".open_button");
    let close_button = document.querySelector(".close_button");
    let navbar_items = document.querySelector(".navbar_items");

    open_button.onclick = function(){
        navbar_items.style.right = "0px";
    }
    close_button.onclick = function(){
        navbar_items.style.right = "-500px";
    }

So that's how you can create responsive navigation using HTML, CSS and JavaScript. If you have any query or suggestions you can write them in below comment section.

Create Responsive Navigation Bar Using HTML, CSS, and JavaScript.

Video Tutorial on responsive Navigation Menu Using HTML, CSS & JavaScript.

You may like:

Post a Comment

Contact form

Create Responsive Navigation Bar Using HTML, CSS, and JavaScript.

Video Tutorial on responsive Navigation Menu Using HTML, CSS & JavaScript.

You may like:

You may like these posts

Post a Comment

Contact form