Responsive Mobile Navigation Menu

Published by StudyMuch on August 19, 2023August 19, 2023

Responsive Mobile Navigation Menu using HTML, CSS and JavaScript

In today’s digital landscape, it is important to have a Responsive Navigation Menu to provide a seamless user experience across different devices. In this tutorial, we’ll take you through the process of creating a stylish and functional mobile navigation menu using HTML, CSS, and JavaScript. By the end of this guide, you’ll have a mobile-friendly navigation menu that adapts gracefully to different screen sizes.

Prerequisites

Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. We’ll be using these techniques to build our mobile navigation menu.

Let’s get straight into it and start building your mobile navigation menu step by step.

HTML Structure;

Here is the full HTML Structure to creating the Responsive Mobile Navigation Menu;

<!DOCTYPE html>
<html lang="en">
<!-- Created and Designed By (StudyMuch Edutech) -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DropDown Navigation Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <header>
    <!-- Navigation Bar-->
   <nav>
     <div class="logo">
     <a href="#">StudyMuch</a>
     </div>
     
     <div class="menu">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
      </div>

     <!-- Toggle Mobile Button......... -->
     <div class="menu-btn">
      <span></span>
      <span></span>
      <span></span>
      </div>
        </nav>
    </header>
</body>
</html>

Here’s a breakdown of the key components in the HTML code:

<!DOCTYPE html>: This declares the document type and version of HTML being used.
<html lang=”en”>: The root element of the HTML document, specifying the language of the content.
<head>: Contains meta information and external resources used in the document.
<meta charset=”UTF-8″>: Specifies the character encoding for the document.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Sets the initial viewport scale and width for responsive design.
<title>Mobile Navigation Menu</title>: Sets the title of the web page displayed in the browser tab.
<link rel=”stylesheet” href=”style.css”>: Links to an external stylesheet (CSS) for styling.
<body>: The main content of the web page.
<header>: Defines the header section of the page.
<nav>: Contains the navigation bar.
<div class=”logo”>: Contains the website logo.
<a href=”#”>StudyMuch</a>: A link displaying the logo or website name.
<div class=”menu”>: Contains the navigation menu items.
<ul>: Unordered list of menu items.
<li><a href=”#”>Home</a></li>: Each list item contains a link representing a menu item. You can replicate this structure for other menu items.
<div class=”menu-btn”>: This is the toggle button for the mobile menu.
<span></span>: Three empty spans that will create the “hamburger” icon when styled with CSS.
<script src=”script.js”></script>: Links to an external JavaScript file (script.js) for handling the mobile menu toggle functionality.

By following this HTML structure, you’ve set up the foundation for your mobile navigation menu. The associated CSS and JavaScript code will add styling and interactivity to create a fully functional and visually appealing mobile navigation menu.

CSS Styling (style.css)

Here is given the CSS Style, to make attractive the Navigation Menu, this CSS is only Desktop view, Mobile and Responsive Media Query is Given below after this.

/* Navigation Menu Style for all */
body {
  margin: 0;
  padding: 0; }

header {
  position: fixed;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 5px; }

nav {
  display: flex;
  justify-content: space-between; }

.logo{
  padding: 10px 5px; }
.logo a {
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  color: rgb(0, 152, 253);
  font-family: 'Acme', sans-serif; }

.menu ul {
  display: flex;
  list-style: none; }
.menu li {
  padding:15px 5px ; }

.menu a {
  text-decoration: none;
  color: rgb(0, 133, 243);
  font-size: 18px;
  font-weight: bold;
  margin: 2px;
  padding: 5px 20px;
  border-radius: 20px;
  font-family: 'Acme', sans-serif;}

.menu a:hover{
  background-color: white;
  transition: all 0.5s ease-in-out; }

Mobile View Media Query Styling (style.css)

Here is the code of Mobile Navigation Menu and Media Query CSS Style that make Navigation Responsive on both devices Mobile and Desktop.

/* Movile View Media Query CSS Style  */
@media only screen and (max-width: 768px) {
  .menu li {
    margin: 0;
    text-align: center;
  }
  .menu ul {
    display: block;
    margin-top: 0;
    list-style: none;
  }
  .logo{ padding: 0; }
  header { padding: 15px; }
  .menu-btn {
    display: white;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
  }
  .menu-btn span {
    display: block;
    width: 30px;
    height: 4px;
    margin-bottom: 5px;
    background: rgb(0, 157, 255);
    border-radius: 3px;
    transition: transform 0.3s ease-in-out;
  }
  .menu-btn.open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg); }
  .menu-btn.open span:nth-child(2) {
      opacity: 0;  }
  .menu-btn.open span:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);  }
  .menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    height: 100%;
    background: #d6d6d6;
    z-index: 9998;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(10%);
    transition: right 0.5s ease-in-out;
  }
  .menu.open {
    display: block;
    right: 0;
    transform: translateX(0);
  }
 .menu ul {
    list-style: none;
    padding: 0;
    padding-top: 20px;
  }
  .menu li {
    margin: 0;
    padding: 0;
  }
  .menu a {
    display: block;
    padding:  5px 10px;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.5s ease-in-out;
  }
  .menu a:hover {
    background-color: rgb(0, 157, 255);
    color:white;
  }
}

JavaScript (script.js)

Here is the main part of this Mobile Navigation Menu, don’t forget to add this JavaScript code, without this JS code you can’t make responsive Mobile Navigation Menu.

<!-- JavaScript for Mobile toggle Button -->
 <script>
  const menuBtn = document.querySelector('.menu-btn');
  const menu = document.querySelector('.menu');
    menuBtn.addEventListener('click', () => {
      menuBtn.classList.toggle('open');
      menu.classList.toggle('open');
        });
 </script>

Conclusion;

In this tutorial, we have taken you through the process of building a responsive mobile navigation menu using HTML, CSS, and JavaScript. By following these steps, you will be able to provide users with a smooth navigation experience on both desktop and mobile devices. Feel free to customize the styles and design to match the aesthetic of your website.

Remember that responsive design is essential to providing a positive user experience, so always test your mobile navigation menu on different devices and screen sizes to make sure it works as expected. Happy Coding!

Learn More;

Responsive Mobile Navigation Menu

Related

0 Comments

Leave a Reply Cancel reply

Diwali Wishing Template Program

Animated Border Image Card

Best Birthday Wishes Template

Responsive Mobile Navigation Menu

Related

0 Comments

Leave a Reply Cancel reply

Related Posts

Diwali Wishing Template Program

Animated Border Image Card

Best Birthday Wishes Template