Dropdown Menu – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 22 Nov 2022 16:41:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Responsive Dropdown Menu Bar with Search Field using HTML & CSS https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css/ https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css/#comments Tue, 09 Feb 2021 11:06:00 +0000 Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create a Responsive Dropdown Menu Bar with Search Field using only HTML & CSS. You may know, I have shared many videos or blogs related to Navigation Bars. If you still haven’t watched them click here to watch them all now. But still, I haven’t created a video or blog on how to create a Responsive Dropdown Menu Bar with Search Box and our many viewers have requested it multiple times so I decided to create it.

img 6092adde1ce1c

The Dropdown menu is important in web design and without it, your website is incomplete. A dropdown menu (sometimes called a pull-down menu or list) is a horizontal list of options/links that each contain a vertical menu to help visitors find a particular page or post on your website. And, A search box, search field, or search bar is a graphical control element used in every website. Search Box is an input field for a query or search term from the user to search and get related data, content from the database.

In our Dropdown Menu design. there is the navigation bar which contains a logo, navigation links to the left side, and a search icon to the right side. When you hover on the particular link, there is appears the dropdown menu of that hovered link and there is also a sub dropdown menu that also appears on the drop menu hover as you can see in the preview image. After that, there is a search icon, and when you click on this icon, the logo, nav links disappear and the search field appears where you can type queries.

Video Tutorial of Responsive Dropdown Menu Bar with Search Box

 
In the video, you’ve seen the responsive dropdown menu with a search bar and how I created this using only HTML & CSS. I believe you have understood the codes behind creating this dropdown menu bar because it is a pure CSS program and if you’re a beginner then you can also create this type of design after watching this video tutorial.

To show or hide search bar, I used HTML <input type=”checkbox”> and <label> tags and I used same tags for show or hide menu bar on mobile devices. To make this dropdown menu responsive, I used CSS @media property that’s it.

You might like this:

Responsive Dropdown Menu with Search Bar [Source Code]

To create this program [Dropdown Menu with Search Field]. 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 from the below download button.

First, create an HTML file with the name of 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">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dropdown Menu with Search Box | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <nav>
      <input type="checkbox" id="show-search">
      <input type="checkbox" id="show-menu">
      <label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
      <div class="content">
      <div class="logo"><a href="#">CodingNepal</a></div>
        <ul class="links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li>
            <a href="#" class="desktop-link">Features</a>
            <input type="checkbox" id="show-features">
            <label for="show-features">Features</label>
            <ul>
              <li><a href="#">Drop Menu 1</a></li>
              <li><a href="#">Drop Menu 2</a></li>
              <li><a href="#">Drop Menu 3</a></li>
              <li><a href="#">Drop Menu 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="desktop-link">Services</a>
            <input type="checkbox" id="show-services">
            <label for="show-services">Services</label>
            <ul>
              <li><a href="#">Drop Menu 1</a></li>
              <li><a href="#">Drop Menu 2</a></li>
              <li><a href="#">Drop Menu 3</a></li>
              <li>
                <a href="#" class="desktop-link">More Items</a>
                <input type="checkbox" id="show-items">
                <label for="show-items">More Items</label>
                <ul>
                  <li><a href="#">Sub Menu 1</a></li>
                  <li><a href="#">Sub Menu 2</a></li>
                  <li><a href="#">Sub Menu 3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Feedback</a></li>
        </ul>
      </div>
      <label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
      <form action="#" class="search-box">
        <input type="text" placeholder="Type Something to Search..." required>
        <button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
      </form>
    </nav>
  </div>

  <div class="dummy-text">
    <h2>Responsive Dropdown Menu Bar with Searchbox</h2>
    <h2>using only HTML & CSS - Flexbox</h2>
  </div>

</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/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  background: #171c24;
  position: fixed;
  width: 100%;
}
.wrapper nav{
  position: relative;
  display: flex;
  max-width: calc(100% - 200px);
  margin: 0 auto;
  height: 70px;
  align-items: center;
  justify-content: space-between;
}
nav .content{
  display: flex;
  align-items: center;
}
nav .content .links{
  margin-left: 80px;
  display: flex;
}
.content .logo a{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
.content .links li{
  list-style: none;
  line-height: 70px;
}
.content .links li a,
.content .links li label{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.content .links li label{
  display: none;
}
.content .links li a:hover,
.content .links li label:hover{
  background: #323c4e;
}
.wrapper .search-icon,
.wrapper .menu-icon{
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 70px;
  width: 70px;
  text-align: center;
}
.wrapper .menu-icon{
  display: none;
}
.wrapper #show-search:checked ~ .search-icon i::before{
  content: "\f00d";
}

.wrapper .search-box{
  position: absolute;
  height: 100%;
  max-width: calc(100% - 50px);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.wrapper #show-search:checked ~ .search-box{
  opacity: 1;
  pointer-events: auto;
}
.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 17px;
  color: #fff;
  background: #171c24;
  padding: 0 100px 0 15px;
}
.search-box input::placeholder{
  color: #f2f2f2;
}
.search-box .go-icon{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 60px;
  width: 70px;
  background: #171c24;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.wrapper input[type="checkbox"]{
  display: none;
}

/* Dropdown Menu code start */
.content .links ul{
  position: absolute;
  background: #171c24;
  top: 80px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}
.content .links li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
}
.content .links ul li a{
  display: block;
  width: 100%;
  line-height: 30px;
  border-radius: 0px!important;
}
.content .links ul ul{
  position: absolute;
  top: 0;
  right: calc(-100% + 8px);
}
.content .links ul li{
  position: relative;
}
.content .links ul li:hover ul{
  top: 0;
}

/* Responsive code start */
@media screen and (max-width: 1250px){
  .wrapper nav{
    max-width: 100%;
    padding: 0 20px;
  }
  nav .content .links{
    margin-left: 30px;
  }
  .content .links li a{
    padding: 8px 13px;
  }
  .wrapper .search-box{
    max-width: calc(100% - 100px);
  }
  .wrapper .search-box input{
    padding: 0 100px 0 15px;
  }
}

@media screen and (max-width: 900px){
  .wrapper .menu-icon{
    display: block;
  }
  .wrapper #show-menu:checked ~ .menu-icon i::before{
    content: "\f00d";
  }
  nav .content .links{
    display: block;
    position: fixed;
    background: #14181f;
    height: 100%;
    width: 100%;
    top: 70px;
    left: -100%;
    margin-left: 0;
    max-width: 350px;
    overflow-y: auto;
    padding-bottom: 100px;
    transition: all 0.3s ease;
  }
  nav #show-menu:checked ~ .content .links{
    left: 0%;
  }
  .content .links li{
    margin: 15px 20px;
  }
  .content .links li a,
  .content .links li label{
    line-height: 40px;
    font-size: 20px;
    display: block;
    padding: 8px 18px;
    cursor: pointer;
  }
  .content .links li a.desktop-link{
    display: none;
  }

  /* dropdown responsive code start */
  .content .links ul,
  .content .links ul ul{
    position: static;
    opacity: 1;
    visibility: visible;
    background: none;
    max-height: 0px;
    overflow: hidden;
  }
  .content .links #show-features:checked ~ ul,
  .content .links #show-services:checked ~ ul,
  .content .links #show-items:checked ~ ul{
    max-height: 100vh;
  }
  .content .links ul li{
    margin: 7px 20px;
  }
  .content .links ul li a{
    font-size: 18px;
    line-height: 30px;
    border-radius: 5px!important;
  }
}

@media screen and (max-width: 400px){
  .wrapper nav{
    padding: 0 10px;
  }
  .content .logo a{
    font-size: 27px;
  }
  .wrapper .search-box{
    max-width: calc(100% - 70px);
  }
  .wrapper .search-box .go-icon{
    width: 30px;
    right: 0;
  }
  .wrapper .search-box input{
    padding-right: 30px;
  }
}

