How to get a responsive navigation bar with the dropdown highlight? Make CSS Responsive Navbar With HTML and JavaScript, Dropdown Menu with logo.
As you probably are aware the menu bar or navbar is significant for any kind of website. As a matter of fact, the menu bar gives information about websites, which clients need. There are different sorts of the navigation bar, half of websites style relies upon their menu’s style. Along these lines, If you need to make an appealing and attractive website, at that point first you need to make a sharp menu.
we are sharing CSS Responsive Navbar With HTML and JavaScript, Dropdown Menu or Navigation. This is a basic navigation bar, not an fancy one. This is pure CSS based responsive designing, But I likewise utilized jQuery to make the mobile version’s toggle button.
jQuery is a javascript library, that is the reason I am putting this program in JavaScript category. I didn’t utilize any CSS library to make it responsive. This program will be useful on the off chance that you wanting to make a website.The codes effectively understand the beginner also . It has exceptionally less JS code since I utilized js just to make a toggle button for mobile menu.
Sample code for responsive Navbar
HTML
<html>
<head>
<meta charset=“UTF-8”>
<title>Responsive Dropdown nav-bar Bar</title>
<link href=“https://fonts.googleapis.com/css?family=Righteous&display=swap” rel=“stylesheet”>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<section class=“nav-bar”>
<div class=“nav-container”>
<div class=“brand”>
<a href=“https://webdevtrick.com/”><img src=“https://webdevtrick.com/wp-content/uploads/logo-fb-1.png”></a>
</div>
<nav>
<div class=“nav-mobile”><a id=“nav-toggle” href=“#!”><span></span></a></div>
<ul class=“nav-list”>
<li>
<a href=“#”>Home</a>
</li>
<li>
<a href=“#”>Web Design</a>
</li>
<li>
<a href=“#”>Web Development</a>
<ul class=“nav-dropdown”>
<li>
<a href=“#”>HTML</a>
</li>
<li>
<a href=“#”>CSS</a>
</li>
<li>
<a href=“#”>JavaScript</a>
</li>
</ul>
</li>
<li>
<a href=“#!”>Graphic Design</a>
<ul class=“nav-dropdown”>
<li>
<a href=“#”>Photoshop</a>
</li>
<li>
<a href=“#”>Illustrator</a>
</li>
<li>
<a href=“#”>InDesign</a>
</li>
</ul>
</li>
<li>
<a href=“#!”>SEO</a>
</li>
<li>
<a href=“#”>About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src=“http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=“function.js”></script>
</body>
</html>
CSS code
body {
margin: 0;
padding: 0;
}
* {
font-family: ‘Righteous’, cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ‘ ▾’;
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: ”;
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
