TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS
TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS
Halo sobat koding , Berjumpa lagi dengan kami .. sebelumnya kami sudah menerangkan tentang pengenalan CSS , sekarang kami akan memberi tutorial bagaimana membuat menu navigasi di dalam sebuah website dengan tampilan yang sangat dinamis . berikut dibawah ini contoh menu navigasi yang sudah dibuat .
Gambar di atas merupakan tampilan atau contoh dari menu navigasi yang akan kita buat. Seperti yang kita lihat terdapat tiga menu utama yaitu HOME, CONTACT, dan ABOUT. Kemudian pada menu contact terdapat tiga sub-menu atau dropdown menu Facebook, Twitter dan Google+. Pada contoh di atas terdapat link atau perintah menuju halaman yang kita inginkan akan tetapi belum befungsi jika diklik karena link pada tujuan belum ada (masih menggunakan #). Anda cukup mengganti tanda # dengan link halaman yang anda inginkan. Ok sekarang tinggal ngodingnya aja :v
Terdapat dua file yaitu file menu.html dan file style_menu.css, ketik dan simpan masing-masing kode tersebut pada folder yang sama.
menu.html
<!doctype html>
<html>
<head>
<title>Menu Navigasi</title>
<link href="style_menu.css" rel="Stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google+</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>
style_menu.css
#menu li ul {
display:none;
position:absolute;
}
#menu li:hover > ul {
display:block;
}
#menu ul{
margin:0;
padding:0;
line-height:35px;
}
#menu li{
float:left;
list-style:none;
position:relative;
text-align:center;
width:170px;
background-color:#009900;
}
#menu li ul ul {
left:100%;
top:0px;
}
#menu li li{
float:none;
background-color:#007700;
}
#menu li li li{
background-color:#005500;
}
#menu li li li li{
background-color:#003300;
}
#menu li a{
color:#ffffff;
text-decoration:none;
text-align:center;
display:block;
}
#menu li a:hover{
background-color:#555;
text-decoration:none;
color:#FFFF00;
}
Kalo sudah terpasang , sekarang kalian coba di browser masing-masing .
Nah sobat koding , cukup sekian pengenalan CSS dari kami , artikel berikutnya akan membahas tentang Animasi didalam CSS . Stay Tune ... XD
Nb : Jangan lupa kasih komentar di bawah ..:D
No Comment to " TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS "