Menu Bar – 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. Thu, 04 May 2023 11:13:41 +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 Animated Sidebar Menu using only HTML & CSS | Side Navigation Menu https://www.codingnepalweb.com/animated-sidebar-menu-html-css/ https://www.codingnepalweb.com/animated-sidebar-menu-html-css/#comments Sat, 05 Sep 2020 05:13:00 +0000 https://codingnepalweb.com/2020/09/05/animated-sidebar-menu-using-only-html-css-side-navigation-menu/ Animated Sidebar Menu using only HTML & CSS Side Navigation Menu

Hello readers, Today in this blog you’ll learn how to create an Animated Sidebar Menu or Side Navigation Menu using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Navigation Menu Bar and now it’s time to create a sidebar menu.

A website sidebar is a unique, creative, and useful component placed to the right or left of a webpage’s primary content area. They’re commonly used to display several types of additional information for users, such as navigational links to key pages. A sidebar can be used to encourage your visitors and content viewers to read the more detailed main article.

In this program [Side Navigation Menu], at first, on the webpage, there is only a menu button on the top left corner and when you click on that button, then the sidebar appears with sliding from the left side. In this sidebar, there are some navigation links with their icons, and when you hover on the particular link there is shown a box-shadow effect on the background which makes it more attractive. There are also some social media icons on the bottom of the sidebar.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Animated Sidebar Menu].

Video Tutorial of Animated Sidebar Menu

 
In the video, you have seen the side navigation menu with icons and I hope you’ve understood the basic codes behind creating this program. As you know, this is a pure CSS program that means I used only HTML & CSS to create this sidebar. So if you’re a beginner, then you can easily understand the codes of this program and able to create this type of sidebar.

To create a toggle button and show or hide the sidebar on button click, I have used HTML <input type=”checkbox”> and control this checkbox with label tag [menu icon]. If you like this program [Side Navigation Menu] and want to get source codes. You can easily get the source codes of this program.

You might like this:

Side Navigation Menu [Source Codes]

To create this program [Side Navigation 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 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 Sidebar Menu | CodingLab</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">
         <input type="checkbox" id="btn" hidden>
         <label for="btn" class="menu-btn">
         <i class="fas fa-bars"></i>
         <i class="fas fa-times"></i>
         </label>
         <nav id="sidebar">
            <div class="title">
               Side Menu
            </div>
            <ul class="list-items">
               <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
               <li><a href="#"><i class="fas fa-sliders-h"></i>Clients</a></li>
               <li><a href="#"><i class="fas fa-address-book"></i>Services</a></li>
               <li><a href="#"><i class="fas fa-cog"></i>Settings</a></li>
               <li><a href="#"><i class="fas fa-stream"></i>Features</a></li>
               <li><a href="#"><i class="fas fa-user"></i>About us</a></li>
               <li><a href="#"><i class="fas fa-globe-asia"></i>Languages</a></li>
               <li><a href="#"><i class="fas fa-envelope"></i>Contact us</a></li>
               <div class="icons">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-github"></i></a>
                  <a href="#"><i class="fab fa-youtube"></i></a>
               </div>
            </ul>
         </nav>
      </div>
      <div class="content">
         <div class="header">
            Animated Side Navigation Menu
         </div>
         <p>
            using only HTML and CSS
         </p>
      </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/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  height: 100%;
  width: 300px;
  position: relative;
}
.wrapper .menu-btn{
  position: absolute;
  left: 20px;
  top: 10px;
  background: #4a4a4a;
  color: #fff;
  height: 45px;
  width: 45px;
  z-index: 9999;
  border: 1px solid #333;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
  left: 247px;
}
.wrapper .menu-btn i{
  position: absolute;
  transform: ;
  font-size: 23px;
  transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
  opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
  opacity: 1;
  transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
  opacity: 0;
  transform: rotate(180deg);
}
#sidebar{
  position: fixed;
  background: #404040;
  height: 100%;
  width: 270px;
  overflow: hidden;
  left: -270px;
  transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
  left: 0;
}
#sidebar .title{
  line-height: 65px;
  text-align: center;
  background: #333;
  font-size: 25px;
  font-weight: 600;
  color: #f2f2f2;
  border-bottom: 1px solid #222;
}
#sidebar .list-items{
  position: relative;
  background: #404040;
  width: 100%;
  height: 100%;
  list-style: none;
}
#sidebar .list-items li{
  padding-left: 40px;
  line-height: 50px;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid #333;
  transition: all 0.3s ease;
}
#sidebar .list-items li:hover{
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 0px 10px 3px #222;
}
#sidebar .list-items li:first-child{
  border-top: none;
}
#sidebar .list-items li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  height: 100%;
  width: 100%;
  display: block;
}
#sidebar .list-items li a i{
  margin-right: 20px;
}
#sidebar .list-items .icons{
  width: 100%;
  height: 40px;
  text-align: center;
  position: absolute;
  bottom: 100px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sidebar .list-items .icons a{
  height: 100%;
  width: 40px;
  display: block;
  margin: 0 5px;
  font-size: 18px;
  color: #f2f2f2;
  background: #4a4a4a;
  border-radius: 5px;
  border: 1px solid #383838;
  transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
  background: #404040;
}
.list-items .icons a:first-child{
  margin-left: 0px;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  width: 100%;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 700;
}
.content p{
  font-size: 40px;
  font-weight: 700;
}

That’s all, now you’ve successfully created an Animated Sidebar Menu using only HTML & CSS. 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/animated-sidebar-menu-html-css/feed/ 10 Responsive Navigation Menu Bar Design using only HTML & CSS https://www.codingnepalweb.com/responsive-navigation-menu-bar-design/ https://www.codingnepalweb.com/responsive-navigation-menu-bar-design/#comments Fri, 21 Aug 2020 15:42:00 +0000 https://codingnepalweb.com/2020/08/21/responsive-navigation-menu-bar-design-using-only-html-css/ Responsive Navigation Menu Bar Design using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Responsive Navigation Menu using only HTML & CSS. Earlier I’ve shared a blog on how to create a Responsive Chatbox Widget. In this blog, I’m going to create a Responsive Navbar that is based on pure CSS.

You may have seen the Navigation Bar on many websites. Generally, A navigation bar is a user interface (UI) element within a webpage that includes links to other sections of the website. The navigation bar is the essential UI element of a website’s design.

In this program (Responsive Navigation Menu Bar Design), there is a navbar on the top of the webpage and in this navbar, there is a logo on the left side and some navigation links on the right side of the navbar. On the PC, these navigation links are aligned in a horizontal line but on mobile devices, these links are aligned vertically. This is a pure CSS program and I didn’t use JavaScript or any JavaScript library to create this Navigation Bar.

I used CSS @media property to make this navbar responsive for any devices – mobile, tab, and pc. You can watch a full video tutorial on this program (Responsive Navbar Design).

Video Tutorial of Responsive Navigation Menu Bar Design

In the video, you have seen the Responsive Navbar and I hope you have understood the basic codes behind creating this Navbar. As you have seen, on the mobile devices these navigation links are aligned vertically and there is also shown a menu button that toggles the Navbar to hide or show. To make this icon as a toggle button, I used HTML <input type=”checkbox’> and control this checkbox with label tag.

If you like this program (Responsive Navigation Menu Bar or Navbar) 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. You can use this navbar in your HTML pages, websites, and projects.

You might like this:

Responsive Navigation Menu Bar [Source Codes]

To create this program (Responsive Navigation Menu Bar or Navbar). 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>Responsive Navigation Menu</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"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <nav>
         <div class="logo">
            Brand
         </div>
         <input type="checkbox" id="click">
         <label for="click" class="menu-btn">
         <i class="fas fa-bars"></i>
         </label>
         <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </nav>
      <div class="content">
         <div>
            Responsive Navigation Menu Bar Design
         </div>
         <div>
            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/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} 
nav{
  display: flex;
  height: 80px;
  width: 100%;
  background: #1b1b1b;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}
nav .logo{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #fff;
}
nav .menu-btn i{
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}
@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    left: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover{
    background: none;
    color: cyan;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: -1;
  width: 100%;
  padding: 0 30px;
  color: #1b1b1b;
}
.content div{
  font-size: 40px;
  font-weight: 700;
}

That’s all, now you’ve successfully created a Responsive Navigation Menu Bar Design using only 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/responsive-navigation-menu-bar-design/feed/ 41 Fullscreen Overlay Navigation Menu Bar using only HTML & CSS https://www.codingnepalweb.com/fullscreen-overlay-navigation-menu-bar-html-css/ https://www.codingnepalweb.com/fullscreen-overlay-navigation-menu-bar-html-css/#comments Sat, 15 Aug 2020 06:25:00 +0000 https://codingnepalweb.com/2020/08/15/fullscreen-overlay-navigation-menu-bar-using-only-html-css/ Fullscreen Overlay Navigation Menu Bar using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Fullscreen Overlay Navigation Menu Bar using only HTML & CSS. Earlier I have shared a blog on how to create a Full-Screen Search Bar Animation using HTML CSS & JavaScript. And now I’m going to create an attractive but easy fullscreen overlay navigation menu using only CSS.

A 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. There are many kinds of menu, depending on the website’s content and layout.

In this program (Fullscreen Overlay Navigation Menu Bar ), at first, on the webpage, there is only a menu button on the top right corner and when you click on that button then the gradient background flow from that corner then show the navigation links. There is also a background animation when you hover on a particular menu item. This design is fully based on only HTML & CSS.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Fullscreen Overlay Navigation Menu Bar).

Video Tutorial of  Fullscreen Overlay Navigation Menu Bar

 
In the video, you’ve seen the fullscreen overlay animation and I hope you’ve understood the basic codes behind creating this program. As you know I didn’t use JavaScript on this program. To create a clickable button and active the fullscreen overlay screen, I’ve used HTML <input type=”checkbox”> and label tag.

If you know JavaScript, then you can also use JavaScript on this program and can take this program to the next level by using advanced JavaScript features.

If you like this program (Fullscreen Overlay Navigation 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. You can use this program in your HTML pages, websites, and projects.

You might like this:

Fullscreen Overlay Navigation Menu Bar [Source Codes]

To create this program (Fullscreen Overlay Navigation Menu Bar). 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>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Fullscreen Overlay Navigation | 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>
      <input type="checkbox" id="active">
      <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
      <div class="wrapper">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </div>
      <div class="content">
         <div class="title">
            Fullscreen Overlay Navigation Bar
         </div>
         <p>
            using only HTML & CSS
         </p>
      </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/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
  clip-path: circle(75%);
}
.menu-btn{
  position: absolute;
  z-index: 2;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
  background: #fff;
  color: #4158d0;
}
#active:checked ~ .menu-btn i:before{
  content: "\f00d";
}
.wrapper ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  margin: 15px 0;
}
.wrapper ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
}
.wrapper ul li a:after{
  position: absolute;
  content: "";
  background: #fff;
  width: 100%;
  height: 50px;
  left: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #4158d0;
}
input[type="checkbox"]{
  display: none;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #202020;
}
.content .title{
  font-size: 40px;
  font-weight: 700;
}
.content p{
  font-size: 35px;
  font-weight: 600;
}

That’s all, now you’ve successfully created a Fullscreen Overlay Navigation Menu Bar using only 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/fullscreen-overlay-navigation-menu-bar-html-css/feed/ 4 Elastic Active Tab Animation using only HTML & CSS https://www.codingnepalweb.com/elastic-active-tab-animation-html-css/ https://www.codingnepalweb.com/elastic-active-tab-animation-html-css/#comments Fri, 07 Aug 2020 11:29:00 +0000 https://codingnepalweb.com/2020/08/07/elastic-active-tab-animation-using-only-html-css/ Elastic Tab Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Elastic Active Tab Animation using only HTML & CSS. Earlier I’ve shared a blog on how to create an Active Tab Hover Animation using HTML & CSS and that design is similar but this design is a little bit advanced and attractive that means this design has an elastic active tab animation.

The menu bar is where visitors find links to the important pages on your website. And the tabs are perfect for single-page web applications, or for displaying different topics in a smaller area. Today you will learn to create an Elastic Tab Animation using only HTML & CSS.

In this program, there is a menu bar on the webpage with five different menu icons with the texts. But when you click on the particular menu item, there is shown an Elastic Tab Animation which is filled with the gradient background color. You may have seen this type of animation somewhere, there is a used JavaScript or JavaScript library but this is a pure CSS program that’ means I used only HTML & CSS to create this animation.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Elastic Tab Animation).

Video Tutorial of an Elastic Active Tab Animation

 
In the video, you have seen an elastic active tab animation that is created using only HTML & CSS. And I hope you’ve understood the basic codes behind creating this animation. This is a simple CSS program so if you’re a beginner in web designing and you know basic HTML & CSS then you can easily understand the codes of the program.

If you like this program (Elastic Tab Animation) 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. You can use this program on your projects and the website’s menu bar.

You might like this:

Elastic Active Tab Animation [Source Codes]

To create this program (Elastic Tab 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>Elastic Tab Animation | 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="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="inbox">
            <input type="radio" name="tab" id="contact">
            <input type="radio" name="tab" id="heart">
            <input type="radio" name="tab" id="about">
            <label for="home" class="home"><a href="#"><i class="fas fa-home"></i>Home</a></label>
            <label for="inbox" class="inbox"><a href="#"><i class="far fa-comment"></i>Inbox</a></label>
            <label for="contact" class="contact"><a href="#"><i class="far fa-envelope"></i>Contact</a></label>
            <label for="heart" class="heart"><a href="#"><i class="far fa-heart"></i>Heart</a></label>
            <label for="about" class="about"><a href="#"><i class="far fa-user"></i>About</a></label>
            <div class="tab"></div>
         </nav>
      </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/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.wrapper{
  height: 60px;
  width: 55vw;
  background: #fff;
  line-height: 60px;
  border-radius: 50px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}
.wrapper nav{
  position: relative;
  display: flex;
}
.wrapper nav label{
  flex: 1;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}
.wrapper nav label a{
  position: relative;
  z-index: -1;
  color: #1d1f20;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.6s ease;
}
.wrapper nav #home:checked ~ label.home a,
.wrapper nav #inbox:checked ~ label.inbox a,
.wrapper nav #contact:checked ~ label.contact a,
.wrapper nav #heart:checked ~ label.heart a,
.wrapper nav #about:checked ~ label.about a{
  color: #fff;
}
.wrapper nav label a i{
  font-size: 25px;
  margin: 0 7px;
}
.wrapper nav .tab{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 50px;
  background: linear-gradient(45deg, #05abe0 0%,#8200f4 100%);
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper nav #inbox:checked ~ .tab{
  left: 20%;
}
.wrapper nav #contact:checked ~ .tab{
  left: 40%;
}
.wrapper nav #heart:checked ~ .tab{
  left: 60%;
}
.wrapper nav #about:checked ~ .tab{
  left: 80%;
}
.wrapper nav input{
  display: none;
}

