how to create a simple navigation bar using html, css and jquery

The first thing that comes to mind when you click on your editor to start creating a website is the navigation bar. In this tutorial i will be creating a simple responsive navigation bar using html, css and JQuery. click here to view the finished navigation bar.

Technologies Used

The technologies used in this tutorials are html, css and jQuery.

HTML

The html has been designed to make the navigation bar responsible. At a certain width, a rule can be put in place to make the links fit in the new screen size.

<div class="nav-out">
   <img src="logo.png" width="50px" id="logo" />

      <i class="fa fa-bars" id="bars"></i>
      <div class="links-container">
        <a href=""><div class="active">Home</div></a>
        <a href=""><div>about</div></a>
        <a href=""><div>blog</div></a>
        <a href=""><div>contact</div></a>
        <a href=""><div>advertise</div></a>
      </div>
    </div>   

CSS

The font-family used is obtained from google fonts, in order to use it you have to paste the link below in the head tag of your html file.

<link
      href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
      rel="stylesheet"
    />

A media query has been applied to make the navigation bar take a new shape whenever the screen size is less than 600px.

body {
        margin: 0;
      }
      .nav-out {
        font-family: "Fira Sans", sans-serif;
        padding-top: 10px;
        background: #f4f4f4;
        display: inline-block;
        width: 100%;
      }

      #logo {
        margin-left: 15px;
      }
      #bars {
        vertical-align: top;
        margin-top: 5px;
        float: right;
        font-size: 21px;
        border: 2px solid black;
        padding: 3px 5px;
        cursor: pointer;
        display: none;
        margin-right: 7px;
      }

      #bars:hover {
        color: #96cf6f;
        border: 2px solid #96cf6f;
      }
      .links-container {
        vertical-align: top;
        margin-top: 7px;
        display: inline-block;
        float: right;
        margin-right: 7px;
      }

      .links-container a {
        text-decoration: none;
      }
      .links-container div {
        display: inline-block;
        margin: 0 7px;
        vertical-align: top;
        margin-top: 10px;
        padding: 5px 9px;
        border-radius: 3px;
      }

      .links-container div:hover {
        background: #96cf6f;
        color: white;
      }

      .active {
        background: #96cf6f;
        color: white;
      }

      @media only screen and (max-width: 600px) {
        .links-container {
          margin: 0;
          display: block;
          width: 100%;
          background: #f4f4f4;
          display: none;
        }
        .links-container div {
          width: 100%;
          padding: 15px 10px;
          margin: 0;
          border-radius: 0;
        }
        .links-container div:hover {
          background: #96cf6f;
          color: white;
        }
        #bars {
          display: block;
        }
        .active-div {
          background: #96cf6f;
        }
      }

JAVASCRIPT (JQUERY)

In the JavaScript section we have used JQuery to fasten things a bit. You need to import the JQuery file using the link below before it can used. The link should come before your JavaScript code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The JavaScript code enables the bars to slide toggle the links-container, it also listens for width changes in the screen size to change the shape of the links and it also listens for clicks outside the links-container and the bars to slide up the links-container.

//toggles the navigation when you click on the bars
      $("#bars").click(function() {
        $(".links-container").slideToggle();
      });

      //listens for width navigation bar width change and toggles the bar
      $(window).resize(function() {
        if ($(".nav-out").width() > 600) {
          $(".links-container").fadeIn();
        } else {
          $(".links-container").hide();
        }
      });

      //listens for clicks outside the links-container and bars
      $(document).mouseup(function(e) {
        var container = $(".links-container");
        var bars = $("#bars");

        // if the target of the click isn't the container nor a descendant of the container, the containers slides up
        if (
          !container.is(e.target) &&
          !bars.is(e.target) &&
          !($(".nav-out").width() > 600) &&
          container.has(e.target).length === 0
        ) {
          container.slideUp();
        }
      });

conclusion

creating a navigation bar can be very complicated if you don't structure your html properly. In this tutorial we structured the html in a way that works on all devices when we applied the css and JavaScript.