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>

<title>Responsive Dropdown nav-bar Bar</title>

</head>

<body>

</div>

<nav>

<li>

</li>

<li>

<a href=“#”>Web Design</a>

</li>

<li>

<a href=“#”>Web Development</a>

<li>

</li>

<li>

</li>

<li>

<a href=“#”>JavaScript</a>

</li>

</ul>

</li>

<li>

<a href=“#!”>Graphic Design</a>

<li>

<a href=“#”>Photoshop</a>

</li>

<li>

<a href=“#”>Illustrator</a>

</li>

<li>

<a href=“#”>InDesign</a>

</li>

</ul>

</li>

<li>

</li>

<li>

<a href=“#”>About</a>

</li>

</ul>

</nav>

</div>

</section>

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

}

intertoons

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.