Responsive Menu Using HTML and CSS with (source code)

Intro:

Welcome to the new exacting Topic of creating a responsive menu using HTML and CSS. This post will cover how to build a menu that adjusts to different screen sizes, making it accessible on all devices.

By the end of this blog Post, you will have a working menu that you can customize to fit your needs. We will also include the source code to reference and use in your projects. Let’s get started!

Recently I shared a complete source code of How to Make a Snake Game using HTML, CSS, and JavaScript. Please check this project.

What is a Responsive menu using HTML and CSS:

A responsive menu using HTML, CSS, and some common JavaScript is a menu that adjusts its layout and functionality based on the screen size of the device it is being viewed on. This allows the menu to be easily usable on different devices such as Desktop Computers, Tablets, and Smartphones.

It is built using HTML for the structure and CSS for the styling. The menu will typically use media queries in CSS to change the layout and display of the menu elements depending on the screen size. This allows the menu to be easy to navigate on smaller screens while still providing all the necessary options on larger screens.

How to Create a Responsive navigation menu using HTML and CSS step by step:

Here are the general steps to create a responsive navigation menu using HTML and CSS:

Start by creating the HTML structure for your menu. This typically includes a container element for the menu, such as a nav tag, and a series of a tags for the individual menu items.
Style the menu using CSS. This can include setting the font size and color, adding background colors or images, and positioning the menu items.

Use media queries to change the layout of the menu at different screen sizes. For Example, you can use a media query to change the font size of the menu items on smaller screens, or to change the display of the menu from a horizontal list to a vertical list on smaller screens.
Use JavaScript or jQuery to add any interactive functionality to the menu. This can include adding dropdown submenus or making the menu toggleable on smaller screens.
Test the menu on different devices and screen sizes to ensure it looks and functions as expected.

Optional: Use CSS Grid and Flexbox to make the layout more flexible and responsive

This is a general overview of the steps involved in creating a responsive navigation menu using HTML and CSS. The specific details of each step will depend on the design and functionality of your menu.

Source Code of Responsive menu bar using HTML, CSS and JS:

I always include the full source code with all my projects, so here is the code for the Responsive Menu Using HTML and CSS with (source code) that is built using HTML, CSS, and some common JavaScript code. You can simply copy and paste this code into your files to set up the Responsive menu and it will be ready to use.

HTML File

First Create an HTML file with a (.html) extension and copy the given code and paste in an HTML file.

<!DOCTYPE html>
<!-- Ceated by Coding Pakistan -->
<html lang="en">
<head>
  <title>Navbar - Html Css Javascript</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <header class="header">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="logo">
               <a href="#">logo</a>
            </div>
            <button type="button" class="nav-toggler">
               <span></span>
            </button>
            <nav class="nav">
               <ul>
                  <li><a href="#" class="active">home</a></li>
                  <li><a href="#">about</a></li>
                  <li><a href="#">services</a></li>
                  <li><a href="#">portfolio</a></li>
                  <li><a href="#">testimonials</a></li>
                  <li><a href="#">contact</a></li>
               </ul>
            </nav>
        </div>
    </div>
 </header>
<script src="script.js"></script>
</body>
</html>

CSS File

Create an CSS file with a (.css) extension and copy the given code and paste in an CSS file.

:root{
    --color-1: #2f3240;
}
body{
    font-family: sans-serif;
    background-color: #e8eef3;
}
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.container{
    max-width: 1170px;
    margin:auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.align-items-center{
    align-items: center;
}
.justify-content-between{
    justify-content: space-between;
}
/*header*/
.header{
    background-color: var(--color-1);
    padding: 12px 0;
    line-height: 1.5;
}
.header .logo,
.header .nav{
    padding:0 15px;
}
.header .logo a{
    font-size: 30px;
    color: #ffffff;
    text-transform: capitalize;
}
.header .nav ul li{
    display: inline-block;
    margin-left: 40px;
}
.header .nav ul li a{
    display: block;
    font-size: 16px;
    text-transform: capitalize;
    color: #ffffff;
    padding: 10px 0;
    transition: all 0.5s ease;
}
.header .nav ul li a.active,
.header .nav ul li a:hover{
    color: #f3a93d;
}
.nav-toggler{
    height: 34px;
    width: 44px;
    background-color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    border:none;
    display: none;
    margin-right: 15px;
}
.nav-toggler:focus{
    outline: none;
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}
.nav-toggler span{
    height: 2px;
    width: 20px;
    background-color: var(--color-1);
    display: block;
    margin:auto;
    position: relative;
    transition: all 0.3s ease;
}
.nav-toggler.active span{
    background-color: transparent;
}
.nav-toggler span::before,
.nav-toggler span::after{
    content: '';
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: var(--color-1);
    transition: all 0.3s ease;
}
.nav-toggler span::before{
    transform: translateY(-6px);
}
.nav-toggler.active span::before{
    transform: rotate(45deg);
}
.nav-toggler span::after{
    transform: translateY(6px);
}
.nav-toggler.active span::after{
    transform: rotate(135deg);
}
@media(max-width:991px){
   .nav-toggler{
    display: block;
   }
   .header .nav{
    width: 100%;
    padding:0;
    max-height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.5s ease;
   }
   .header .nav.open{
    visibility: visible;
   }
   .header .nav ul{
    padding:12px 15px 0;
    margin-top: 12px;
    border-top:1px solid rgba(255,255,255,0.2);
   }
   .header .nav ul li{
    display: block;
    margin:0;
   }
}

JavaScript File

Create an JavaScript file with a (.js) extension and copy the given code and paste in an Script file.

 const navToggler = document.querySelector(".nav-toggler");
 navToggler.addEventListener("click", navToggle);
 function navToggle() {
    navToggler.classList.toggle("active");
    const nav = document.querySelector(".nav");
    nav.classList.toggle("open");
    if(nav.classList.contains("open")){
      nav.style.maxHeight = nav.scrollHeight + "px";
    }
    else{
      nav.removeAttribute("style");
    }
 }

Download Source Code

If your Code not working work correctly any technical problem so please download the code files and extract them and use them accordingly to your requirements.

Conclusion:

In conclusion, creating a responsive menu using HTML and CSS is a great way to ensure that your website’s navigation is easily accessible on all devices. By using HTML to create the structure of the menu and CSS to control the styling, you can create a menu that is both functional and visually appealing.

With the help of media queries, you can change the layout of the menu at different screen sizes, making it easy to use on both large and small screens.

The source code provided in this Blog Post serves as a useful reference, so you can customize it to fit your own needs and preferences. With a little bit of practice, you’ll be able to create professional-looking responsive menus that are easy to navigate.