04:12
Unknown
Kali ini saya akan berbagi pengetahuan tentang membuat Menu Drop dengan CSS. Dengan CSS maka load akan lebih ringan dengan tampilan yang cukup sederhana. Ini berfungsi bagi inet yang ngadat. OK, mulai aja :
1. buat file style.css
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background: #CCCCCC;
}
#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
line-height:30px;
width:150px;
display:block;
color:black;
border:1px solid #fff;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
/******************************************************************************/
#navMenu li a:hover {
background-color:yellow;
}
#navMenu ul li:hover ul li a:hover {
background:yellow;
color:red;
}
.clearfloat {
clear:both;
margin:0;
padding:0;
}
Untuk penggunaan warna sesuai yang diinginkan, dapat juga menggunakan gambar sebagai background.
2. Buat file index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Latihan Buat Menu</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Beranda</a>
</li>
</ul>
<ul>
<li><a href="#">Hosting</a>
<ul>
<li><a href="#">Lite Hosting</a></li>
<li><a href="#">Personal Hosting</a></li>
<li><a href="#">Corporate Hosting</a></li>
<li><a href="#">Business Hosting</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Domain</a>
</li>
</ul>
<ul>
<li><a href="#">Member</a>
</li>
</ul>
<br class="clearfloat" />
</div>
</div>
</body>
</html>
15 April 2013
Membuat Menu Drop Down dengan CSS
OK. Simpan dan lihat. akan muncul menu drop down sederhana dengan CSS.
Grafizan Group
terima kasih gan infonya, nice.. :)
ReplyDeletesama2.
ReplyDelete