Perkenalkan teman-teman sekalian. Nama saya asep. biar keren panggil aja asheep
Kali ini saya akan membahas tentang cara membuat menu Horizontal dan Vertikal dengan CSS. Mungkin buat temen-temen yang masih asing sama si CSS ini. Kamu-kamu-dan-kamu bisa baca tutorial di jagocoding.com .
Oh iya, saya harap semua temen-temen udah ngerti yah Tag HTML dan Strukturnya . klo temen-temen belom ngerti mungkin tutorial dari kang Cheyuz bisa membantu temen-temen semua.
Sebelum mulai, apa saja sih file yang kita buat nanti ?
filenya sih cuma 2 kog, seperti :
- menu.html
- style.css
Kamu bisa simpan file itu di folder Workspace kamu sendiri
Oke tanpa banyak berkata-kata lagi mungkin kita bisa mulai yah
PERTAMA
Buatlah Struktur HTML seperti berikut :
<html>
<head>
<title>Belajar Membuat Menu Horizontal dan Vertikal</title>
</head>
<body>
</body>
</html>
dan sekarang teman-teman SAVE dengan nama menu.html
Sekarang kamu sudah berhasil membuat file html.
KEDUA
Selanjutnya teman-teman bisa tambahkan TAG berikut :
<html>
<head>
<title>Belajar Membuat Menu Horizontal dan Vertikal</title>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Sampai sini kita punya tag<ul> dengan id=menu , kenapa sih si UL itu perlu di kasih id?
Karena ini mempermudah saat kita membuat stylenya dengan CSS , jadi nanti tinggal sebutkan saja idnya.
KETIGA
Selanjutnya dalam tahap ini kita hubungkan file style.cssnya.
menggunakan <link> pada <head>/*disini*/</head>, seperti ini :
<html>
<head>
<title>Belajar Membuat Menu Horizontal dan Vertikal</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Sekarang file menu.html kamu sudah terhubung dengan file style.css nya. Trus mana file style.css nya ???
Tenang-tenang. Semangat banget . Proses selanjutnya kita membuat file style.css .
KEEMPAT
Nah di proses ini kita akan membuat style-stylenya. Nanti kamu-kamu-kamu dan kamu bisa kreasikan sendiri yah
#menu, #menu li{
margin:0px;
padding:0px;
}
#menu li{
list-style:none;
float:left;
}
#menu li a{
display:block;
padding:3px 5px; /*Membuat jarak dalam atas 3px samping 5px*/
background:#B30000; /*Memberikan warna merah*/
text-decoration:none; /*menghilangkan underline pada menu*/
color:#FFF; /*Merubah warna tulisan menjadi putih*/
font-family:Arial, Helvetica, sans-serif; /*Jenis font*/
font-size:12px; /*kururan font*/
}
Nah sekarang, teman-temang tinggal simpan dengan nama style.css (sesuai dengan href="style.css") di folder yang sama dengan menu.html
Sekarang kamu buka file html kamu menu.html . Apa yang terjadi ?
Nah sekarang gimana cara buat klo saat salah satu menu di dekatkan mouse langsung berubah.
Tinggal tambahkan aja ini di bawah #menu li a{ }
#menu li a:hover{
background:#333;
}
Coba kamu dekatkan mouse kamu ke salah satu menu. Klo yang sukses salah satu menu yang di tuju akan berubah warnanya menjadi abu-abu
Seperti ini :
Selamat kamu sekarang berhasil membuat MENU HORIZONTAL. Loh terus mana menu VERTIKALnya ??
Tenang-tenang untuk membuat menu vertikal caranya tinggal ubah saja stylenya. contoh :
Hapus float:left; pada style #menu li
dan sekarang kamu buat :
#menu{ width:200px;}
Tau dong artinya . Oke saya jelasin yah. #menu di berikan nilai width:200px. iya betul agar lebarnya tidak berlebihan, maka kita buatkan lebar 200px.
Hasilnya : 
Mungkin sampai sini dulu untuk Tutorialnya, semoga tutorialnya membantu. Terima kasih jagocoding.com . Saya bisa berbagi dan belajar disini
Berikut berkas file : Menu Horizontal , Menu Vertikal
