How to Create Drop Down Menu with HTML and CSS
Today we’re going to make a responsive dropdown menu with html and css and Jquery. Actually, I will use a little jquery code to create dropdown menu. I will show you how you can easily make a responsive dropdown menu. It’s an open source project, so you can use it for your own project so let’s start.
You can see what you are want to make by clicking on view demo and see what happened.
Read Also: A Brand New Multipurpose Theme That You Can Use for All Websites
Table of Contents
- Skip to the HTML
- Skip to the CSS
- Skip to the Jquery
- Skip to the Responsive
1.HTML Structure
First of all, create html file.
<!-- start mainmenu -->
<section class="primary-menu">
<div class="container">
<!-- small device section -->
<div class="responsive-menu">
<span class="menu-btn">
<i class="fa fa-bars"></i>
</span>
</div>
<!-- end small device -->
<!-- start menu area -->
<div class="menu-area">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Our Course</a>
<!-- start submenu -->
<ul class="submenu">
<li><a href="#">Web Development</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">Wordpress theme Development</a></li>
</ul><!-- end submenu -->
</li>
<li><a href="#">Online Tranning</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Protfolio</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div><!-- end main menu area -->
</div>
</section>
<
Menu Wrapper and Container
Create a menu wrapper named primary-menu class which is the parent class. You may use a background color whichever you want. The container used to bring the menu into 1140px. You must used max-width:1140px for a container in CSS.
<section class="primary-menu">
<div class="container">
<! -- For menu section -->
</div>
</section>
Unordered List
In this section, we make a simple menu for our project using ul tag (ul tag define as menu class).
<ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Layout</a></li> <li><a href="#">Our Course</a></li> <li><a href="#">Online Training</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Protfolio</a></li> <li><a href="#">About Us</a></li> </ul>
Nested Dropdown Menu
Now create another unordered list into any li tag. Here create another unordered list using ul tag (ul tag define as submenu class) in our course li tag.
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Our Course</a>
<! -- start submenu -->
<ul class="submenu">
<li><a href="#">Web Development</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">Wordpress theme Development</a></li>
</ul><! -- End submenu -->
</li>
<li><a href="#">Online Training</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Protfolio</a></li>
<li><a href="#">About Us</a></li>
</ul>
Responsive Menu
For responsive section, we take an extra div named responsive-menu for small devices. Especially, it’s visible when the device has come.I’ll show how when it shows and hidden and why it’s happened later.
<div class="responsive-menu">
<span class="menu-btn">
<i class="fa fa-bars"></i>
</span>
</div>
2. Styling with CSS
After completing html structure, it’s time to need styling. For styling, add file path
between head tag.
[Since I was kept this file into assets folder inside of css folder, so used this (assets/css/style.css) path. You may change your path whatever you want]
Main StyleSheet
/* menu section */
.primary-menu {
background: #29B899;
display: inline-block;
width: 100%;
}
/*main menu area*/
.menu-area{}
.menu-area .menu{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.menu-area .menu li{
float: left;
position: relative;
}
.menu-area .menu li a {
text-decoration: none;
padding: 15px 20px;
display: inline-block;
color: #fff;
transition: all .3s ease;
line-height: 28px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}
.menu-area .menu li a:hover{
background: #fff;
color: #29B899;
}
/*end main menu area*/
/*start submenu*/
.menu-area .menu li .submenu {
position: absolute;
width: 300px;
background: #29B899;
list-style: none;
left: 0;
display: none;
margin: 0;
padding: 0;
}
.menu-area .menu li .submenu li {
display: block;
position: relative;
width: 100%;
border-bottom: 1px solid #e0d5d5;
}
.menu-area .menu li .submenu li a {
display: block;
}
.menu-area .menu li .submenu li a:hover{
}
/*end submenu*/
/*to working dropdown menu*/
.menu-area .menu li:hover .submenu{
display: block;
}
/* responsive option */
.responsive-menu{
display: none;
}
span.menu-btn{
display: block;
padding: 15px 15px;
color: #fff;
display:inline-block;
}
/* responsive menu for small device*/
@media (max-width: 768px) {
.header-section{
width: 100%;
}
/* hidden the large menu */
.menu-area {
display: none;
}
/*enable responsive menu*/
.responsive-menu{
display: block;
}
/*styling menu area*/
.menu-area .menu li a{
color: #29B899;
}
.menu-area .menu li {
float: left;
position: relative;
width: 100%;
text-align: center;
background: #fff;
border-bottom: 1px solid #e8e8e8;
}
}
.empty{
padding: 200px 0px;
}
Styling Primary Menu and Container
Fixed a color of your menu and set max-width 100%.
Styling Unordered List
/* primary menu */
.primary-menu {
background: #29B899;
display: inline-block;
width: 100%;
}
We want to keep the menu section between 1140px and middle of the section so for this
.container{
max-width: 1140px;
margin: auto;
}
By adding a menu-area parent class, we style this menu section.