I will share this tutorial how to create dropdown menu by using HTML5 and CSS3. So learn our tutorial this time. This tutorial project is in Github repository
What Will I Learn?
• Design dropdown menu by using HTML5
• Design dropdown menu by using CSS3
Requirements
• Sublime Text 3 (Text Editor)
• Google Chrome
Difficulty
- Intermediate
Create Dropdown Menu
• Create file index.html
Open sublime text3 to create file index.html by clicking File-New File(Ctrl+N) So new file is displayed as blank file like window below
• We can save as index.html by clicking File-Save (Ctrl+S) on menu
• Then, we create file style.css as CSS3 file, this file is used to save model and property of layout design that we make in file index.html. step to create and save it is same like in creating file index.html
• Then, connect index.html and style.css by using code below on index.html
<link rel="stylesheet" href="style.css" type="text/css">
So, that code above is displayed on index.html like picture below
• Decide layout in index.html by typing code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="container">
<nav>MENU</nav>
</div>
</div>
</body>
</html>
• Give style in index.html
After finishing layout above, add style in style.css for layout in menu.html.
#wrapper{
width:960px;
margin:auto;
border:#F00 1px solid;
}
nav{
height:40px;
width:960px;
float:left;
background:#ff0066;
}
• Open file menu.html on browser, so the picture is displayed like below
ol (ordered list). Change the content of to be like below
<nav>
<ul>
<li><a href="index.html">Home</a>li>
<li><a href="#">Article</a>
<ul class="submenu">
<li><a href="#">Style</a>li>
<li><a href="#">Soccer</a>li>
</ul>
</li>
<li><a href="video.html">Video</a>li>
<li><a href="contact.html">Contact</a>li>
<li><a href="#">Sitemap</a>li>
</ul>
</nav>
• Change and add style nav{} by using style like below
nav{
width:958px;
float:left;
overflow:auto;
background:#DFDFDF;
border:#AAAAAA 1px solid;
}
nav ul{
list-style:none;
float:left;
overflow:auto;
margin:0px;
padding:0px;
}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;
}
nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{
display:block;
margin:0px;
width:100px;
position:absolute;
margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{
display:block;
width:89px;
padding:5px;
float:left;
border:none;
}
nav ul li:hover{
background:#EDEDED;
}
nav ul li a{
color:#000000;
text-decoration:none;
}
nav ul li a:hover{
text-decoration:underline;
}
so, the picture is displayed below
Posted on Utopian.io - Rewarding Open Source Contributors