Navbar – 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. Sat, 13 May 2023 17:28:27 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Navigation Menu with Indicator | HTML CSS & JavaScript https://www.codingnepalweb.com/navigation-menu-with-indicator-html-css-javascript/ https://www.codingnepalweb.com/navigation-menu-with-indicator-html-css-javascript/#respond Mon, 13 Dec 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4195 Navigation Menu with Indicator | HTML CSS & JavaScript

Hello friend, I hope you are doing awesome. Today here I have shown how to create a Navigation Menu with Indicator Bar using HTML CSS and JavaScript. As you know there are lots of Responsive Navigation Menu bar that I have created.

We have seen the various type of navbar hover animation on there. Today we are going to create clickable navigation links with beautifully animated indicators.

A navigation menu bar is the collection of several navigation links which helps the user to redirect to the different section of the webpages and an indicator is the design that indicates uses to know in what nav links or page they are. The Navigation menu bar can be aligned horizontally or vertically that depending on website UI/UX designs and concepts.

The navigation menu bar that we are going to build is specially designed for mobile devices. As you can see on the given image of our navigation menu bar with a beautiful indicator. This type of navigation bar is typically seen on the mobile devices at the bottom aligned.

Let’s have a look at the given image of our navbar menu with an indicator. There is a total of five nav links on that navigation bar with an indicator. In the first navigation bar, our first nav link is inactive condition. At the second navbar, the third nav link is in-active condition. Actually, when we click on any nav link, that indicator moves to that clicked nav links icon, and also ion changes into a solid color.

Rather than theoretically, I would like to show you the virtual demo of this Navigation Menu with Indicator. Also plus point for you is, you will know what  HTML CSS and JavaScript codes I used and how they work perfectly.

Video Tutorial of Navigation Bar with Indicator

You will get all the HTML CSS and JavaScript source code that I have used to create this Animated Navigation Menu with Indicator. Before jumping to the source code, you need to know some basic points of this video tutorial.

As you have seen on the given video tutorial of this Animated Navbar Menu with Indicator. At first, we have seen the first we have seen five nav links icons and one indicator. The first nav link is in-active condition. Because that icon is different from the other four nav links and also indicator is at the bottom of the icon.

When I click on the other icon the indicator is slides to that clicked icon and the icon is changed into a different color. Actually, there are 10 icons, five are solid shapes and 5 are regular shapes. To create that curved shape on the indicator I used before and after CSS property and box-shadow.  The UI design is made by HTML and CSS only. To change the icon from regular to solid and to slide the indicator I used some JavaScript.

I have provided all the HTML CSS and JavaScript code of this animated navigation menu bar with a beautiful indicator.

You Might Like This:

Navigation Menu with Indicator [Source Code]

To get the following HTML and CSS code for an Animated Navigation Menu Bar with Beautiful Indicator. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Navigation Menu with Indicator | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
   </head>
<body>
  <div class="navbar">
    <ul>
      <li class="active">
        <a href="#">
          <i class='bx bx-home icon'></i>
          <i class='bx bxs-home activeIcon'></i>
        </a>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-user icon'></i>
          <i class='bx bxs-user activeIcon'></i>
        </a>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-heart icon'></i>
          <i class='bx bxs-heart activeIcon'></i>
        </a>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-folder icon'></i>
          <i class='bx bxs-folder activeIcon'></i>
        </a>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cog icon'></i>
          <i class='bx bxs-cog activeIcon'></i>
        </a>
      </li>
      <div class="indicator"></div>
    </ul>
  </div>

  <script>

  const navBar = document.querySelector(".navbar")
        allLi = document.querySelectorAll("li");

  allLi.forEach((li, index) => {
     li.addEventListener("click" , e =>{
       e.preventDefault(); //preventing from submitting
       navBar.querySelector(".active").classList.remove("active");
       li.classList.add("active");

       const indicator = document.querySelector(".indicator");
       indicator.style.transform = `translateX(calc(${index * 90}px))`;
     });
  });

  </script>

