Drop down menu is mostly used in websites to give users interactive way to navigate to sub-pages or sub-categories. It is not very difficult to create sub menu (drop down menu) if you already know how to create simple horizontal menu. I search on net about creating drop down simple menu but I found many results but all are complex and confusing codes and its difficult for newbies to learn that how to create simple drop down menu using HTML and CSS. So I decided to create a tutorial which help you to learn the basics. I will try to use smaller code as possible and avoid extra confusing codes. Let’s start now.
HTML Code / Structure for creating Drop down Menu
Normally we create menu using un-ordered list in HTML. Code is given below :
<html>
<head>
<title>Simple Horizontal drop down Menu</title>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”#”>TopMenu1</a></li>
<li><a href=”#”>TopMenu2</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 3</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
<li><a href=”#”>SubMenu5</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 4</a></li>
</ul>
</div>
</body>
</html>
The above HTML code show Output as :
This is simple structure of code. We create sub menu for Top Menu2 and Top Menu3. for sub-menu, we add another <ul> (un-ordered list) before closing the </li> tag. So that <ul> is a child of that <li> (list item). Its enough for HTML, we do other work in CSS.
Add CSS to Create Drop down Menu
CSS code for creating horizontal drop down menu is given below :
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
float:left;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:5px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
left:-40px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
left:-40px;
visibility:visible;
}
Explanation of above CSS code :
There is a simple logic behind the drop down menu. I give position:relative; to #menu ul li (these are list items of TopMenu) because I want to adjust sub-menu according to its parent menu. Later on I use visibility:hidden; to hide sub-menu (in this condition complete <ul> will be hidden from user- keep in mind this ul is a child of main ul) and un-hide the child ul by using visibility:visible; when someone hover to <li> (list-item). you may also use display:none; and display:block; CSS property to hide and show menu respectively.
Final Code to Create Horizontal Drop Down Menu
Now we get final by combining HTML and CSS code which is given below.
<html>
<head>
<title>This is Simple Horizontal Drop Down Menu – WebDesignSEOtips.com</title>
<style>
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
float:left;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:5px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:25px;
left:-40px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
left:-40px;
top:25px;
visibility:visible;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”#”>TopMenu1</a></li>
<li><a href=”#”>TopMenu2</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 3</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
<li><a href=”#”>SubMenu5</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 4</a></li>
</ul>
</div>
</body>
</html>
Final Output of above code is shown below :
Click Here to See Live Demo of Horizontal Drop-down Menu
Create Vertical Drop down Menu / Sidebar Menu
Vertical drop down menu sometimes called sidebar menu is also very popular in web designing. Its very simple to create. If you understand horizontal menu code then there is no any rocket science to create sidebar menu. I use same pattern to create it. So that you feel easy to understand its code.
CSS Code for Creating Vertical Side bar Menu
This is slightly different from the previous one. CSS Code is given below.
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:3px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:1;
left:14px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
top:1;
left:14px;
visibility:visible;
}
As you see the code is very similar to horizontal menu, difference is only that I not give float:left; to list items and adjust positions according to requirements as shown above. That’s it.
Final Code of Vertical Sidebar Menu
Final and complete code for vertical sidebar /drop down menu is given below :
<html>
<head>
<title>This is Vertical Drop Down Menu – WebDesignSEOtips.com</title>
<style>
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:3px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:1;
left:14px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
top:1;
left:14px;
visibility:visible;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 4</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 5</a>
</ul>
</div>
</body>
</html>
Output of above code is shown below:
Your Assignment
Copy above codes and save them in notepad file with extension of .html and test in your browsers, or see given demos. After testing write code with your hand and try to make them more attractive. I write simple and short code so that you can understand it easily but you should try to add some css3 properties to give them more beautiful look and attractiveness. This is your assignment, later on I will share some advance level drop down menus with JavaScript and Jquery. Be happy with new Designing Tips
Reviewed by Freelance Web Designer
on
April 27, 2020
Rating:
No comments: