Create Responsive DropDown Menu Using JQuery | HTML, CSS & JavaScript

Create Responsive DropDown Menu Using JQuery | HTML, CSS & JavaScript

In this tutorial, we will learn how to make the responsive dropdown menu using jquery, HTML, CSS. You can see screenshot how the result ll display after using this code.

1. Desktop View

2. Mobile View

HTML File




      
      
      
      Responsive Drop-down Navigation
      
      
      
      



      

      



CSS File

html {
      font-family:Verdana, Arial, Helvetica, sans-serif;
}

body {
      margin: 0;
      padding: 0;
}

ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background: #e3e3e3;
      position: relative;
}

ul li {
      display: inline-block;
}

ul li a {
      color: #292929;
      text-decoration: none;
      padding: 15px;
      display: block;
}

ul li:hover {
      background: lightgrey;
}

ul ul {
      position: absolute;
      min-width: 200px;
      background: lightgrey;
      display: none;
}

ul ul li {
      display: block;
      background: #e3e3e3;
}

ul li:hover ul {
      display: block;
}

ul li i {
      color: #292929;
      float: right;
      padding-left: 20px;
}

nav div {
      background: lightgrey;
      color: #292929;
      font-size: 24px;
      padding: 0.6em;
      cursor: pointer;
      display: none;
}

@media(max-width: 768px) {
      nav div {
            display: block;
      }

      ul {
            display: none;
            position: static;
            background: #e3e3e3;
      }

      ul li {
            display: block;
      }

      ul ul {
            position: static;
            background: #e3e3e3;
      }
}