That’s all, now you’ve successfully created an Elastic Active Tab Animation using only 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/elastic-active-tab-animation-html-css/feed/ 12 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 Active Tab Hover Animation with Icons in HTML & CSS https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/ https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/#respond Sat, 27 Jun 2020 11:02:00 +0000 https://codingnepalweb.com/2020/06/27/active-tab-hover-animation-with-icons-in-html-css/ Active Tab Hover Animation with Icons in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Menu Bar with Active Tab Hover Animation using only HTML & CSS. Earlier I have shared many blogs on how to create a Responsive Navbar or Sidebar Menu using HTML & CSS. But now it’s time to create Active Tab Animation with Icons.

Navigation Bar is the most important UI (User Interface) element of the website for visitors or content viewers to find their required information from the website. A website navigation bar is the most commonly represented as a horizontal list of links at the top of every page.

Today in this blog I’ll share with you this program (Active Tab Hover Animation with Icons). In this program, there are some menu icons (home, love, user, etc.) with a small height of line on the bottom of the Menu Icon. This line indicates to the users or viewers about which tab or menu is currently active. When you hover on the particular Menu Icon that Bottom Line will move smoothly to that hovered icon.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Active Tab Hover Animation with Icons).

Video Tutorial of Active Tab Hover Animation

 
In the video, you have seen the Active Tab Hover Animation and I hope you have understood the basic codes and concepts behind creating this animation. This is a Pure CSS Program which means I only used HTML & CSS to create this program. You can also create this type of hover animation and use it on your websites, projects, and HTML page.

If you’re a beginner and you know HTML & CSS then you can take this design at the next level with your creativity. If you like this program (Active Tab Hover Animation with Icons) 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. You can use this program on your projects and websites.

You might like this:

Active Tab Hover Animation [Source Codes]

To create this program (Active Tab Hover Animation with Icons). 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>Active Tab Hover Animation | 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="container">
         <div class="menu">
            <li><a href="#"><span class="fas fa-home"></span></a></li>
            <li><a href="#"><span class="far fa-comment"></span></a></li>
            <li><a href="#"><span class="far fa-envelope"></span></a></li>
            <li><a href="#"><span class="far fa-heart"></span></a></li>
            <li><a href="#"><span class="far fa-user"></span></a></li>
            <div class="line"></div>
         </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/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  height: 80px;
  width: 50vw;
  line-height: 80px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
.container .menu{
  display: flex;
  position: relative;
}
.container .menu li{
  list-style: none;
  flex: 1;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}
.container .menu li a{
  color: #1d1f20;
  transition: color 0.3s ease;
}
.container .menu li:hover a{
  color: #f23b26;
}
.container .menu li:first-child a{
  color: #f23b26;
}
.container .menu .line{
  position: absolute;
  height: 5px;
  width: 20%;
  background: #f23b26;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
}
.container .menu li:nth-child(2):hover ~ .line{
  left: 20%;
}
.container .menu li:nth-child(3):hover ~ .line{
  left: 40%;
}
.container .menu li:nth-child(4):hover ~ .line{
  left: 60%;
}
.container .menu li:nth-child(5):hover ~ .line{
  left: 80%;
}

That’s all, now you’ve successfully created an Active Tab Hover Animation with Icons in HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/feed/ 0 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 Minimal Navigation Menu Bar using HTML CSS & JavaScript https://www.codingnepalweb.com/navigation-menu-bar-html-css-javascript/ https://www.codingnepalweb.com/navigation-menu-bar-html-css-javascript/#comments Tue, 19 May 2020 10:22:00 +0000 https://codingnepalweb.com/2020/05/19/minimal-navigation-menu-bar-using-html-css-javascript/ Minimal Navigation Menu Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Minimal Navigation Menu Bar or Animated Sliding Menu Items on Click in HTML CSS & JavaScript. Earlier I have shared a Responsive Cards Design with Hover Animation in HTML & CSS. Now, it’s time to create a Minimal Navigation Menu Bar using jQuery.

A navigation menu or nav link is a list of links pointing to important areas of the website. They are usually presented as a horizontal bar of links at the top of every page on the website. Navigation menus give your site structure and help visitors find your content what they’re looking for.

