Responsive Dropdown Menu Bar using HTML & CSS

48
Responsive Drop-down Menu Bar using HTML and CSS

Hey friends, today in this blog you’ll learn how to create a Responsive Dropdown Menu Bar or Dropdown Menu using HTML and CSS only. In the earlier blog, I shared how to create a Sidebar Menu using HTML & CSS only and now it’s time to create a responsive dropdown menu.

I’m sure you know the dropdown menu and may have seen it on different websites. A dropdown menu is a list of links or items appearing whenever the user clicks or hovers. Nowadays every website has a responsive navbar with a dropdown because with the help of dropdown, we can easily organize listings by category and it is compulsory now for every website for user convenience.

In our Responsive Dropdown Menu Bar, as you can see in the preview image, there is a horizontal navbar with a dropdown. At first, the drop menu or submenu is hidden but when you hover on the particular nav link then the dropdown menu appears on the hovered link. There is a pretty cool box-shadow effect when you hover on the particular nav link.

This is a fully responsive navbar with a dropdown menu and it is created using only HTML & CSS. On the pc, this navbar is displayed horizontally but on mobile devices, this dropdown or navbar is displayed vertically like a mobile menu. On mobile devices, you have to click on the nav link to show the dropdown menu but on pc, you have to hover.

If you’re having difficulty understanding what I am saying. You can watch a full video tutorial on this Responsive Dropdown Menu Bar.

Video Tutorial of Responsive Dropdown Menu Bar

In the video, you have seen the fully responsive dropdown menu and how it looks on mobile devices. I hope you have understood the codes behind creating this CSS dropdown menu. If you’re a beginner in web design and you only know basic HTML & CSS then you can also create this type of navbar or dropdown menu bar.

If you like this dropdown menu and to get the source codes then you can easily copy the codes of this dropdown from the given copy boxes or you can also download the source code files of this dropdown from the given download button I also recommend you download the code files of this Responsive Dropdown Menu Bar tutorial instead of copy codes.

Responsive Dropdown Menu Bar [Source Codes]

To create this dropdown menu css. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this dropdown menu CSS design from the below download button.

