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)