.dummy-text{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: -1;
  padding: 0 20px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.dummy-text h2{
  font-size: 45px;
  margin: 5px 0;
}

That’s all, now you’ve successfully created a Responsive Dropdown Menu Bar with Search Field using only HTML & CSS. If your code does not 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.

 

]]> https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css/feed/ 32 Responsive Mega Menu and Dropdown Menu using only HTML & CSS https://www.codingnepalweb.com/mega-menu-and-dropdown-menu-html-css/ https://www.codingnepalweb.com/mega-menu-and-dropdown-menu-html-css/#comments Sat, 31 Oct 2020 07:59:00 +0000 https://codingnepalweb.com/2020/10/31/responsive-mega-menu-and-dropdown-menu-using-only-html-css/ Responsive Mega Menu and Dropdown Menu using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Responsive Mega Menu and Dropdown Menu using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Dropdown Menu but now I’m going to create Mega Menu which is based on HTML & CSS only.

A mega menu is a drop-down menu with multi-level nav links that allows you to carry your website’s navigation into a single menu. A mega menu lets the user or content viewers get information about website content through the main menu.

In this program [Responsive Mega Menu and Dropdown Menu], there is navigation or navbar on the top of the webpage and it contains a logo on the left side and five nav items/links on the right side. One nav link has a dropdown menu and another one has a mega menu and it only shows when you hover on the parent nav link. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Responsive Mega Menu].

Video Tutorial of Responsive Mega Menu

 
In the video, you have seen the responsive mega and dropdown menu and in this video, I have only created the static mega and dropdown menu means I didn’t code of responsive part but in part 2 of this video I’ve made this mega menu fully responsive for any devices, Click here to watch part 2 video of this tutorial.

As you know, this is a pure CSS program that means only HTML & CSS are used to create this mega menu. If you’re a beginner and difficult to understand how I toggled the menu bar to show or hide then understand the concept of <input type=”checkbox”> and <label> tag. In the label tag, there is a for attribute and we have to pass the id name of the checkbox inside for attribute to control the checkbox from the label. And to make this mega menu responsive I used the CSS @media property.

You might like this:

Responsive Mega Menu and Dropdown Menu [Source Codes]

To create this program (Responsive Mega Menu and Dropdown Menu). 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. First, create an HTML file with the name of 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Mega Menu | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <nav>
    <div class="wrapper">
      <div class="logo"><a href="#">CodingNepal</a></div>
      <input type="radio" name="slider" id="menu-btn">
      <input type="radio" name="slider" id="close-btn">
      <ul class="nav-links">
        <label for="close-btn" class="btn close-btn"><i class="fas fa-times"></i></label>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
          <a href="#" class="desktop-item">Dropdown Menu</a>
          <input type="checkbox" id="showDrop">
          <label for="showDrop" class="mobile-item">Dropdown Menu</label>
          <ul class="drop-menu">
            <li><a href="#">Drop menu 1</a></li>
            <li><a href="#">Drop menu 2</a></li>
            <li><a href="#">Drop menu 3</a></li>
            <li><a href="#">Drop menu 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="desktop-item">Mega Menu</a>
          <input type="checkbox" id="showMega">
          <label for="showMega" class="mobile-item">Mega Menu</label>
          <div class="mega-box">
            <div class="content">
              <div class="row">
                <img src="img.jpg" alt="">
              </div>
              <div class="row">
                <header>Design Services</header>
                <ul class="mega-links">
                  <li><a href="#">Graphics</a></li>
                  <li><a href="#">Vectors</a></li>
                  <li><a href="#">Business cards</a></li>
                  <li><a href="#">Custom logo</a></li>
                </ul>
              </div>
              <div class="row">
                <header>Email Services</header>
                <ul class="mega-links">
                  <li><a href="#">Personal Email</a></li>
                  <li><a href="#">Business Email</a></li>
                  <li><a href="#">Mobile Email</a></li>
                  <li><a href="#">Web Marketing</a></li>
                </ul>
              </div>
              <div class="row">
                <header>Security services</header>
                <ul class="mega-links">
                  <li><a href="#">Site Seal</a></li>
                  <li><a href="#">VPS Hosting</a></li>
                  <li><a href="#">Privacy Seal</a></li>
                  <li><a href="#">Website design</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li><a href="#">Feedback</a></li>
      </ul>
      <label for="menu-btn" class="btn menu-btn"><i class="fas fa-bars"></i></label>
    </div>
  </nav>

  <div class="body-text">
    <div class="title">Responsive Dropdown and Mega Menu</div>
    <div class="sub-title">using only HTML & CSS</div>
  </div>

