Responsive Top Navigation Menu with dropdown

Introduction

A responsive top navigation menu with dropdown is a navigation menu that includes a dropdown menu that appears when the user hovers or clicks on a parent menu item. It is a common design pattern that is often used on websites that have a large number of pages or categories. The dropdown menu provides users with a way to navigate through subpages or subcategories without cluttering the main navigation menu.

Creating a responsive top navigation menu with dropdown 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 dropdown menu.

The HTML structure of a responsive top navigation menu with dropdown typically includes a list of parent menu items and a nested list of child menu items. The child menu items are hidden by default and are displayed when the user hovers or clicks on the parent menu item. For example:

HTML code





HTML output

The is the output of the Html

Next link the CSS to the html file you get output show below

<link rel="stylesheet" href="style.css">

CSS code

@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
    margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
}
 .navigation {
     height: 55px;
     background: linear-gradient(45deg, #ff0000, #74b4fe);
 }
 .brand {
     position: absolute;
     padding-left: 20px;
     float: left;
     line-height: 55px;
     text-transform: uppercase;
     font-size: 1.4em;
}
 .brand a, .brand a:visited {
     color: #ffffff;
     text-decoration: none;
}
 .nav-container {
     max-width: 1000px;
     margin: 0 auto;
}
 nav {
     float: right;
}
 nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 nav ul li {
     float: left;
     position: relative;
}
 nav ul li a,nav ul li a:visited {
     display: block;
     padding: 0 20px;
     line-height: 55px;
     color: #fff;
     background: #262626 ;
     text-decoration: none;
}
 nav ul li a{
     background: transparent;
     color: #FFF;
}
 nav ul li a:hover, nav ul li a:visited:hover {
     background: #2581DC;
     color: #ffffff;
}
 .navbar-dropdown li a{
     background: #2581DC;
}
 nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
     padding-left: 4px;
     content: ' \025BE';
}
 nav ul li ul li {
     min-width: 190px;
}
 nav ul li ul li a {
     padding: 15px;
     line-height: 20px;
}
 .navbar-dropdown {
     position: absolute;
     display: none;
     z-index: 1;
     background: #fff;
     box-shadow: 0 0 35px 0 rgba(0,0,0,0.25);
}
/* Mobile navigation */
 .nav-mobile {
     display: none;
     position: absolute;
     top: 0;
     right: 0;
     background: transparent;
     height: 55px;
     width: 70px;
}
 @media only screen and (max-width: 800px) {
     .nav-mobile {
         display: block;
    }
     nav {
         width: 100%;
         padding: 55px 0 15px;
    }
     nav ul {
         display: none;
    }
     nav ul li {
         float: none;
    }
     nav ul li a {
         padding: 15px;
         line-height: 20px;
         background: #262626;
    }
     nav ul li ul li a {
         padding-left: 30px;
    }
     .navbar-dropdown {
         position: static;
}
 @media screen and (min-width:800px) {
     .nav-list {
         display: block !important;
    }
}
 #navbar-toggle {
     position: absolute;
     left: 18px;
     top: 15px;
     cursor: pointer;
     padding: 10px 35px 16px 0px;
}
 #navbar-toggle span, #navbar-toggle span:before, #navbar-toggle span:after {
     cursor: pointer;
     border-radius: 1px;
     height: 3px;
     width: 30px;
     background: #ffffff;
     position: absolute;
     display: block;
     content: '';
     transition: all 300ms ease-in-out;
}
 #navbar-toggle span:before {
     top: -10px;
}
 #navbar-toggle span:after {
     bottom: -10px;
}
 #navbar-toggle.active span {
     background-color: transparent;
}
 #navbar-toggle.active span:before, #navbar-toggle.active span:after {
     top: 0;
}
 #navbar-toggle.active span:before {
     transform: rotate(45deg);
}
 #navbar-toggle.active span:after {
     transform: rotate(-45deg);
}
}
Output after adding the CSS to the HTML

To work the Toggle Buttons you use the Java Script (JS)

to Connect the Java Script to the html just add below code above the </body>


  <script src="javascript.js "></script>
   (function($) { 
    $(function() { 
  
      //  open and close nav 
      $('#navbar-toggle').click(function() {
        $('nav ul').slideToggle();
      });
  
  
      // Hamburger toggle
      $('#navbar-toggle').on('click', function() {
        this.classList.toggle('active');
      });
  
  
      // If a link has a dropdown, add sub menu toggle.
      $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.navbar-dropdown').slideToggle("slow");
  
        // Close dropdown when select another dropdown
        $('.navbar-dropdown').not($(this).siblings()).hide("slow");
        e.stopPropagation();
      });
  
  
      // Click outside the dropdown will remove the dropdown class
      $('html').click(function() {
        $('.navbar-dropdown').hide();
      });
    }); 
  })(jQuery); 
Output after adding Js code to the html for the desktop view

Output after adding Js code to the html for the mobile view
[fddwrap]Download[/fddwrap].

Leave a Comment

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

Scroll to Top