</body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
}
.navbar{
  position: relative;
  height: 120px;
  width: 500px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.navbar ul{
  position: relative;
  display: flex;
}
.navbar ul li{
  position: relative;
  list-style-type: none;
}
.navbar ul li a{
  position: relative;
  height: 120px;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.navbar ul li a i{
  position: absolute;
  font-size: 38px;
  color: #7d2ae8;
}
ul li a i.activeIcon{
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s ease;
  transition-delay: 0.2s;
}
.navbar ul li.active a i{
  opacity: 1;
  pointer-events: auto;
}
.navbar ul .indicator{
  position: absolute;
  bottom: -19px;
  left: 34px;
  height: 36px;
  width: 25px;
  background: #7d2ae8;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
ul .indicator::before{
  content: "";
  position: absolute;
  left: -15px;
  bottom: 50%;
  height: 22px;
  width: 20px;
  background: #fff;
  border-bottom-right-radius: 20px;
  box-shadow: 0 10px 0 #7d2ae8;
}
ul .indicator::after{
  content: "";
  position: absolute;
  right: -15px;
  bottom: 50%;
  height: 22px;
  width: 20px;
  background: #fff;
  border-bottom-left-radius: 20px;
  box-shadow: 0 10px 0 #7d2ae8;
}

If you face any difficulties while creating your Navigation Bar or your code is not working as expected, you can download the source code files for this Navbar Menu for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/navigation-menu-with-indicator-html-css-javascript/feed/ 0 Responsive Sticky Navigation Bar using HTML CSS & JavaScript https://www.codingnepalweb.com/responsive-sticky-navigation-bar-html-css/ https://www.codingnepalweb.com/responsive-sticky-navigation-bar-html-css/#comments Thu, 15 Oct 2020 12:51:00 +0000 https://codingnepalweb.com/2020/10/15/responsive-sticky-navigation-bar-using-html-css-javascript/ Responsive Sticky Navigation Bar using HTML CSS & JavaScript
Hello readers, Today in this blog you’ll learn how to create a Responsive Sticky Navigation Bar using HTML CSS & JavaScript. Earlier I’ve shared a blog on how to create a Responsive Navigation Menu Bar but now I’m going to create a Responsive Sticky Navbar on Scroll.

 
What is a Sticky Menu on Scroll? Sticky, or fixed, the navbar is a  graphical UI element of the website that is locked into place (mainly on top) on scroll so that it does not disappear or scroll when the user scrolls the page up or down.

In this design [Responsive Sticky Navigation Bar], at first, on the webpage there a transparent navbar that means it has no background color but when you scroll a little bit down then the background color appears and this navbar locked on the top of the webpage.

This navigation bar is mobile-friendly which means this navbar is responsive to mobile devices also. In the PC, this navbar is shown horizontally but on mobile, this navbar is shown vertically.

Video Tutorial of Responsive Sticky Navigation Bar

 
In the video, you have seen the Responsive Sticky Navigation Bar using HTML CSS & JavaScript and I hope you’ve understood the basic codes behind creating this navigation bar. In this video tutorial, I haven’t written the codes of Clip Animation on Menu which I’ve shown in the demo part but I’ve provided codes of the menu in the source files.

If you’re a beginner and you don’t know JavaScript, then you can download the files of this program from the below link mentioned as “Click here to download files” and use it on your projects, websites, and HTML pages without any limitations.

You might like this:

Responsive Sticky Navigation Bar [Source Codes]

To create this program (Sticky Navigation 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 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>Sticky Navigation Bar | 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 class="navbar">
    <div class="content">
      <div class="logo">
        <a href="#">CodingNepal</a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="banner"></div>
  <div class="about">
    <div class="content">
      <div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
    </div>
  </div>

  <script>
    const body = document.querySelector("body");
    const navbar = document.querySelector(".navbar");
    const menuBtn = document.querySelector(".menu-btn");
    const cancelBtn = document.querySelector(".cancel-btn");
    menuBtn.onclick = ()=>{
      navbar.classList.add("show");
      menuBtn.classList.add("hide");
      body.classList.add("disabled");
    }
    cancelBtn.onclick = ()=>{
      body.classList.remove("disabled");
      navbar.classList.remove("show");
      menuBtn.classList.remove("hide");
    }
    window.onscroll = ()=>{
      this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
    }
  </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/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;
}
/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}
::selection{
  background: rgb(0,123,255,0.3);
}
.content{
  max-width: 1250px;
  margin: auto;
  padding: 0 30px;
}
.navbar{
  position: fixed;
  width: 100%;
  z-index: 2;
  padding: 25px 0;
  transition: all 0.3s ease;
}
.navbar.sticky{
  background: #1b1b1b;
  padding: 10px 0;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}
.navbar .menu-list{
  display: inline-flex;
}
.menu-list li{
  list-style: none;
}
.menu-list li a{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.menu-list li a:hover{
  color: #007bff;
}
.banner{
  background: url("banner.jpg") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.about{
  padding: 30px 0;
}
.about .title{
  font-size: 38px;
  font-weight: 700;
}
.about p{
  padding-top: 20px;
  text-align: justify;
}
.icon{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn{
  position: absolute;
  right: 30px;
  top: 20px;
}
@media (max-width: 1230px) {
  .content{
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 900px) {
  .content{
    padding: 0 30px;
  }
}
@media (max-width: 868px) {
  body.disabled{
    overflow: hidden;
  }
  .icon{
    display: block;
  }
  .icon.hide{
    display: none;
  }
  .navbar .menu-list{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 400px;
    left: -100%;
    top: 0px;
    display: block;
    padding: 40px 0;
    text-align: center;
    background: #222;
    transition: all 0.3s ease;
  }
  .navbar.show .menu-list{
    left: 0%;
  }
  .navbar .menu-list li{
    margin-top: 45px;
  }
  .navbar .menu-list li a{
    font-size: 23px;
    margin-left: -100%;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .navbar.show .menu-list li a{
    margin-left: 0px;
  }
}
@media (max-width: 380px) {
  .navbar .logo a{
    font-size: 27px;
  }
}

That’s all, now you’ve successfully created a Responsive Sticky Navigation Bar using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, 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-sticky-navigation-bar-html-css/feed/ 26 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 Responsive Navbar with Search Box using HTML CSS & JavaScript https://www.codingnepalweb.com/responsive-navbar-with-search-box/ https://www.codingnepalweb.com/responsive-navbar-with-search-box/#comments Fri, 19 Jun 2020 12:44:00 +0000 https://codingnepalweb.com/2020/06/19/responsive-navbar-with-search-box-using-html-css-javascript/ Responsive Navbar with Search Box using HTML CSS & JavaScript

Hello readers, Today in this blog, you’ll learn how to create a Fully Responsive Navbar with Search using HTML CSS & JavaScript. Earlier I have shared many blogs about Responsive Navigation Bar and Responsive Sidebar Menu but still, I have not shared any blog on Responsive Navbar with Search Box. So now, it’s time to create a Responsive Navbar with a Search Box.

A navigation bar is a user interface element within a webpage that contains links to other parts of the website. A website navigation bar is most usually displayed as a horizontal list of links at the top of each page.

Today in this blog, I’ll share with you this program (Responsive Navbar with Search Box). This navbar is fully responsive to any device. On mobile devices, this navbar will adjust its height-width automatically according to the device’s height-width. I used CSS Flex and @media property to make this Navbar Fully Responsive. The search box of this navbar is to create only for design purposes so, when you entered any info in the search bar and click on the search button, it won’t show you any results.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box

 
As you have seen in the video, this Navbar is fully Responsive for any device. If you’re a beginner in Web Designing then this tutorial helped you to understood the basic codes and concepts behind creating the Responsive Navbar and their Search Box.

If you like this program (Responsive Navbar with Search Box) 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. If you know JavaScript perfectly then you can easily make this search box workable by adding some JavaScript codes.

You might like this:

Responsive Navbar with Search Box [Source Codes]

To create this program (Responsive Navbar with Search Box). 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 Navbar with Search Box | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <nav>
         <div class="menu-icon">
            <span class="fas fa-bars"></span>
         </div>
         <div class="logo">
            CodingNepal
         </div>
         <div class="nav-items">
            <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>
         </div>
         <div class="search-icon">
            <span class="fas fa-search"></span>
         </div>
         <div class="cancel-icon">
            <span class="fas fa-times"></span>
         </div>
         <form action="#">
            <input type="search" class="search-data" placeholder="Search" required>
            <button type="submit" class="fas fa-search"></button>
         </form>
      </nav>
      <div class="content">
         <header class="space">Responsive Navbar with Search Box</header>
         <div class="space text">
            using HTML CSS & JavaScript
         </div>
      </div>
      <script>
         const menuBtn = document.querySelector(".menu-icon span");
         const searchBtn = document.querySelector(".search-icon");
         const cancelBtn = document.querySelector(".cancel-icon");
         const items = document.querySelector(".nav-items");
         const form = document.querySelector("form");
         menuBtn.onclick = ()=>{
           items.classList.add("active");
           menuBtn.classList.add("hide");
           searchBtn.classList.add("hide");
           cancelBtn.classList.add("show");
         }
         cancelBtn.onclick = ()=>{
           items.classList.remove("active");
           menuBtn.classList.remove("hide");
           searchBtn.classList.remove("hide");
           cancelBtn.classList.remove("show");
           form.classList.remove("active");
           cancelBtn.style.color = "#ff3d00";
         }
         searchBtn.onclick = ()=>{
           form.classList.add("active");
           searchBtn.classList.add("hide");
           cancelBtn.classList.add("show");
         }
      </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=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body{
  background: #f2f2f2;
}
nav{
  background: #171c24;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 100px;
}
nav .logo{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
}
nav .nav-items{
  display: flex;
  flex: 1;
  padding: 0 0 0 40px;
}
nav .nav-items li{
  list-style: none;
  padding: 0 15px;
}
nav .nav-items li a{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
nav .nav-items li a:hover{
  color: #ff3d00;
}
nav form{
  display: flex;
  height: 40px;
  padding: 2px;
  background: #1e232b;
  min-width: 18%!important;
  border-radius: 2px;
  border: 1px solid rgba(155,155,155,0.2);
}
nav form .search-data{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #fff;
  font-size: 17px;
  border: none;
  font-weight: 500;
  background: none;
}
nav form button{
  padding: 0 15px;
  color: #fff;
  font-size: 17px;
  background: #ff3d00;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
nav form button:hover{
  background: #e63600;
}
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
  width: 40px;
  text-align: center;
  margin: 0 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: none;
}
nav .menu-icon span,
nav .cancel-icon,
nav .search-icon{
  display: none;
}
@media (max-width: 1245px) {
  nav{
    padding: 0 50px;
  }
}
@media (max-width: 1140px){
  nav{
    padding: 0px;
  }
  nav .logo{
    flex: 2;
    text-align: center;
  }
  nav .nav-items{
    position: fixed;
    z-index: 99;
    top: 70px;
    width: 100%;
    left: -100%;
    height: 100%;
    padding: 10px 50px 0 50px;
    text-align: center;
    background: #14181f;
    display: inline-block;
    transition: left 0.3s ease;
  }
  nav .nav-items.active{
    left: 0px;
  }
  nav .nav-items li{
    line-height: 40px;
    margin: 30px 0;
  }
  nav .nav-items li a{
    font-size: 20px;
  }
  nav form{
    position: absolute;
    top: 80px;
    right: 50px;
    opacity: 0;
    pointer-events: none;
    transition: top 0.3s ease, opacity 0.1s ease;
  }
  nav form.active{
    top: 95px;
    opacity: 1;
    pointer-events: auto;
  }
  nav form:before{
    position: absolute;
    content: "";
    top: -13px;
    right: 0px;
    width: 0;
    height: 0;
    z-index: -1;
    border: 10px solid transparent;
    border-bottom-color: #1e232b;
    margin: -20px 0 0;
  }
  nav form:after{
    position: absolute;
    content: '';
    height: 60px;
    padding: 2px;
    background: #1e232b;
    border-radius: 2px;
    min-width: calc(100% + 20px);
    z-index: -2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  nav .menu-icon{
    display: block;
  }
  nav .search-icon,
  nav .menu-icon span{
    display: block;
  }
  nav .menu-icon span.hide,
  nav .search-icon.hide{
    display: none;
  }
  nav .cancel-icon.show{
    display: block;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.space{
  margin: 10px 0;
}
nav .logo.space{
  color: red;
  padding: 0 5px 0 0;
}
@media (max-width: 980px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
    margin: 0 20px;
  }
  nav form{
    right: 30px;
  }
}
@media (max-width: 350px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
    margin: 0 10px;
    font-size: 16px;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.content .space{
  margin: 10px 0;
}

That’s all, now you’ve successfully created a Responsive Navbar with Search Box using HTML CSS & JavaScript. 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-navbar-with-search-box/feed/ 50 Side Navigation Menu Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/side-navigation-menu-bar-in-html-css-2/ https://www.codingnepalweb.com/side-navigation-menu-bar-in-html-css-2/#comments Sun, 17 May 2020 08:15:00 +0000 https://codingnepalweb.com/2020/05/17/side-navigation-menu-bar-in-html-css-javascript/ Side Navigation Menu Bar in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Side Navigation Menu Bar using HTML CSS & jQuery. Earlier I have shared a Responsive Dropdown Menu Bar using only HTML & CSS. Now, it’s time to create a side navigation menu bar in jQuery.

The sidebar can be used to encourage the reader or visitors to read the more detailed main article. For example, a sidebar can be made that lists the major points of the main article, content, or asks questions about the information that will be given in the main article as a way to entice readers to read the whole main section.

In this Sidebar, there are some menu items and when you click on the specific icon this web page scroll and show you the clicked section. That means when click on the about section the page will scroll down and show you the about section. In the menu items you can see there is a small vertical line on the left corner of items. That line is used to inform that which item is active now.

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

Video Tutorial of Side Navigation Menu Bar in jQuery

 
I used jQuery to only show or hide the sidebar. All this design based in HTML & CSS. If you’re a beginner you can also create this type of sidebar menu. If you like this program (Side 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.

Sidebar Menu using HTML CSS & jQuery [Source Codes]

To create this program (Side 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>Side Menu Bar</title> 
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <ul>
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#gallery">Gallery</a></li>
         <li><a href="#services">Services</a></li>
         <li><a href="#feedback">Feedback</a></li>
         <li><a class="contact" href="#contact">Contact</a></li>
      </ul>
      <section>
         <i class="fas fa-bars"></i>
         <div class="sec1"></div>
         <h2 id="about">
            About Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec2"></div>
         <h2 id="portfolio">
            Portfolio Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec3"></div>
         <h2 id="gallery">
            Gallery Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec4"></div>
         <h2 id="services">
            Services Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec5"></div>
         <h2 id="feedback">
            Feedback Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec6"></div>
         <h2 id="contact">
            Contact Section
         </h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
         </p>
         <div class="sec7"></div>
      </section>
    <script>
         $(document).ready(function(){
           $('i').click(function(){
             $('ul').toggleClass('ul_show');
             $('section').toggleClass('slide_image');
           });
           $('li').click(function(){
             $(this).addClass('active').siblings().removeClass('active');
           });
         });
         
      </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;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: montserrat;
}
ul{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -240px;
  width: 240px;
  background: #1e1e1e;
  height: 100vh;
  overflow-y: auto;
  transition: all .3s;
}
ul li{
  height: 65px;
  outline: none;
}
ul li a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 70px;
  font-size: 20px;
  color: white;
  padding-left: 10%;
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid black;
  border-left: 5px solid transparent;
}
li a.contact{
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.active a{
  color: #B93632;
  border-left: 5px solid #B93632;
  background: #1B1B1B;
}
section{
  margin-left: 0px;
  transition: all .3s;
}
i{
  position: fixed;
  margin: 20px 25px;
  font-size: 40px;
  color: orangered;
  cursor: pointer;
}
.sec1{
  margin-left: -20px;
  background: url(home.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec2{
  margin-left: -20px;
  background: url(about.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec3{
  margin-left: -20px;
  background: url(portfolio.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec4{
  margin-left: -20px;
  background: url(gallery.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec5{
  margin-left: -20px;
  background: url(services.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec6{
  margin-left: -20px;
  background: url(feedback.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec7{
  margin-left: -20px;
  background: url(contact.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
h2{
  font-size: 40px;
  padding: 15px 20px;
}
p{
  padding: 0 20px 10px 20px;
  text-align: justify;
}
.ul_show{
  margin-left: 0px;
}
.slide_image{
  margin-left: 260px;
}

That’s all, now you’ve successfully created a Side Navigation Menu Bar in HTML CSS & JavaScript. 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/side-navigation-menu-bar-in-html-css-2/feed/ 5 Responsive Navigation Menu Bar using CSS Flexbox https://www.codingnepalweb.com/responsive-navigation-menu-bar-css-flexbox/ https://www.codingnepalweb.com/responsive-navigation-menu-bar-css-flexbox/#comments Sat, 09 May 2020 08:19:00 +0000 https://codingnepalweb.com/2020/05/09/responsive-navigation-menu-bar-using-css-flexbox/ Responsive Navigation Menu Bar using CSS Flexbox

Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Navigation Menu Bar in HTML & CSS using Flexbox. Earlier I have shared also a Responsive Navbar using HTML & CSS without using Flexbox, now it’s time to create a Responsive Navbar using CSS Flexbox.

A website navigation bar is most commonly displayed as a plane/horizontal list of links at the top of each page. It may be below the header or logo, but it is always located before the main content of the page.

As you can see in the image, this is a fully responsive navbar using HTML & CSS (Flexbox). When you resize or minimize your PC window, this navbar automatically takes their height and width according to the window width and height.

In the PC version, this navbar menu is shown in horizontal shape but in the mobile version, this navbar menu is shown in vertical shape. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navigation Menu Bar).

Video Tutorial of Responsive Navbar using CSS Flexbox

 
If you are a beginner, you can also create this program (Responsive Navigation Menu Bar). You can use this navbar in your projects, websites, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this navbar at the next level with your creativity.

If you want to get the source code of this responsive navbar with flexbox. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Responsive Menu Bar using HTML & CSS [Source Codes]

To create this program (Responsive 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 -->
<head>
   <meta charset="utf-8">
   <title>Responsive Navigation Bar</title>
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-3.4.1.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>
      <ul>
         <li class="logo">CodingNepal</li>
         <li class="items"><a href="#">Home</a></li>
         <li class="items"><a href="#">About</a></li>
         <li class="items"><a href="#">Blogs</a></li>
         <li class="items"><a href="#">Contact</a></li>
         <li class="items"><a href="#">Feedback</a></li>
         <li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
      </ul>
   </nav>
   <script>
      $(document).ready(function(){
        $('.btn').click(function(){
          $('.items').toggleClass("show");
          $('ul li').toggleClass("hide");
        });
      });
   </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=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
nav{
  background: #151515;
  padding: 5px 40px;
}
nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav ul li{
  padding: 15px 0;
  cursor: pointer;
}
nav ul li.items{
  position: relative;
  width: auto;
  margin: 0 16px;
  text-align: center;
  order: 3;
}
nav ul li.items:after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background: #33ffff;
  opacity: 0;
  transition: all 0.2s linear;
}
nav ul li.items:hover:after{
  opacity: 1;
  bottom: 8px;
}
nav ul li.logo{
  flex: 1;
  color: white;
  font-size: 23px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
nav ul li a{
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: .4s;
}
nav ul li:hover a{
  color: cyan;
}
nav ul li i{
  font-size: 23px;
}
nav ul li.btn{
  display: none;
}
nav ul li.btn.hide i:before{
  content: '\f00d';
}
@media all and (max-width: 900px){
  nav{
    padding: 5px 30px;
  }
  nav ul li.items{
    width: 100%;
    display: none;
  }
  nav ul li.items.show{
    display: block;
  }
  nav ul li.btn{
    display: block;
  }
  nav ul li.items:hover{
    border-radius: 5px;
    box-shadow: inset 0 0 5px #33ffff,
                inset 0 0 10px #66ffff;
  }
  nav ul li.items:hover:after{
    opacity: 0;
  }
}

That’s all, now you’ve successfully created a Responsive Navigation Menu Bar using CSS Flexbox. If your code does not 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-css-flexbox/feed/ 6 Responsive Sidebar Menu using HTML & CSS https://www.codingnepalweb.com/responsive-sidebar-menu-html-css/ https://www.codingnepalweb.com/responsive-sidebar-menu-html-css/#comments Sun, 26 Apr 2020 08:32:00 +0000 https://codingnepalweb.com/2020/04/26/responsive-sidebar-menu-using-html-css/ Responsive Sidebar Menu using HTML and CSS

Hello reader, Today in this blog you’ll learn how to create a Responsive Sidebar Menu using HTML & CSS only. Previously I have shared a Sidebar Menu using HTML & CSS only which was not responsive, now it’s time to create a Responsive Side Navigation Menu Bar that slides from the left or right side.

As you can see in the image, this is a Side Menu Bar using HTML & CSS only. This is a cool, attractive, and fancy Sidebar Menu. While I was creating this Sidebar Menu. There are some menu items, icons, and some texts. There is a Sidebar Menu with the ‘X’ button on the image. But when you click on that ‘X’ button the sidebar menu sliding to the left side.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Responsive Sidebar Menu).

Video Tutorial of Responsive Side Navigation Menu Bar

 
I hope you have understood the codes and concepts behind the creation of this Responsive Sidebar Menu. As you have seen in the video, this is a fully Responsive Sidebar Menu using HTML & CSS only. I have used HTML and CSS only to create this responsive sidebar menu. That’s mean this is a pure CSS program.

If you like this program (Responsive Sidebar Menu) 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.

Responsive Side Menu Bar using HTML & CSS [Source Codes]

To create this program (Responsive Sidebar 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>Responsive Sidebar Menu</title> -->
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <input type="checkbox" id="check">
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
      <header>My Menu</header>
      <a href="#" class="active">
        <i class="fas fa-qrcode"></i>
        <span>Dashboard</span>
      </a>
      <a href="#">
        <i class="fas fa-link"></i>
        <span>Shortcuts</span>
      </a>
      <a href="#">
        <i class="fas fa-stream"></i>
        <span>Overview</span>
      </a>
      <a href="#">
         <i class="fas fa-calendar"></i>
        <span>Events</span>
      </a>
      <a href="#">
        <i class="far fa-question-circle"></i>
        <span>About</span>
      </a>
      <a href="#">
        <i class="fas fa-sliders-h"></i>
        <span>Services</span>
      </a>
      <a href="#">
        <i class="far fa-envelope"></i>
        <span>Contact</span>
      </a>
    </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=Montserrat:600|Open+Sans:600&display=swap');
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.sidebar{
  position: fixed;
  width: 240px;
  left: -240px;
  height: 100%;
  background: #1e1e1e;
  transition: all .5s ease;
}
.sidebar header{
  font-size: 28px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #1b1b1b;
  user-select: none;
  font-family: 'Montserrat', sans-serif;
}
.sidebar a{
  display: block;
  height: 65px;
  width: 100%;
  color: white;
  line-height: 65px;
  padding-left: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 5px solid transparent;
  font-family: 'Open Sans', sans-serif;
  transition: all .5s ease;
}
a.active,a:hover{
  border-left: 5px solid #b93632;
  color: #b93632;
}
.sidebar a i{
  font-size: 23px;
  margin-right: 16px;
}
.sidebar a span{
  letter-spacing: 1px;
  text-transform: uppercase;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  cursor: pointer;
  color: white;
  border-radius: 5px;
  border: 1px solid #262626;
  margin: 15px 30px;
  font-size: 29px;
  background: #262626;
  height: 45px;
  width: 45px;
  text-align: center;
  line-height: 45px;
  transition: all .5s ease;
}
label #cancel{
  opacity: 0;
  visibility: hidden;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  margin-left: 245px;
  opacity: 0;
  visibility: hidden;
}
#check:checked ~ label #cancel{
  margin-left: 245px;
  opacity: 1;
  visibility: visible;
}
@media(max-width : 860px){
  .sidebar{
    height: auto;
    width: 70px;
    left: 0;
    margin: 100px 0;
  }
  header,#btn,#cancel{
    display: none;
  }
  span{
    position: absolute;
    margin-left: 23px;
    opacity: 0;
    visibility: hidden;
  }
  .sidebar a{
    height: 60px;
  }
  .sidebar a i{
    margin-left: -10px;
  }
  a:hover {
    width: 200px;
    background: inherit;
  }
  .sidebar a:hover span{
    opacity: 1;
    visibility: visible;
  }
}

That’s all, now you’ve successfully created a Responsive Sidebar Menu using 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-sidebar-menu-html-css/feed/ 11