Cara membuat dropdown menu sederhana dengan penerapan flat design.
untuk pembuatan dropdown menu sederhana tidak perlu menggunakan bahasa pemrograman yang terlalu sulit.Cukup Anda kuasai/pahami 2 bahasa pemrograman berikut : HTML dan CSS.
Screenshot hasil jadi :
 |
| Lihat DEMO |
Lihat Code Source Disni
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<style type="text/css">
body {
margin:0;
}
#headnav {
background:#27ae60;
font:0.9em "Trebuchet MS", Tahoma, Arial;
font-weight:800;
border-bottom:3px #16A085 solid;
}
#nav {
width:1080px;
margin:0 auto;
height:30px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 7px 15px 8px 15px;
white-space: nowrap;
}
#nav ul li a:hover {
background:rgba(46, 204, 113,1.0);
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
}
#nav li:hover a { background: #27ae60; }
#nav li:hover li a:hover {
background: #2ecc71;
}
</style>
</head>
<body>
<div id="headnav">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Unik</a></li>
<li><a href="#">Tips dan Trik</a>
<ul>
<li><a href="#">Relationship</a></li>
<li><a href="#">Kesehatan</a></li>
<li><a href="#">Internet</a></li>
</ul>
</li>
<li><a href="#">Website Info</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Atau Download Kodenya Disni
Tidak ada komentar:
Posting Komentar