Membuat menu website dengan CSS – Pada kesempatan kali ini
saya masih akan membahas tentang CSS. Setelah kemarin saya berbagi ilmu
mengenai macam-macam selector CSS, untuk kali ini saya akan membahas tentang
cara membuat menu website dengan CSS.
Sebuah menu dapat dibagi menjadi 2 jenis, yaitu menu
vertikal dan menu horizontal. Berikut tutorial untuk membuat kedua jenis menu
tersebut :
Menu Vertikal
Script :
<!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>Mendesain Menu Vertikal dengan CSS</title></head><body><style>#nav {list-style-type:none;margin:0;padding:0;width:180px;background-color:#FFFF66;float:left;</style><style>#nav li{margin:0;padding:0;float:left;width:100%;}#nav a {display:block;color:#000000;text-decoration:none;padding:0 15px;line-height:2.5; border-bottom:1px solid #fff;}</style><style>#nav a:hover {background:#00FFFF;}</style><ul id="nav"><li><a href="/">Home</a></li><li><a href="Service.html">Services</a></li><li><a href="Support.html">Support</a></li><li><a href="About.html">About Us</a></li><li><a href="Contact.html">Contact</a></li></ul></body></html>
Screenshot :
Menu horizontal
Script :
<!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>Mendesain Menu Horizontal dengan CSS</title>
</head>
<body bgcolor="#FFFF99">
<style>
#nav li {
margin:0;
padding:0;
background:#9900FF;
list-style-type:none;
float:left;
}
#nav li {
margin:0;
padding:0;
float:left;
}
#nav a {
float:left;
width:250px;
text-align:center;
color:#FFFFFF;
text-decoration:none;
line-height:2;
border-right:1px solid #FFFFFF;
}
#nav a:hover {
background:#00FFFF;
}
</style>
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="Service.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="About.html">About Us</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</body>
</html>
Screenshot :
Terimakasih sudah meluangkan waktunya untuk membaca ulasan saya tentang Membuat Navbar website dengan CSS. Untuk mengujinya silahkan terapkan cara-cara di atas pada editor web masing-masing. Jangan lupa share artikel ini ke teman-teman kalian. Sekian dan semoga bermanfaat :))
.jpg)
No comments:
Post a Comment