Demo
Hi, everyone,
In this tutorial, I'll show you how to build a simple and responsive navigation bar. Here I used bootstrap 4 and jquery to build this navigation bar.
Download Bootstrap
https://getbootstrap.com/docs/4.5/get...
Download Jquery
https://jquery.com/
Here, make sure to download the jquery.min.js.
Download font Awesome
https://fontawesome.com/start
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 rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="vendor/fontawesome/css/all.css"/> <link rel="stylesheet" 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> 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; } 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(); }); Full tutorial
https://youtu.be/wOrKQ3Plojs
Top comments (0)