Responsive Top Navigation Menu

Introduction

A responsive top navigation menu is a navigation menu that adapts to different screen sizes and devices. It is usually located at the top of the website and provides users with a way to navigate through different pages of the website. A responsive top navigation menu is essential because it allows users to access the website’s content on different devices, such as desktops, tablets, and mobile phones.

Creating a responsive top navigation menu involves using HTML, CSS, and JavaScript. HTML is used to create the structure of the menu, CSS is used to style the menu and make it responsive, and JavaScript is used to add functionality to the menu, such as opening and closing the menu on smaller screens.

A responsive top navigation menu usually includes a logo or website name, links to different pages of the website, and a hamburger icon that opens and closes the menu on smaller screens. The menu can be designed to be vertical or horizontal, and it can be fixed or sticky, depending on the website’s design and requirements.

Overall, a responsive top navigation menu is a critical component of a website’s design and can greatly enhance the user experience by providing easy access to the website’s content on different devices.

To create a responsive top navigation menu, you can follow these steps:

  1. Create HTML structure for the navigation menu
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container container">
            <input type="checkbox" name="" id="">
            <div class="hamburger-lines">
                <span class="line line1"></span>
                <span class="line line2"></span>
                <span class="line line3"></span>
            </div>
            <ul class="menu-items">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Category</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Testimonial</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <h1 class="logo">AZ codinghub</h1>
        </div>
    </nav>
</body>
</html>

In this code, we have created a <nav> element that contains a <div> element for the website logo, an unordered list of navigation links, and a burger icon for smaller screens.

2.Style the navigation menu using CSS

 <style>*,
*::after,
*::before{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.html{
    font-size: 62.5%;
}
.navbar input[type="checkbox"],
.navbar .hamburger-lines{
    display: none;
}
.container{
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
.navbar{
    box-shadow: 0px 5px 10px 0px #aaa;
    position: fixed;
    width: 100%;
    background: #fff;
    color: #000;
    opacity: 0.85;
    z-index: 100;
}
.navbar-container{
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;
}
.menu-items{
    order: 2;
    display: flex;
}
.logo{
    order: 1;
    font-size: 2.3rem;
}
.menu-items li{
    list-style: none;
    margin-left: 1.5rem;
    font-size: 1.3rem;
}
.navbar a{
    color: #444;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}
.navbar a:hover{
    color: #117964;
}
@media (max-width: 768px){
    .navbar{
        opacity: 0.95;
    }
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
    }
    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
    }
    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }
    .navbar-container .hamburger-lines{
        display: block;
        height: 28px;
        width: 35px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #333;
    }
    
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }
    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }
    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }
    .navbar .menu-items{
        padding-top: 100px;
        background: #fff;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
        box-shadow:  5px 0px 10px 0px #aaa;
        overflow: scroll;
    }
    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }
    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 2.5rem;
    }
    .navbar-container input[type="checkbox"]:checked ~ .menu-items{
        transform: translateX(0);
    }
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
        transform: rotate(45deg);
    }
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
        transform: scaleY(0);
    }
    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
        transform: rotate(-45deg);
    }
}
@media (max-width: 500px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
    }
}</style>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top