Responsive Drop-down Menu Bar using HTML & CSS

Ashish Kumar Dangi Wednesday, July 29, 2020 CSS

Responsive Drop-down Menu Bar using HTML & CSS




Hello readers, Today in this blog you'll learn how to create a Responsive Dropdown Menu Bar using HTML and CSS only. Previously I have shared a Sidebar Menu using HTML & CSS only, now it's time to create a Responsive Dropdown Menu Bar.

I'm sure that you know what is the dropdown menu. Generally, A dropdown menu is a list of links or items that appears whenever the button or item is clicked or hovered on. Every website uses a dropdown menu, this the best idea to organize listing by category.

As you can see in the image, this is a Responsive Dropdown Menu Bar using only HTML & CSS. This Dropdown menu bar is fully responsive and for mobile devices too. That means you can see this dropdown menu on the pc/laptop as well as on the mobile too. I have used CSS @media property to make this dropdown fully responsive. When you minimize your window the dropdown menu bar will automatically adjust their size accordingly window width.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Responsive Drop-down Menu Bar).

Video Tutorial of Advanced Drop-down Menu Animation


COMMING SOON

I'm sure you will able to create a pure CSS responsive dropdown menu after watching this video tutorial below. If you want to get the source code of this program (Dropdown Menu Bar). You can easily get the source codes of this program.

To get the source codes you just need to scroll down. You can use this program or design on your website or project after a few changes according you want. Also, you can redesign this program (Responsive Drop-down Menu Bar) to take this sidebar menu to the next level.

You might like this:


Responsive Dropdown Menu Bar [Source Codes]

As always, before sharing the codes of this program (Responsive Drop-down Menu Bar). Let's a few talk about the main tags and codes of this program. As you already know, this program is <ul> and <li> based design, that’s why we can create Menu easily.

I've used <input type="checkbox"> and <label for=""> tag to toggle Menu Bar for the mobile version. I also used the Fontawesome icon to show a 3-lines bar and the 'X' button. Generally, Fontawesome is a website where we can get thousands of free icons for our projects. Importantly, I've used CSS @media property to make this Dropdown Menu Bar fully responsive.

To create this program (Responsive Drop-down Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

  • HTML FILE:-

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<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>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <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>


  • CSS FILE:-


@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;
}


  • Full HTML + CSS File

<!DOCTYPE html>
<!-- Created By Coding With Ashish -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Responsive Drop-down Menu Bar </title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      @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;
}

    </style>
  </head>
  <body>
    <nav>
      <div class="logo">
Coding With Ashish </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>




Source Code by Ashish Kumar !

Thanks You Guys For Using THis Source Code!

Post a Comment

0 Comments