</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/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
nav{
  position: fixed;
  z-index: 99;
  width: 100%;
  
  background: #242526;
}
nav .wrapper{
  position: relative;
  max-width: 1300px;
  padding: 0px 30px;
  height: 70px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .logo a{
  color: #f2f2f2;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}
.wrapper .nav-links{
  display: inline-flex;
}
.nav-links li{
  list-style: none;
}
.nav-links li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.nav-links li a:hover{
  background: #3A3B3C;
}
.nav-links .mobile-item{
  display: none;
}
.nav-links .drop-menu{
  position: absolute;
  background: #242526;
  width: 180px;
  line-height: 45px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box{
  transition: all 0.3s ease;
  top: 70px;
  opacity: 1;
  visibility: visible;
}
.drop-menu li a{
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}
.mega-box{
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 30px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
}
.mega-box .content{
  background: #242526;
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.mega-box .content .row{
  width: calc(25% - 30px);
  line-height: 45px;
}
.content .row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content .row header{
  color: #f2f2f2;
  font-size: 20px;
  font-weight: 500;
}
.content .row .mega-links{
  margin-left: -40px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.row .mega-links li{
  padding: 0 20px;
}
.row .mega-links li a{
  padding: 0px;
  padding: 0 20px;
  color: #d9d9d9;
  font-size: 17px;
  display: block;
}
.row .mega-links li a:hover{
  color: #f2f2f2;
}
.wrapper .btn{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.wrapper .btn.close-btn{
  position: absolute;
  right: 30px;
  top: 10px;
}

@media screen and (max-width: 970px) {
  .wrapper .btn{
    display: block;
  }
  .wrapper .nav-links{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    top: 0;
    left: -100%;
    background: #242526;
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
  }
  /* custom scroll bar */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #242526;
  }
  ::-webkit-scrollbar-thumb {
    background: #3A3B3C;
  }
  #menu-btn:checked ~ .nav-links{
    left: 0%;
  }
  #menu-btn:checked ~ .btn.menu-btn{
    display: none;
  }
  #close-btn:checked ~ .btn.menu-btn{
    display: block;
  }
  .nav-links li{
    margin: 15px 10px;
  }
  .nav-links li a{
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }
  .nav-links .drop-menu{
    position: static;
    opacity: 1;
    top: 65px;
    visibility: visible;
    padding-left: 20px;
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
  }
  #showDrop:checked ~ .drop-menu,
  #showMega:checked ~ .mega-box{
    max-height: 100%;
  }
  .nav-links .desktop-item{
    display: none;
  }
  .nav-links .mobile-item{
    display: block;
    color: #f2f2f2;
    font-size: 20px;
    font-weight: 500;
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  .nav-links .mobile-item:hover{
    background: #3A3B3C;
  }
  .drop-menu li{
    margin: 0;
  }
  .drop-menu li a{
    border-radius: 5px;
    font-size: 18px;
  }
  .mega-box{
    position: static;
    top: 65px;
    opacity: 1;
    visibility: visible;
    padding: 0 20px;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .mega-box .content{
    box-shadow: none;
    flex-direction: column;
    padding: 20px 20px 0 20px;
  }
  .mega-box .content .row{
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .mega-box .content .row:nth-child(1),
  .mega-box .content .row:nth-child(2){
    border-top: 0px;
  }
  .content .row .mega-links{
    border-left: 0px;
    padding-left: 15px;
  }
  .row .mega-links li{
    margin: 0;
  }
  .content .row header{
    font-size: 19px;
  }
}
nav input{
  display: none;
}

.body-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 0 30px;
}
.body-text div{
  font-size: 45px;
  font-weight: 600;
}

That’s all, now you’ve successfully created a Responsive Mega Menu and Dropdown Menu using only HTML & CSS. If your code does not 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.

 

]]> https://www.codingnepalweb.com/mega-menu-and-dropdown-menu-html-css/feed/ 38 Advanced Drop-down Menu using HTML CSS & JavaScript https://www.codingnepalweb.com/advanced-drop-down-menu-javascript/ https://www.codingnepalweb.com/advanced-drop-down-menu-javascript/#comments Thu, 23 Jul 2020 08:31:00 +0000 https://codingnepalweb.com/2020/07/23/advanced-drop-down-menu-using-html-css-javascript/ Advanced Drop-down Menu Animation like Facebook using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Advanced Dropdown Menu like Facebook using HTML CSS & JavaScript. Earlier I have shared a blog on how to create a Responsive Drop-down Menu Bar using HTML & CSS. And now I’m going to create an Advanced Drop-down Menu Animation.

A drop-down menu is a graphical control element intended to help visitors find particular pages or features on your website. Clicking or hovering on a top-level menu label prompts a list of options to a dropdown. Dropdown menus are also usually used for website navigation.

In this program (Advanced Drop-down Menu Animation), at first, on the webpage, there is a drop button and when you click on that button then the menu container is shown. There are five menu lists on the menu container but two menus have a drop-list or drop-menu. When you click on that menu, this menu container smoothly slides to the right side and shows the drop-list of the clicked menu. And there is also shown a back arrow button that is used to redirect you to the menu container from the drop-list.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Advanced Drop-down Menu Animation).

