Create a responsive navigation bar with a dropdown menu using HTML,CSS and JS

In this tutorial, we can use HTML,CSS and JavaScript. HTML: This provide the structure for navigation bar with a few main menu items and a dropdown submenu. CSS: Style the navigation bar to be responsive and visually appealing. JavaScript: Implement the functionality to toggle the dropdown menu on click or hover.

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <body>
     <nav class="navbar">
      <div class="logo">MySite</div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropbtn">Services</a>
          <ul class="dropdown-content">
              <li><a href="#">Web Development</a></li>
              <li><a href="#">SEO</a></li>
              <li><a href= "#">Marketing</a></li>
          </ul>
        </li>
         <li><a href="#">Contact</a></li>
    </ul>
     <div class="hamburger" id="hamburger">☰</div>
    </nav>
   <script src="script.js"></script>
   </body>
  </html>

Let us go through each elemet to understand the concept.

<nav class=”navbar”>: This is the container for the navigation bar. The Class=”navbar” is used to apply specific style define in CSS.
<div class”logo”>MySite</div>: This section define the logo of the website.
<ul class=”nav-links”>: This unorderlist contains the navigation links.Each links is a list item<li> with an anchor tag<a>.It will used for styling the links collectively.
Dropdown Menu:
1. <li class=”dropdown”>: This list item act as a parent for the dropdown menu.
2.<a href=”#” class=”dropbtn”>Services</a>: This is the main link that triggers the dropdown.
3.<ul class=”dropdown-content”>: This nested unordered list contains the actual dropdown links.
Hamburger icon:
<div class=”hamburger” id=”hamburger”>☰</div>: This div contains the hamburger icon (☰ is the unicode for the “hamburger” menu symbol).

CSS Code:

body{
     font-family: Ariel, sans-serif;
     margin:0;
     padding:0;
}
 .navbar{
      background-color:#333;
      overflow:hidden;
      position:fixed;
      width:100%;
      top:0;
}
  .navbar .logo{
        display:inline-block;
        color: white;
        font-size: 24px;
        padding: 14px 20px;
}
   .navbar .nav-link{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        float: right;
}
  .navbar .navlink li {
        position: relative;
}
    .navbar .nav-link li a {
           color:white;
           padding: 14px 20px;
           text-decoration:none;
           display: block;
}
 .navbar .nav-link li a:hover{
     background-color:#575757;
}
  .navbar .dropdown .dropdown-content{
     display;none;
     position:absolute;
     background-color:#333;
     min-width: 160px;
     z-index: 1;
}
  .navbar .dropdown .dropdown-content li a{
        padding: 10px 20px;
}
  .navbar .dropdown:hover .dropdown-content{
     display: block;
}
  .hambuger{
      display: none;
      font-size: 28px;
      color: white;
      padding: 14px 20px;
      cursor: pointer;
      float: right;
}

 @media screen and (max-width: 768px){
   .navbar .nav-links{
       display:none;
       flex-direction: column;
       width: 100%;
       background-color: #333;
}

  .navbar .nav-links li{
     text-align: centre;
  }
    .navbar .nav-links.show{
        display: flex;
}
  .hamburger{
       display: block;
}
}

Let us go through each element to understand the concept.

General Styles:

body: Sets global font family, removes margin and padding, and applies other default styling across the page.
navabar: Style the navigatio bar, including background color, padding and positioning.

Logo and Links:

Logo: It ensure that logo is prominently displayed on the left side of the navbar.
nav-links: Arranges the list of links horizontally using Flexbox.
‘a’ elements: Anchor tag are styled to look like buttons, with padding, background color on hover, and no text decoration.

Dropdown Menu:

dropdown-content: Initially hidden , positioned absolutely so it appears below the “service” button when shown. Styled with background color, padding and positionig to appear as a submenu.
:hover pseudo-class: Trigger the visibility of the dropdown content when the user hover over the “services” link.

JavaScript Code:

document.getElemetById('hamburger').addEventListener('click',function(){
  const navLinks = document.querySelector('.nav-links');
   navlinks.classList.toggle('show');
});

Let us go through each concept to uderstand:

Hamburger Menu Toggle:

The script listens for a click event on the hamburger icon.
When clicked, it toggles the visibility of the navigation link by adding and removing a class show .This is done using the classList.toggle(‘show’) method.
querySelector(‘ .nav-links’): select the navigation links to toggle their visibility.

Output:

When you run this above code on your browser
1. on large screen, the navigation bar will display horizontally, with a dropdown menu
   appearing when you hover over"services".
2.On smaller screen like mobile, the navigation bar collapse into a hamburger menu.
  when clicked, the menu expands vertically, revealing the liks.

HTML Code:

CSS Code:

JavaScript Code:

Related Posts

Leave a Comment Cancel Reply