First, create an HTML file with the name index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Responsive Drop-down Menu Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <nav>
         <div class="logo">
            CodingNepal
         </div>
         <label for="btn" class="icon">
         <span class="fa fa-bars"></span>
         </label>
         <input type="checkbox" id="btn">
         <ul>
            <li><a href="#">Home</a></li>
            <li>
               <label for="btn-1" class="show">Features +</label>
               <a href="#">Features</a>
               <input type="checkbox" id="btn-1">
               <ul>
                  <li><a href="#">Pages</a></li>
                  <li><a href="#">Elements</a></li>
                  <li><a href="#">Icons</a></li>
               </ul>
            </li>
            <li>
               <label for="btn-2" class="show">Services +</label>
               <a href="#">Services</a>
               <input type="checkbox" id="btn-2">
               <ul>
                  <li><a href="#">Web Design</a></li>
                  <li><a href="#">App Design</a></li>
                  <li>
                     <label for="btn-3" class="show">More +</label>
                     <a href="#">More <span class="fa fa-plus"></span></a>
                     <input type="checkbox" id="btn-3">
                     <ul>
                        <li><a href="#">Submenu-1</a></li>
                        <li><a href="#">Submenu-2</a></li>
                        <li><a href="#">Submenu-3</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </nav>
      <div class="content">
         <header>Responsive Drop-down Menu Bar</header>
         <p>HTML and CSS (Media Query)</p>
      </div>
      <script>
         $('.icon').click(function(){
           $('span').toggleClass("cancel");
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  background: #f2f2f2;
}
nav{
  background: #1b1b1b;
}
nav:after{
  content: '';
  clear: both;
  display: table;
}
nav .logo{
  float: left;
  color: white;
  font-size: 27px;
  font-weight: 600;
  line-height: 70px;
  padding-left: 60px;
}
nav ul{
  float: right;
  margin-right: 40px;
  list-style: none;
  position: relative;
}
nav ul li{
  float: left;
  display: inline-block;
  background: #1b1b1b;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  line-height: 70px;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 15px;
}
nav ul li a:hover{
  color: cyan;
  border-radius: 5px;
  box-shadow:  0 0 5px #33ffff,
               0 0 10px #66ffff;
}
nav ul ul li a:hover{
  box-shadow: none;
}
nav ul ul{
  position: absolute;
  top: 90px;
  border-top: 3px solid cyan;
  opacity: 0;
  visibility: hidden;
  transition: top .3s;
}
nav ul ul ul{
  border-top: none;
}
nav ul li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
}
nav ul ul li{
  position: relative;
  margin: 0px;
  width: 150px;
  float: none;
  display: list-item;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
  line-height: 50px;
}
nav ul ul ul li{
  position: relative;
  top: -60px;
  left: 150px;
}
.show,.icon,input{
  display: none;
}
.fa-plus{
  font-size: 15px;
  margin-left: 40px;
}
@media all and (max-width: 968px) {
  nav ul{
    margin-right: 0px;
    float: left;
  }
  nav .logo{
    padding-left: 30px;
    width: 100%;
  }
  .show + a, ul{
    display: none;
  }
  nav ul li,nav ul ul li{
    display: block;
    width: 100%;
  }
  nav ul li a:hover{
    box-shadow: none;
  }
  .show{
    display: block;
    color: white;
    font-size: 18px;
    padding: 0 20px;
    line-height: 70px;
    cursor: pointer;
  }
  .show:hover{
    color: cyan;
  }
  .icon{
    display: block;
    color: white;
    position: absolute;
    top: 0;
    right: 40px;
    line-height: 70px;
    cursor: pointer;
    font-size: 25px;
  }
  nav ul ul{
    top: 70px;
    border-top: 0px;
    float: none;
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  nav ul ul a{
    padding-left: 40px;
  }
  nav ul ul ul a{
    padding-left: 80px;
  }
  nav ul ul ul li{
    position: static;
  }
  [id^=btn]:checked + ul{
    display: block;
  }
  nav ul ul li{
    border-bottom: 0px;
  }
  span.cancel:before{
    content: '\f00d';
  }
}
.content{
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
header{
  font-size: 35px;
  font-weight: 600;
  padding: 10px 0;
}
p{
  font-size: 30px;
  font-weight: 500;
}

That’s all, now you’ve successfully created a Responsive Dropdown Menu using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

Previous articleSide Navigation Menu Bar in HTML CSS
Next articleTransparent Login Form HTML CSS & JavaScript

RELATED ARTICLESMORE FROM AUTHOR

48 COMMENTS

  4. I was trying to set up multiple drop down menus but the way you referenced it results in the first drop down menu popping up (in mobile view) regardless of which drop down you tap on. As there is too much CSS to amend, isn’t there an easier way to reference the respective menus without having to duplicate the CSS per drop down menu?

  7. Hello. I have been checking the menu and when I switch to mobile, for some reason the button that opens the menu does not appear, so I have had to reload the page many times until the button is shown. How can I solve this problem?

  22. Plz Start A CSS Tutorial Series On Your YouTube Chainal Step By Step Instructions. You Are The Best Coders In Whole World Sir. But Yes, Beginning To Master So Plz Start This Series On Your YouTube Channel. Plzzzzzzz

  33. I am having a issue with all my Li tag elements on the rest of my webpage outside of the navigation disappearing when minimizing the screen. How can I fix this?

  42. Hey,
    very nice Design.
    I can change the Design like i want.
    But when I want to open the Website on my phone or on a smaller Web Version.
    The Design is the old…
    Can anyone help me?

  43. when i go to live server after write my code they told me
    Cannot GET /Side%20Navigation%20Menu%20Bar%20in%20HTML%20CSS%20%5E&%20JavaScript/index.html
    what is it mean ??

LEAVE A REPLY

Please enter your comment!
Please enter your name here