Video Tutorial of Advanced Drop-down Menu Animation

 
In the video, you have the advanced animation of this program (Drop-down Menu) and I hope you have understood the basic codes behind creating the program. You may have seen this type of menu animation on Facebook. Nowadays, this type of drop-down menu animation is on trending rather than the previous type of old drop-down menu.

This is a simple but advanced Drop-down Menu and you can use this program on your projects, websites, and HTML pages. If you have problems to understanding the JavaScript codes of this program, don’t worry you’ll understand all codes after getting the source codes of this program.

You might like this:

Advanced Drop-down Menu Animation [Source Codes]

To create this program (Advanced Drop-down Menu Animation). 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 in your file.

First, create an HTML file with the name of 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 -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Advanced Drop-down Menu | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <nav>
         <div class="drop-btn">
            Drop down <span class="fas fa-caret-down"></span>
         </div>
         <div class="tooltip"></div>
         <div class="wrapper">
            <ul class="menu-bar">
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-home"></span>
                     </div>
                     Home 
                  </a>
               </li>
               <li class="setting-item">
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-cog"></span>
                     </div>
                     Settings & privacy <i class="fas fa-angle-right"></i>
                  </a>
               </li>
               <li class="help-item">
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-question-circle"></span>
                     </div>
                     Help & support <i class="fas fa-angle-right"></i>
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-user"></span>
                     </div>
                     About us 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-comment-alt"></span>
                     </div>
                     Feedback 
                  </a>
               </li>
            </ul>
            <!-- Settings & privacy Menu-items -->
            <ul class="setting-drop">
               <li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-user"></span>
                     </div>
                     Personal info 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-lock"></span>
                     </div>
                     Password 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-address-book"></span>
                     </div>
                     Activity log 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-globe-asia"></span>
                     </div>
                     Languages 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-sign-out-alt"></span>
                     </div>
                     Log out 
                  </a>
               </li>
            </ul>
            <!-- Help & support Menu-items -->
            <ul class="help-drop">
               <li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-question-circle"></span>
                     </div>
                     Help centre 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-envelope"></span>
                     </div>
                     Support Inbox 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-comment-alt"></span>
                     </div>
                     Send feedback 
                  </a>
               </li>
               <li>
                  <a href="#">
                     <div class="icon">
                        <span class="fas fa-exclamation-circle"></span>
                     </div>
                     Report problem 
                  </a>
               </li>
            </ul>
         </div>
      </nav>
      <script>
         const drop_btn = document.querySelector(".drop-btn span");
         const tooltip = document.querySelector(".tooltip");
         const menu_wrapper = document.querySelector(".wrapper");
         const menu_bar = document.querySelector(".menu-bar");
         const setting_drop = document.querySelector(".setting-drop");
         const help_drop = document.querySelector(".help-drop");
         const setting_item = document.querySelector(".setting-item");
         const help_item = document.querySelector(".help-item");
         const setting_btn = document.querySelector(".back-setting-btn");
         const help_btn = document.querySelector(".back-help-btn");
           drop_btn.onclick = (()=>{
             menu_wrapper.classList.toggle("show");
             tooltip.classList.toggle("show");
           });
           setting_item.onclick = (()=>{
             menu_bar.style.marginLeft = "-400px";
             setTimeout(()=>{
               setting_drop.style.display = "block";
             }, 100);
           });
           help_item.onclick = (()=>{
             menu_bar.style.marginLeft = "-400px";
             setTimeout(()=>{
               help_drop.style.display = "block";
             }, 100);
           });
           setting_btn.onclick = (()=>{
             menu_bar.style.marginLeft = "0px";
             setting_drop.style.display = "none";
           });
           help_btn.onclick = (()=>{
             help_drop.style.display = "none";
             menu_bar.style.marginLeft = "0px";
           });
      </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;
  box-sizing: border-box;
  user-select: none;
  font-family: 'Poppins', sans-serif;
}
body{
 background: #18191A;
  overflow: hidden;
}
nav{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
nav .drop-btn{
  width: 400px;
  background: #242526;
  border-radius: 5px;
  line-height: 55px;
  font-size: 20px;
  font-weight: 500;
  color: #b0b3b8;
  padding: 0 20px;
}
nav .drop-btn span{
  float: right;
  line-height: 50px;
  font-size: 28px;
  cursor: pointer;
}
nav .tooltip{
  position: absolute;
  right: 20px;
  bottom: -20px;
  height: 15px;
  width: 15px;
  background: #242526;;
  transform: rotate(45deg);
  display: none;
}
nav .tooltip.show{
  display: block;
}
nav .wrapper{
  position: absolute;
  top: 65px;
  display: flex;
  width: 400px;
  overflow: hidden;
  border-radius: 5px;
  background: #242526;
  display: none;
  transition: all 0.3s ease;
}
nav .wrapper.show{
  display: block;
  display: flex;
}
.wrapper ul{
  width: 400px;
  list-style: none;
  padding: 10px;
  transition: all 0.3s ease;
}
.wrapper ul li{
  line-height: 55px;
}
.wrapper ul li a{
  position: relative;
  color: #b0b3b8;
  font-size: 18px;
  font-weight: 500;
  padding: 0 10px;
  display: flex;
  border-radius: 8px;
  align-items: center;
  text-decoration: none;
}
.wrapper ul li:hover a{
  background: #3A3B3C;
}
ul li a .icon{
  height: 40px;
  width: 40px;
  margin-right: 13px;
  background: #ffffff1a;
  display: flex;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}
ul li a .icon span{
  line-height: 40px;
  font-size: 20px;
  color: #b0b3b8;
}
ul li a i{
  position: absolute;
  right: 10px;
  font-size: 25px;
  pointer-events: none;
}
.wrapper ul.setting-drop,
.wrapper ul.help-drop{
  display: none;
}
.wrapper .arrow{
  padding-left: 10px;
  font-size: 20px;
  font-weight: 500;
  color: #b0b3b8;
  cursor: pointer;
}
.wrapper .arrow span{
  margin-right: 15px;
}

That’s all, now you’ve successfully created an Advanced Drop-down 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.

 

]]> https://www.codingnepalweb.com/advanced-drop-down-menu-javascript/feed/ 14 Animated Drop-down Menu Bar using HTML & CSS https://www.codingnepalweb.com/animated-drop-down-menu-bar-html-css/ https://www.codingnepalweb.com/animated-drop-down-menu-bar-html-css/#comments Sat, 27 Jun 2020 11:43:00 +0000 https://codingnepalweb.com/2020/06/27/animated-drop-down-menu-bar-using-html-css/ Animated Drop-down Menu Bar using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Drop-down Menu Bar using HTML and CSS only. Earlier I have shared how to create a Side Navigation Menu Bar using HTML and CSS. Now it’s time to create a dropdown menu bar.

