Skip to main content

Responsive Navbar Using Jquery

     





    Welcome to our tutorial on how to create a responsive navbar using jQuery. In this post, we will walk you through the steps to create a navbar that adjusts to the size of the screen and displays a dropdown menu on smaller screens. We will be using jQuery to handle the toggle event for the dropdown menu and some basic CSS to style the navbar. By the end of this tutorial, you will have a fully functional responsive navbar for your website. So let's get started!


responsive_navbar.html 
	 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewpost" content="width=device-width; maximum-scale=1">
            <title>Responsive Navbar</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
            <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="js/responsive_navbar.js"></script>
            <link rel="stylesheet"href="css/responsive_navbar.css">
        </head>
        <header>
            <nav>
                <div class="logo-section">
                    <a class="logo">YOURLOGO</a>
                    <button class="hb-button"><i class="fa fa-bars"></i></button>
                </div>
                <ul>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolios</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </nav>
        </header>
        <body>
            <div class="img-wrapper">
                <img src="image/BannerWithText.png">
            </div>
        </body>
    </html>
responsive_navbar.css 
      *{
      margin: 0;
      padding: 0;

  }

  header{
      width: 100%;
      height: auto;
  }

  nav{
      background: #efefef;
      overflow: hidden;
      position: absolute;
      width: 100%;
      box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
      -moz-box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
      -webkit-box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
  }

  .logo-section{
      float: left;
      padding: 18px;
      font-family: serif;
  }

  .hb-button{
      float: right;
      background: #222;
      color: #ffffff;
      border: none;
      font-size: 18px;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
      display: none;
  }

  nav a{
      text-decoration: none;
      color: #282828;
      font-size: 20px;
      padding: 5px;
  }

  nav ul{
      overflow: hidden;
      color: #fff;
      margin: 0;
      padding: 0;
      text-align: center;
      transition: max-height 0.5s;
      -webkit-transition: max-height 0.5s;
      -moz-transition: max-height 0.5s;
      -ms-transition: max-height 0.5s;
      -o-transition: max-height 0.5s;
  }

  nav ul li{
      float: right;
      display: inline-block;
      padding: 20px;
  }

  li > a{
      position: relative;
      color: #000;
      text-decoration: none;

  }

  li > a:hover{
      color: #000;
  }

  li > a:before{
      content:"";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }

  li > a:hover:before{
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
  }

  body{
      font-family: sans-serif;
      height: auto;
      overflow: hidden;
  }

  .img-wrapper{
      width: 100%;
  }

  img{
      margin-top: 60px;
      width: 100%;
  }

  @media screen and (max-width: 768px){
      .logo-section{
          float: none;
      }
      nav ul{
          background: #ffffff;
          max-height: 0;
          width: 100%;
      }
      nav ul.show{
          max-height: 20em;
      }
      nav ul li{
          box-sizing: border-box;
          width: 100%;
          padding: 15px;
      }
      .hb-button{
          display: inline;
      }
  }

    
    



reponsive_navbar.js

	$(document).ready(function(){
      $('.hb-button').on('click', function(){
          $('nav ul').toggleClass('show');
      });
  });
    


Watch Full Tutorial Video Here:
Labels:

Comments

Post a Comment

Popular posts from this blog

Auto Image Slider using CSS Only

     Are you ready to learn how to create an image slider using only CSS? Look no further! In this tutorial, we'll walk you through the step-by-step process of building a sleek and modern image slider using HTML and CSS. No JavaScript required! In this tutorial We'll cover setting up the HTML structure for the slider.       This will include creating the container element and styling the slider with CSS. You'll also learn how to add transitions and animations to create a smooth sliding effect. By the end of this tutorial, you'll have a fully functional image slider that you can use on your own website. Whether you're a beginner or an experienced developer, this tutorial has something for you. So let's get started creating your own image slider using CSS today! index.html <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"...
Post a Comment
Read more

Control Your Weights using this Javascript App - Simple BMI Calculator

       Embark on a coding journey that will demystify the intricacies of web development with our comprehensive tutorial, "Creating a BMI Calculator Using JavaScript." Whether you're a novice in the realm of programming or an enthusiast seeking to augment your JavaScript skills, this step-by-step guide promises to be an illuminating experience. To kick off our journey, we'll delve into the fundamental building blocks of web development—HTML, CSS, and JavaScript. This tutorial caters to individuals ranging from absolute beginners to those looking to fortify their existing skill set. By providing a holistic understanding of these essential languages, participants can lay a solid foundation for their future endeavors in the dynamic field of web development.      As we progress through the tutorial, we'll focus extensively on JavaScript, unraveling its intricacies in a manner accessible to beginners. The comprehensive nature of this tutorial makes it an id...
Post a Comment
Read more

Display Battery Status using HTML, CSS and Javascript

     Hey everyone, welcome to Code Instinct! In this tutorial, we're going to show you how to create a battery status indicator using HTML, CSS and Javascript. This is a great Javascript project for beginners who want to learn how to use the Battery API Javascript and create a battery level indicator. We'll also be showing you how to add a battery charging animation and CSS battery shape to make it more visually appealing.Our tutorial will cover all the steps needed to create your own battery status indicator with ease. You'll learn how to use the Battery API Javascript to get the current battery level of your device, and display it using HTML and CSS.       We'll also be covering the different types of battery indicators you can use and how to customize them to fit your website design. You'll learn how to create a battery charging animation using Javascript and CSS to give your battery status indicator a more dynamic look.At Code Instinct, we're dedi...
Post a Comment
Read more