Hello friend, in this blog you will read that how to make a Responsive DropDown Navigation Menu and Sub Menu from html and css.
We have used only html and css in this blog and have designed a beautiful responsive DropDown Navigation Menu and Sub Menu from this html and css which you can see above image.
Every developer wants that how do we create a custom DropDown Navigation Menu. I want to say that by reading this blog you will learn to create a beautiful and custom and responsive DropDown Navigation Menu Bar.
Which you can use this Responsive Navigation Menu bar in your website. Which is designed only with html and css.
We have given a link to some navigation menus below, which you will learn to make a good navigation menu by looking at them too.
Now we know how this DropDown Navigation Menu is written in html.
First we have taken a <header> tag inside the <body> tag. And inside this <header> tag a <nav> tag is taken. And inside this <nav> tag, first of all a <div> tag is taken whose class name is class="logo". Which you can see in the left side.
Below this <div> tag, we have included a <label> tag with a class name class="bartoggle" and an attribute for= "menubrop" is written. And under this <label> we have taken <input>. Whose type="checkbox" and id="menubrop " is given. On which we will toggle the menu in responsive.
Below the <input> tag we have taken a <ul> tag. Whose class name is written as class="NavMenu". And under this <ul> tag we have taken <li> tag and inside this <li> tag we have taken an anchor tag <a href=""> and inside this tag we have given the name of menu.
You might like this:
- Animation Clock Design Using html and CSS
- Responsive Registration Form Design Using HTML & CSS
- Contact Us Form Design Using HTML AND CSS
- Animated Social Media Button Using HTML and CSS
- Responsive Modal Login Form Using HTML And CSS
If you want to see the video of this DropDown Navigation Menu and Sub Menu, then you can watch it by clicking on the video given below.
Video Tutorial of Responsive DropDown Navigation Menu and Sub Menu
I hope you have understood by watching the above video tutorial. how the code is written and how
If you want to take the code of this DropDown Navigation Menu and Sub Menu, then below we have given the code of html and css which you can copy and see in your system.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown navigation menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo"><a href="#">Ravi Web</a></div>
<label for="menubrop" class="bartoggle">≡</label>
<input type="checkbox" id="menubrop">
<ul class="NavMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="javascript:void(0)"><label for="droplist1" class="toggle">Our Service</label></a>
<input type="checkbox" id="droplist1">
<!-- =============FirstDropDown================== -->
<ul>
<li><a href="#">Service A</a></li>
<li><a href="#">Service B</a></li>
<li>
<a href="javascript:void(0)"><label for="droplist2" class="toggle">Service C</label></a>
<input type="checkbox" id="droplist2">
<!-- =========Sub Drop Menu========== -->
<ul>
<li><a href="#">Sub Service 1</a></li>
<li><a href="#">Sub Service 2</a></li>
<li><a href="#">Sub Service 3</a></li>
<li><a href="#">Sub Service 4</a></li>
</ul>
</li>
<li><a href="#">Service D</a></li>
</ul>
</li>
<li><a href="#">Our Gallery</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Enquiry</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #f1f3f6;
}
header {
background-color: #2874f0;
padding: 0 5%;
box-shadow: 0 10px 20px rgb(0, 0, 0/5%), 0 6px 6px rgb(0, 0, 0/6%);
}
header nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.logo {
flex: 2;
display: flex;
align-items: center;
}
.logo a {
text-decoration: none;
font-size: 26px;
color: #fff;
text-transform: uppercase;
font-weight: 800;
}
.bartoggle,
#menubrop {
display: none;
}
.NavMenu {
flex: 10;
list-style: none;
position: relative;
display: flex;
justify-content: end;
}
.NavMenu li {
display: inline-block;
}
.NavMenu li input {
display: none;
}
.NavMenu li a {
display: block;
padding: 20px 14px;
font-size: 17px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
position: relative;
}
.NavMenu li a label {
cursor: pointer;
appearance: none;
display: block;
position: relative;
}
.NavMenu li a label::after {
content: "+";
position: absolute;
right: 0;
top: 0;
font-size: 20px;
}
.NavMenu>li>a label::after {
right: -15px;
top: -3px;
}
.NavMenu li ul {
position: absolute;
display: flex;
flex-direction: column;
background-color: #fff;
min-width: 200px;
border-bottom: 2px solid #2874f0;
top: 100%;
box-shadow: 0 3px 5px rgb(0 0 0/20%);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transform: translateY(10px);
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
visibility: hidden;
opacity: 0;
}
.NavMenu li ul li {
position: relative;
}
.NavMenu li ul li a {
color: #2874f0;
padding: 8px 10px;
display: block;
border-left: 2px solid transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
}
.NavMenu li ul li ul {
position: absolute;
left: 100%;
top: 0;
}
@media(min-width:992px) {
.NavMenu li ul li a:hover {
border-left: 2px solid #2874f0;
}
.NavMenu li:hover>ul,
.NavMenu li ul li:hover>ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@media(max-width:991.98px) {
header {
padding: 6px 5%;
}
.logo {
flex: 6;
}
.bartoggle {
display: flex;
justify-content: center;
font-size: 30px;
align-items: center;
background-color: #fff;
padding: 0 10px;
cursor: pointer;
}
.NavMenu {
width: 500px;
flex: 12;
position: fixed;
flex-direction: column;
background-color: #2874f0;
left: 0;
top: 40px;
height: 100vh;
z-index: -1;
padding: 15px 0 50px 0;
justify-content: start;
overflow-y: scroll;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
.NavMenu li ul,
.NavMenu li ul li ul {
position: initial;
left: 0;
visibility: visible;
opacity: 1;
top: 0;
display: none;
}
.NavMenu li a {
padding: 8px 15px;
border-bottom: 1px solid #fff;
}
.NavMenu li ul li ul {
background: #2874f0;
position: inherit;
margin-top: -10px;
}
.NavMenu li ul li ul li a {
font-size: 14px;
color: #fff;
font-weight: 400;
text-transform: initial;
padding: 7px 15px 7px 30px;
}
.NavMenu li a label::after {
right: 10px;
}
.NavMenu li input:checked+ul,
.NavMenu li ul li input:checked+ul {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
input:checked+.NavMenu {
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
}
@media(max-width:768px) {
.NavMenu {
width: 100%;
}
}
Post a Comment