As you know, the dropdown menu is important for any kind of website to show information about the website more and more, which users or visitors need. Every website has a navbar for providing a graphical user interface.

As you can see in the image, this is a Dropdown Menu Bar that is based on only HTML and CSS. There are menu items, one background image, and some dummy text on the webpage. But when you will hover over a specific menu then the submenu will appear. Basically, at first, the submenu is hidden but when you hover over a menu item a specific menu’s submenu will appear. This is only a frontend program or design without any backend integration.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Animated Drop-down Menu Bar).

Video Tutorial of Drop-down Menu Bar

 
I hope you’ve understood the basic concept of this Dropdown Menu Bar after watching this video tutorial. I think this video can help beginners to know CSS in depth. If you want to get the source code of this Dropdown Menu Bar. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

I think these codes can help beginners to understand CSS in depth. You can use this program or design on your website or project after a few changes according you want. Also, you can redesign this dropdown and take this program to the next level.

Dropdown Menu Bar in HTML CSS [Source Codes]

To create this program (Drop-down Menu Ba). 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 in your file. First, create an HTML file with the name of 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 -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Dropdown Menu Bar</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <nav>
         <label class="logo">CodingNepal</label>
         <ul>
            <li><a class="active" href="#">Home</a></li>
            <li>
               <a href="#">Features
               <i class="fas fa-caret-down"></i>
               </a>
               <ul>
                  <li><a href="#">Python</a></li>
                  <li><a href="#">JQuery</a></li>
                  <li><a href="#">Javascript</a></li>
               </ul>
            </li>
            <li>
               <a href="#">Web Design
               <i class="fas fa-caret-down"></i>
               </a>
               <ul>
                  <li><a href="#">Front End</a></li>
                  <li><a href="#">Back End</a></li>
                  <li>
                     <a href="#">Others
                     <i class="fas fa-caret-right"></i>
                     </a>
                     <ul>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">Status</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </nav>
      <section></section>
   </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.

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
body{
  font-family: sans-serif;
  overflow: hidden;
  user-select: none;
}
nav .logo{
  color: white;
  font-size: 33px;
  font-weight: bold;
  line-height: 70px;
  padding-left: 110px;
}
nav{
  height: 70px;
  background: #063247;
  box-shadow: 0 3px 15px rgba(0,0,0,.4);
}
nav ul{
  float: right;
  margin-right: 30px;
}
nav ul li{
  display: inline-block;
}
nav ul li a{
  color: white;
  display: block;
  padding: 0 15px;
  line-height: 70px;
  font-size: 20px;
  background: #063247;
  transition: .5s;
}
nav ul li a:hover,
nav ul li a.active{
  color: #23dbdb;
}
nav ul ul{
  position: absolute;
  top: 85px;
  border-top: 3px solid #23dbdb;
  opacity: 0;
  visibility: hidden;
}
nav ul li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
  transition: .3s linear;
}
nav ul ul li{
  width: 150px;
  display: list-item;
  position: relative;
  border: 1px solid #042331;
  border-top: none;
}
nav ul ul li a{
  line-height: 50px;
}
nav ul ul ul{
  border-top: none;
}
nav ul ul ul li{
  position: relative;
  top: -70px;
  left: 150px;
}
nav ul ul li a i{
  margin-left: 45px;
}
section{
  background: url(bg.jpeg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

That’s all, now you’ve successfully created an Animated Drop-down Menu Bar using HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/animated-drop-down-menu-bar-html-css/feed/ 11 Minimal Drop-down Menu Bar with Submenu using HTML & CSS https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/ https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/#comments Sat, 23 May 2020 07:01:00 +0000 https://codingnepalweb.com/2020/05/23/minimal-drop-down-menu-bar-with-submenu-using-html-css/ Minimal Drop-down Menu Bar with Submenu using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Minimal Dropdown Menu Bar with Submenu in HTML & CSS only. Previously I have shared a Minimal Navigation Menu Bar using CSS but there is no submenu or drop menu features. So now it’s time to create a Dropdown Menu.

A drop-down menu (sometimes called a pull-down menu or list) is a graphical control element designed to help visitors find specific pages, contents, or features on your website. Clicking or hovering on a top-level menu heading indicates a list of options to the dropdown menu.

At first, on the webpage, there is only a small menu bar or navbar, but when you clicked on that menu bar then the menu list is sliding down and visible. Those submenus or drop menus are hidden at first and when you clicked on their parent menu item then the drop list is shown. I’ve also added a simple hover color on the list as you can see in the image.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Minimal Drop-down Menu Bar with Submenu using HTML & CSS).

Video Tutorial of Minimal Dropdown Menu Bar or Navbar

 
If you like this Dropdown Menu Bar and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create this type of minimal navbar or menu. I hope after watching this video tutorial, you’ve understood what is the actual codes and concepts behind creating this type of design. You can also easily use this program on your websites and projects.

Dropdown Menu Bar using HTML & CSS [Source Codes]

To create this program (Minimal Drop-down Menu Bar with Submenu). 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 in your file. First, create an HTML file with the name of 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 -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Animated Drop-down Menu CSS3</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <nav>
         <label for="btn" class="button">Drop down
         <span class="fas fa-caret-down"></span>
         </label>
         <input type="checkbox" id="btn">
         <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
               <label for="btn-2" class="first">Features
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-2">
               <ul>
                  <li><a href="#">Pages</a></li>
               </ul>
            </li>
            <li>
               <label for="btn-3" class="second">Services
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-3">
               <ul>
                  <li><a href="#">Web Design</a></li>
                  <li><a href="#">App Design</a></li>
               </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </nav>
      <!-- This code used to rotate drop icon(-180deg).. -->
      <script>
         $('nav .button').click(function(){
           $('nav .button span').toggleClass("rotate");
         });
           $('nav ul li .first').click(function(){
             $('nav ul li .first span').toggleClass("rotate");
           });
           $('nav ul li .second').click(function(){
             $('nav ul li .second span').toggleClass("rotate");
           });
      </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;
  box-sizing: border-box;
  user-select: none;
  font-family: 'Poppins', sans-serif;
}
nav{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b1b1b;
  width: 400px;
  line-height: 40px;
  padding: 8px 25px;
  border-radius: 5px;
}
nav label{
  color: white;
  font-size: 22px;
  font-weight: 500;
  display: block;
  cursor: pointer;
}
.button span{
  float: right;
  line-height: 40px;
  transition: 0.5s;
}
.button span.rotate{
  transform: rotate(-180deg);
}
nav ul{
  position: absolute;
  background: #1b1b1b;
  list-style: none;
  top: 75px;
  left: 0;
  width: 100%;
  border-radius: 5px;
  display: none;
}
[id^=btn]:checked + ul{
  display: block;
}
nav .menu:before{
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  background: #1b1b1b;
  right: 20px;
  top: -10px;
  transform: rotate(45deg);
  z-index: -1;
}
nav ul li{
  line-height: 40px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
  font-size: 18px;
}
nav ul li a{
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
}
nav ul li a:hover,
nav ul li label:hover{
  color: cyan;
}
nav ul ul{
  position: static;
}
nav ul ul li{
  line-height: 30px;
  padding-left: 30px;
  border-bottom: none;
}
nav ul ul li a{
  color: #e6e6e6;
  font-size: 17px;
}
nav ul li span{
  font-size: 20px;
  float: right;
  margin-top: 10px;
  padding: 0 10px;
  transition: 0.5s;
}
nav ul li span.rotate{
  transform: rotate(-180deg);
}
input{
  display: none;
}

That’s all, now you’ve successfully created a Minimal Drop-down Menu Bar with Submenu using HTML & CSS. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/feed/ 5 Responsive Dropdown Menu Bar using HTML & CSS https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css-2/ https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css-2/#comments Sat, 25 Apr 2020 09:44:00 +0000 https://codingnepalweb.com/2020/04/25/responsive-dropdown-menu-bar-using-html-css/ 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 have shared how to create Sidebar Menu using HTML & CSS only and now it’s time to create a responsive dropdown menu.

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

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 are hidden but when you hover on the particular nav link then the dropdown menu appears on the hovered link. There is visible 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 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 feeling 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 and 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 of 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.

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #0082e6;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

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.

 

]]> https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css-2/feed/ 48