BEST RESPONSIVE NAVBAR DESGIN HTML,CSS,JAVASCRIPT WITH SOURCE CODE DOWNLOAD
proffesionaly navbar desgin
In this artical I will be show you how to make a best responsive navbar in all devices with full source files.You can copy these codes and pest in your code editor. This navbar design is a professionaly desgined. I use html,css&javascript to desgin it.
To complete this task we have to create a file named by index.html
In this file please use bootstrap cdn links also. You can also use source files of bootsrap css and js.
We will be take 3 steps to complete this task
1. Index.html
Make a file named by Index.html. And pest this code in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Ninestars Bootstrap Template - Index</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Template Main CSS File -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex">
<div class="logo mr-auto">
<h1 class="text-light"><a href="index.html"><span>Ninestars</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="#header">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li class="drop-down"><a href="">Drop Down</a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="drop-down"><a href="#">Drop Down 2</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="#">Drop Down 5</a></li>
</ul>
</li>
<li><a href="#contact">Contact Us</a></li>
<li class="get-started"><a href="#about">Get Started</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
2. style.css
Make a another file named by style.css
and use this code
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
height: 72px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 15px 0;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo h1 {
font-size: 30px;
margin: 0;
padding: 6px 0;
line-height: 1;
font-weight: 400;
letter-spacing: 2px;
}
#header .logo h1 a, #header .logo h1 a:hover {
color: #7a6960;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#main {
margin-top: 72px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #4e4039;
padding: 10px 15px;
transition: 0.3s;
font-size: 15px;
font-family: "Open Sans", sans-serif;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #eb5d1e;
text-decoration: none;
}
.nav-menu .get-started a {
background: #eb5d1e;
color: #fff;
border-radius: 50px;
margin: 0 15px;
padding: 10px 25px;
}
.nav-menu .get-started a:hover {
background: #ee7843;
color: #fff;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #3c1300;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #eb5d1e;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
@media (max-width: 1366px) {
.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
/* Mobile Navigation */
.mobile-nav {
position: fixed;
top: 0;
bottom: 0;
z-index: 9999;
overflow-y: auto;
left: -260px;
width: 260px;
padding-top: 18px;
background: #4e4039;
transition: 0.4s;
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #f9d1c0;
padding: 10px 20px;
font-weight: 500;
transition: 0.3s;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #f39e7a;
text-decoration: none;
}
.mobile-nav .get-started a {
background: #eb5d1e;
color: #fff;
border-radius: 50px;
margin: 15px;
padding: 10px 25px;
}
.mobile-nav .get-started a:hover {
background: #ee7843;
color: #fff;
}
.mobile-nav .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 10px;
position: absolute;
right: 15px;
}
.mobile-nav .active.drop-down > a:after {
content: "\eaa0";
}
.mobile-nav .drop-down > a {
padding-right: 35px;
}
.mobile-nav .drop-down ul {
display: none;
overflow: hidden;
}
.mobile-nav .drop-down li {
padding-left: 20px;
}
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 22px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #7a6960;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(78, 64, 57, 0.9);
overflow: hidden;
display: none;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
}
3.javascript
Use this javascript code in the html documentation
<script>
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
e.preventDefault();
var target = $(this.hash);
if (target.length) {
var scrollto = target.offset().top;
if ($('#header').length) {
scrollto -= $('#header').outerHeight();
}
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
</script>
proffesionaly navbar desgin
In this artical I will be show you how to make a best responsive navbar in all devices with full source files.You can copy these codes and pest in your code editor. This navbar design is a professionaly desgined. I use html,css&javascript to desgin it.
To complete this task we have to create a file named by index.html
In this file please use bootstrap cdn links also. You can also use source files of bootsrap css and js.
We will be take 3 steps to complete this task
1. Index.html
Make a file named by Index.html. And pest this code in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Ninestars Bootstrap Template - Index</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Template Main CSS File -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex">
<div class="logo mr-auto">
<h1 class="text-light"><a href="index.html"><span>Ninestars</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="#header">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li class="drop-down"><a href="">Drop Down</a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="drop-down"><a href="#">Drop Down 2</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="#">Drop Down 5</a></li>
</ul>
</li>
<li><a href="#contact">Contact Us</a></li>
<li class="get-started"><a href="#about">Get Started</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
2. style.css
Make a another file named by style.css
and use this code
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
height: 72px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 15px 0;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo h1 {
font-size: 30px;
margin: 0;
padding: 6px 0;
line-height: 1;
font-weight: 400;
letter-spacing: 2px;
}
#header .logo h1 a, #header .logo h1 a:hover {
color: #7a6960;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#main {
margin-top: 72px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #4e4039;
padding: 10px 15px;
transition: 0.3s;
font-size: 15px;
font-family: "Open Sans", sans-serif;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #eb5d1e;
text-decoration: none;
}
.nav-menu .get-started a {
background: #eb5d1e;
color: #fff;
border-radius: 50px;
margin: 0 15px;
padding: 10px 25px;
}
.nav-menu .get-started a:hover {
background: #ee7843;
color: #fff;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #3c1300;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #eb5d1e;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
@media (max-width: 1366px) {
.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
/* Mobile Navigation */
.mobile-nav {
position: fixed;
top: 0;
bottom: 0;
z-index: 9999;
overflow-y: auto;
left: -260px;
width: 260px;
padding-top: 18px;
background: #4e4039;
transition: 0.4s;
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #f9d1c0;
padding: 10px 20px;
font-weight: 500;
transition: 0.3s;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #f39e7a;
text-decoration: none;
}
.mobile-nav .get-started a {
background: #eb5d1e;
color: #fff;
border-radius: 50px;
margin: 15px;
padding: 10px 25px;
}
.mobile-nav .get-started a:hover {
background: #ee7843;
color: #fff;
}
.mobile-nav .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 10px;
position: absolute;
right: 15px;
}
.mobile-nav .active.drop-down > a:after {
content: "\eaa0";
}
.mobile-nav .drop-down > a {
padding-right: 35px;
}
.mobile-nav .drop-down ul {
display: none;
overflow: hidden;
}
.mobile-nav .drop-down li {
padding-left: 20px;
}
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 22px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #7a6960;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(78, 64, 57, 0.9);
overflow: hidden;
display: none;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
}
3.javascript
Use this javascript code in the html documentation
<script>
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
e.preventDefault();
var target = $(this.hash);
if (target.length) {
var scrollto = target.offset().top;
if ($('#header').length) {
scrollto -= $('#header').outerHeight();
}
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
</script>
No comments:
Post a Comment
thanks for your comments