Hello Friends, Today in this post, we’ll learn How to Create a Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS. Recently I have shared a Responsive Footer Design Using Bootstrap 4. But our today’s topic is Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS.

If Are you Looking for creative ways to design your navigation menus? Then you Have Come to the Right Place because In this article I’ll like to share inspiration on Responsive Mega Menu With Dropdown Menu styles and effects with you. Use this Responsive Mega Menu With Dropdown Menu in your next project where you want to show a Responsive Mega Menu With Dropdown Menu

Responsive Mega Menu With Dropdown Menu is the most popular and interesting modern web design. A responsive menu that takes up the entire screen when expanded. The menu usually activated by clicking or touching the hamburger button. responsive Mega Menu With Dropdown Menu gives you the power to overlay and animate one screen on top of another.

It can simulate modal windows, dropdown navigation menus, and other on-screen prompts, all without leaving your current screen. So in this post, I will create a Responsive Mega Menu With Dropdown Menu Menu to find inspiration for your web design project. And now I’m going to create an attractive but easy Responsive Mega Menu With Dropdown Menu using Html5 CSS3.

As you all already know full-page navigation menu, that replaces the current content by pushing it off the screen. A website menu is a list of linked items that help in navigating between the different pages or sections of a website. Use this hamburger menu to Responsive Mega Menu With Dropdown Menu in your next web project.

In this Article firstly, on the webpage, there is only the menu button on the top right corner and when you click on that button then the background flow from that corner then shows the navigation links. There is also a background animation when you hover on a particular menu item. This design is fully created on only HTML, CSS.

Play Video

Typically activated by a hamburger button, the fullscreen menu is in its simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items. It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu.

If you’re all looking for some interactive Mega Menu design, this Article has a good source of Responsive Mega Menu With Dropdown Menu that you can explore, I have published this tutorial on how to create a full-width tiled menu with CSS. If you’re feeling difficult to understand what I am discussing. You can watch a full video tutorial on this article.

In the Post, you will see the Responsive Mega Menu With Dropdown Menu and I hope you’ve understood the basic codes behind creating this Article. If you like this article and want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to scroll move down. You can use this post in your HTML pages, websites, and projects.

To create this program Firstly, 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.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Drop-down Menu Bar</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css"> 
  </head>
  <body>
      <nav>
        <div class="logo">Code4education</div>
        <label for="btn" class="icon">
          <span class="fas 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="#">Members</a></li>
              <li><a  href="#">Offers</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"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  <script>
    $('.icon').click(function(){
      $('span').toggleClass('cancel');
    })
  </script>
  </body>
</html>

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;
}
:root{
    --yellow-color:#ffc947;
    --black-color:#1b1b1b;
    --white-color:#fff;
} 
nav{
  background:var(--black-color);
}
nav:after{
  content:'';
  clear:both;
  display:table;
}
nav .logo{
  float:left;
  color:var(--white-color);
  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:var(--black-color);
  margin:0 5px;
}
nav ul li a{
  color:var(--white-color);
  line-height: 70px;
  text-decoration: none;
  font-size: 18px;
  padding:8px 15px;
  transition: 0.3s all ease;
}
nav ul li a:hover{
  color:var(--yellow-color);
  border-radius: 5px;
  box-shadow: 0 0 5px var(--yellow-color), 0 0 10px var(--yellow-color);
}
nav ul ul li a:hover{
  box-shadow: none;
}
nav ul ul{
  position:absolute;
  top:90px;
  z-index: 100;
  border-top:3px solid var(--yellow-color);
  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;
}
.content{
  position:relative;
}
.content::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url('images/bg.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size: cover;
  width:100%;
  height:calc(100vh - 70px);
}
.content::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(100vh - 70px);
  background-color: rgba(0,0,0,.50);
}

@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:var(--white-color);
    font-size: 18px;
    padding:0 12px;
    line-height: 70px;
    cursor:pointer;
  }
  .show:hover{
    color:var(--yellow-color);
  }
  .icon{
    display:block;
    color:var(--white-color);
    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';
  }
}

Responsive Dropdown Menu Bar with Multilevel Dropdown Using HTML & CSS.

HTML

CSS

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript