CSS Responsive Navbar With HTML & JavaScript | Dropdown Menu

CSS Responsive Navbar With HTML & JavaScript | Dropdown Menu
May 25, 2019

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;
}

Interoons aim at providing electronically intelligent and comprehensive range of digital marketing solutions that exceed customer expectations. We implement revolutionary digital marketing ideas to achieve a common as well as the aggregate growth of the organization. Long-term customer relations and extended support are maintained.

Recommended Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

ECOMMERCE WEBSITE DEVELOPMENT | FOOD DELIVERY APP DEVELOPMENT COMPANY | CRM SOFTWARE DEVELOPMENT | MOBILE APP DEVELOPMENT COMPANY | b2b portal development | auction website development | on demand food delivery app development