08:00
Unknown
1. Buka Macromedia Dreamweaver ataupun notepad
2. Pilih html
3. masukkan kode :
=> Untuk Menu Horisontal
<html>
<head><title></title></head>
<style type="text/css">
}
#nav {
margin: 0;
padding: 0;
background: #663300;
list-style-type: none;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
text-align: center;
color: #FFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
=> Untuk Menu Vertikal
<html>
<head><title></title></head>
<style type="text/css">
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
4.Simpan sebagai html dan buka dibrowser
Hasilnya :
Horisontal :
Vertical :
Catatan :
Untuk perubahan warna dan lebar menu dapat disesuaikan sendiri berdasarkan warna yang dibutuhkan.
Grafizan
0 comments:
Post a Comment
Komentar tidak boleh mengandung unsur sara, pornografi, rasisme dan pencelaan.