Responsive Navigation with Bootstrap – EASY WAY

[ad_1]

This is a quick and completely Responsive navigation that have developed with Bootstrap, CSS, and jQuery. You need to download Bootstrap, Font Awesome and jQuery first, then you can start coding.

At first, In the Index.html page you have to include bootstrap.min.css from Bootstrap,

all.css from Font Awesome and style.css inside the <head> element.Next,  jQuery.min.js from jQuery, bootstrap.min.js from bootstrap, and main.js should be included.

Ensure that all three files are included before closing the body tag. And you’ve got to follow the order as well. jQuery first, bootstrap second and main.js.

  1. index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MY NAV</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <link type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"/>
    <link type="text/css" href="vendor/fontawesome/css/all.css"/>
    <link type="text/css" href="css/style.css" />

  </head>
  <body>
    <div class="page-wrap">
      <div class="nav-style">
        <div class="mobile-view">
          <div class="mobile-view-header">
            <div class="mobile-view-close">
              <i class="fas fa-times js-toggle"></i>
            </div>
          </div>
          <div class="mobile-view-body"></div>
        </div>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div class="container py-2 px-2">
            <a class="navbar-brand" href="#">Navbar</a>

            <div class="d-inline-block d-lg-none ml-md-0 ml-auto py-3">
              <i class="fas fa-bars js-toggle" style="font-size: 25px; color: white"></i>
            </div>

            <div class="d-none d-lg-block">
              <ul class="navbar-nav ml-auto js-clone-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <script type="text/javascript" src="vendor/jquery/jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

2) style.css

.page-wrap:before{
    transition: .3s all ease-in-out;
    background: rgba(0, 0, 0, 0.6);
    content: "";
    position: absolute;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

.off-view .page-wrap{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    overflow: hidden;
}

.off-view .page-wrap:before{
    opacity: 0.5;
    visibility: visible;
}

.mobile-view{
    width:300px;
    position: fixed;
    right: 0;
    z-index: 2000;
    padding-top: 20px;
    background: white;
    height: calc(100vh);
    transform: translateX(110%);
    box-shadow: -10px 0 20px -10px rgba(0,0,0,0.1);
    transition: .3s all ease-in-out;
}

.off-view .mobile-view{
    transform: translateX(0%);
}
.mobile-view .mobile-view-header{
    width: 100%;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-view .mobile-view-header .mobile-view-close{
    float: right;
    margin-top: 8px;
    margin-right: 10px;
}


.mobile-view .mobile-view-header .mobile-view-close i{
    font-size: 30px;
    display: inline-block;
    padding-right: 10px;
    line-height: 1;
    cursor: pointer;
    transition: .3s all ease;
}

.mobile-view .mobile-view-body{
    overflow: scroll;
    position: relative;
    padding: 20px;
    height: calc(100vh - 52px);
    padding-bottom: 150px;
    padding-top: 50px;
}

.mobile-view .clone-view{
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

.mobile-view .clone-view a{
    padding: 10px 20px;
    display: block;
    position: relative;
    color: black;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
}

3) main.js

jQuery(document).ready(function ($) {
  "use strict";

  var navclone = function () {
    $(".js-clone-nav").each(function () {
      var $this = $(this);
      $this.clone().attr("class", "clone-view").appendTo(".mobile-view-body");
    });

    $("body").on("click", ".js-toggle", function (e) {
      var $this = $(this);
      e.preventDefault();

      if ($("body").hasClass("off-view")) {
        $("body").removeClass("off-view");
      } else {
        $("body").addClass("off-view");
      }
    });

    $(document).mouseup(function (e) {
      var container = $(".mobile-view");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });

    $(window).resize(function () {
      var $this = $(this),
        w = $this.width();
      if (w > 768) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });
  };
  navclone();
});

[ad_2]

Source link

About the author: Pixim Planet

Leave a Reply

Your email address will not be published. Required fields are marked *