How To Create Responsive Navbar using HTML, CSS & jQuery
 |
| Responsive Navbar like Bootstrap Navbar using HTML CSS jQuery CodingTuting |
A beautiful Responsive Design Navigation Menu is important for a website. The Navigation Menu Bar is also known as Navbar, Menubar, etc.
What is Navbar in HTML?
A Navbar is a strip which contains the menu/links of other pages. Eg: Home, About, Contact, etc. There are two types of Navbar. 1. Horizontal Navbar, 2. Vertical Navbar. We'll create a Horizontal Navigation Bar.
In this tutorial, we'll create a beautiful responsive design navbar using HTML, CSS, and jQuery. Generally, people use Bootstrap Navbar. Especially new designers who haven't much knowledge about CSS & JS, go with Bootstrap.
Understand jQuery more. Click here
Many websites are responsive, but it is not sure that - the Bootstrap has used on that website. If you are doing the job in the company- You may get a task to make Responsive Menu without using Bootstrap. So, you have to do it.
But can we create a responsive navbar without bootstrap? The simple answer is - Yes. So How to do it ? Here we'll create a beautiful colorful responsive navbar with dropdown without bootstrap. Let's begin.
Step 1- HTML Design of Navbar
Create a division and make an HTML Unordered List of menus and a form for Search Box in the division. Give a discriptive class name for applying CSS.Step 2- Add Required Styles and Scripts
Create an empty CSS page "Style.css" and add it in the <head> section of the page. We are using the Font Awesome icon in our code. You can use another icon. Or you can go with Font Awesome.Also, we'll create a small jQuery function. So add Font Awesome and the jQuery before the closing of the </body> tag.
Here is the Code of the HTML Design.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Beautiful Navbar </title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav nav-sky">
<div class="menu-btn"> <i class="fas fa-bars"></i> </div>
<div class="nav-elements">
<ul class="nav-content">
<li> <a href="#" title="Home" class="active"> <i class="fas fa-home"></i> Home </a> </li>
<li> <a href="#" title="About"> <i class="fas fa-address-card"></i> About </a> </li>
<li>
<div class="dropdown">
<a href="#" class="dropdown-link" title="Gallery">
<i class="fas fa-camera"></i> Gallery <i class="fas fa-caret-down"> </i>
</a>
<div class="dropdown-menu">
<a href="#" title="Option 1"> Opton 1 </a>
<a href="#" title="Option 2"> Opton 2 </a>
<a href="#" title="Option 3"> Opton 3 </a>
</div>
</div>
</li>
<li> <a href="#" title="Contact"> <i class="fas fa-phone"></i> Contact </a> </li>
</ul>
<form class="search-area">
<input type="text" name="search" placeholder="Search Item" title="Search Item">
<button class="btn-search" name="search-button" title="Search">Search</button>
</form>
</div>
</div>
<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script defer data-src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
</body>
</html>
Step 3- Add CSS
Give style for make inline list item of <ul>. Styles for coloring and all. We've also added the @media query in the CSS to make it responsive. Make sure to write good CSS in proper indentation according to the design./* CSS for style layout start*/
.nav {
padding: 0px 50px;
font-family: sans-serif;
}
.nav .menu-btn {
display:none;
}
.nav-content {
padding: 0;
list-style-type: none;
display: inline-block;
margin: 0px;
}
.nav-content li {
display: inline-block;
}
.nav-content li a {
text-decoration:none;
padding: 14px 10px;
display: flex;
}
.nav-content li a .fa-caret-down {
padding: 0px 10px;
}
.dropdown .close-dropdown .fa-times {
padding-right:10px;
float: right;
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
z-index: 1;
min-width: 130px;
display:none;
}
.search-area {
float:right;
list-style-type: none;
display: inline-block;
padding: 8px;
}
.search-area input {
border-radius: 4px;
padding: 6px;
transition: all .5s;
}
.search-area input:focus {
border-radius: 4px;
outline: none;
}
.btn-search {
border-radius: 4px;
padding: 6px;
cursor: pointer;
transition: all .5s;
}
svg:not(:root).svg-inline--fa {
padding-right: 5px;
}
/* CSS for style layout end*/
/* CSS Media Query for 768p start */
@media screen and (max-width: 768px) {
.bottom-border-nav{
border-bottom:0.1px solid;
}
.nav {
padding: 0px;
}
.nav .menu-btn {
display:block;
padding: 10px;
font-size:2rem;
}
.nav-elements {
display:none;
}
.nav-sky .search-area {
border-top: 1px solid #fff;
}
.nav-content {
display: block;
}
.nav-content li {
display: block;
}
.dropdown-menu {
position: relative;
min-width: auto;
}
.dropdown-menu a {
padding-left: 20px !important;
}
.search-area {
float: none;
width: 100%;
padding: 12px 8px;
border-top:0.1px solid;
}
}
/* CSS Media Query for 768p end */
/* CSS for sky theme start*/
.nav-sky {
color:#fff;
background-image: linear-gradient(#44adff, #8acbfd);
}
.nav-sky .nav-content li a {
color:#fff;
}
.nav-sky .nav-content li a:hover, .nav-sky .dropdown:hover .dropdown-link {
background-image: linear-gradient(#1096ff, #5fb8ff);
}
.nav-sky .dropdown-menu {
background-color: #a2d5fd;
box-shadow: 0px 5px 10px #abdaff;
}
.nav-sky .search-area input {
color: #fff;
background: transparent;
border: 1px solid #fff;
}
.nav-sky .search-area input:focus {
box-shadow: 0px 0px 10px #fff;
}
.nav-sky .search-area input::placeholder {
color:#fff;
}
.nav-sky .btn-search {
background: transparent;
border: 1px solid #fff;
color: #fff;
}
.nav-sky .btn-search:hover, .btn-search:focus {
background-color: #0182e6;
border: 1px solid #0182e6;
color: #fff;
}
.nav-sky .active {
background-image: linear-gradient(#1096ff, #5fb8ff);
}
/* CSS for sky theme end*/
Step 4- Add jQuery Function
Add simple jQuery function before closing the </body> tag for a slide up and slide down the menu in small devices.<script>
$(document).ready(function(){
$(".menu-btn").click(function(){
$(this).toggleClass("bottom-border");
$(this).next(".nav-elements").slideToggle("slow");
});
});
</script>
Here is the output picture of our code
 |
| Responsive Navigation Bar Nav Sky HTML CSS jQuery CodingTuting |
Mobile Responsive View
 |
| Mobile Friendly Navigation Bar Nav Sky HTML CSS jQuery CodingTuting |
Heyyyyy!!!
Have you tested the responsive design of this navbar well? It is very important to test the responsive design of our website/content.
Here is the best way to test the responsive design of the website.
Have you tested the responsive design of this navbar well? It is very important to test the responsive design of our website/content.
Here is the best way to test the responsive design of the website.
Give appropriate class for another more navbar
class="nav nav-anger"
 |
| Responsive Navigation Bar Nav Anger HTML CSS jQuery CodingTuting |
class="nav nav-wet"
 |
| Responsive Navigation Bar Nav Wet HTML CSS jQuery CodingTuting |
class="nav nav-coal"
 |
| Responsive Navigation Bar Nav Coal HTML CSS jQuery CodingTuting |
class="nav nav-silver"
 |
| Responsive Navigation Bar Nav Silver HTML CSS jQuery CodingTuting |
class="nav nav-aqua"
 |
| Responsive Navigation Bar Nav Aqua HTML CSS jQuery CodingTuting |
class="nav nav-sunny"
 |
| Responsive Navigation Bar Nav Sunny HTML CSS jQuery CodingTuting |
class="nav nav-lips"
 |
| Responsive Navigation Bar Nav Lips HTML CSS jQuery CodingTuting |
We hope you like this all beautiful gradient navbar without using the bootstrap. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.
Sharing is Caring
Thanks for Reading
Keywords of this tutorial
1 Comments:
Write CommentsI love this Navbar Thanks for sharing.
ReplyEmoticonEmoticon