How To Create Responsive Navbar using HTML, CSS & jQuery
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
Mobile Responsive View
Give appropriate class for another more navbar
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
