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

Banner image/Hero Image Tutorial with HTML and CSS

     In this video, we will be creating a banner/hero image using CSS. A banner or hero image is a large, full-width image that is typically placed at the top of a website or webpage and is used to visually represent the content or purpose of the page. We will be using CSS properties such as background-image and background-size to create the banner/hero image, as well as some basic layout techniques to ensure that it looks great on all devices. By the end of this tutorial, you will have a fully functional banner/hero image that you can use on your own website. So, if you want to learn how to create a banner/hero image using CSS, be sure to follow this tutorial till the end.   index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tutorial 6</title> <link rel="stylesheet" href="css/tutorial6.css"> <link href="https://fonts.googleapis.co
Post a Comment
Read more

Image with Accordion Effect on Hover using CSS and HTML

     Hey there, folks! Are you looking to jazz up your website's image galleries? Well, you've come to the right place! In this tutorial, we'll show you how to create an image with accordion effect on hover using HTML and CSS. First off, let's chat about HTML and CSS. HTML is like the building blocks of web pages, while CSS adds style and personality to your website.       By combining these two, you can create some seriously cool designs that'll knock your user's socks off!In this tutorial, we're gonna be using CSS animation effects to make an accordion effect on an image when a user hovers over it. It's a slick way to add a bit of movement and interactivity to your web design. To get started, we'll walk you through creating a basic HTML structure for your image.       Then, we'll apply some CSS styles to give it that fancy accordion look. Finally, we'll create a hover effect using CSS animation that'll make your image expand and colla
Post a Comment
Read more