At first, on the webpage, there is only a 3 lines-bar Menu Button, and when clicked on that menu button then these list items smoothly sliding down and appear. I also add the hover effect on Menu item lists. When you hover on the specific item, there is a cool inset box-shadow shown as you can see in the image.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Minimal Navigation Menu Bar).

Video Tutorial of Animated Minimal Navigation Bar

If you like this program (Minimal Navigation 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 have some basic knowledge of HTML & CSS then you can also easily create this type of Menu Bar or Navigation Bar. I believe you like this program. You can use this Menu Bar in your projects, websites, and anywhere you want.

Minimal Navigation Menu Bar [Source Codes]

As always, before sharing the codes of this program (Minimal Navigation Menu Bar). Let’s a few talks about the main tags and codes of this program. At first, In the HTML File, I created a <div> with the class name “menu-container” and placed all other tags inside it. Then I created another <div> for the button and inside this tag, I created a <span> for show menu icon.

After that, I created a <ul> tag and placed five <li> tags inside it. Inside each <li> tag I created a <a> anchor tag. This is a <ul> <li> based program that’s why we can create a menu list easily.

In the CSS File, first using * selector I reset default margins and padding to 0;  Then I placed all elements to horizontally center using flex property and gave height-width to the menu container. After that, I created a Menu Button to show or Hide Menu lists. Then I did basic styling to <ul> <li>, and <a> tags like I gave colors, margins-paddings, height-width to these tags. I created a hover effect on each menu list. At last, The styling all tags I gave a display to <ul> for hiding those list items.

In the jQuery File, First I created a click function. Then I created if/else statement inside this function. Inside if statement I wrote a condition if the button has “class then slide up the menu items and run the else statement. Inside else statement I wrote if the button has not “expand” class then add this class to the button. and run the setTimeout function. Inside this function, I slide down the menu items.

To create this program (Minimal Navigation Menu Bar). 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 Menu button with list</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>
      <div class="menu-container">
         <div class="button">
            Menu
            <span class="fas fa-bars"></span>
         </div>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blogs</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </div>
      <script>
         $(document).ready(function(){
           $('.button').click(function(){
             if($(this).hasClass('expand')){
               $('ul').slideUp(function(){
                 $('.button').removeClass('expand');
                 $('.fas').removeClass('expand')
               });
             }else{
               $(this).addClass('expand');
               setTimeout(function(){
                 $('.fas').addClass('expand');
                 $('ul').stop().slideDown();
               },200);
             }
           });
         });
      </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=Open+Sans:400i,600,700,800&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
.menu-container{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button{
  position: relative;
  background: #1b1b1b;
  color: white;
  font-size: 20px;
  padding: 8px 20px;
  width: 150px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
  cursor: pointer;
  transition: width .4s;
}
.button.expand{
  width: 100%;
}
.fas.expand:before{
  content: '\f00d';
}
ul{
  list-style: none;
  position: absolute;
  top: 65px;
  display: block;
  background: #1b1b1b;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  display: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
ul:before{
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #1b1b1b;
  top: -10px;
  right: 15px;
  transform: rotate(45deg);
  z-index: -1;
}
ul li{
  line-height: 35px;
  padding: 8px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
ul li:last-child{
  border-bottom: none;
}
ul li:hover{
  box-shadow: inset 0 0 5px #33ffff,
              inset 0 0 10px #66ffff;
}
ul li:hover:first-child{
  border-radius: 5px 5px 0 0;
}
ul li:hover:last-child{
  border-radius: 0 0 5px 5px;
}
ul li a{
  color: white;
  font-size: 18px;
  text-decoration: none;
}
ul li:hover a{
  color: cyan;
}

That’s all, now you’ve successfully created a Minimal Navigation Menu Bar using HTML CSS & jQuery. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/navigation-menu-bar-html-css-javascript/feed/ 3