Membuat Menu Horizontal dan Vertikal dengan CSS
Sebelum mulai, apa saja sih file yang kita buat nanti ?
filenya sih cuma 2 kog, seperti :
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 :
Code:
<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 :
Code:
<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.
Spoiler for tampilannya gan:
KETIGA
Selanjutnya dalam tahap ini kita hubungkan file style.cssnya.
menggunakan <link> pada <head>/*disini*/</head>, seperti ini :
Code:
<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 filestyle.css .KEEMPAT
Nah di proses ini kita akan membuat style-stylenya. Nanti kamu-kamu-kamu dan kamu bisa kreasikan sendiri yah
Code:
#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 ?
Spoiler for tampilannya gan:
Nah sekarang gimana cara buat klo saat salah satu menu di dekatkan mouse langsung berubah.
Tinggal tambahkan aja ini di bawah #menu li a{ }
Code:
#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 :
Spoiler for tampilannya gan:
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 :
Code:
#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 :
Spoiler for Hasilnya gan:
Spoiler for Menu horizontal:
Spoiler for Vertikal:
Mungkin sampai sini dulu untuk Tutorialnya, semoga tutorialnya membantu end Selamat mencoba=>
Tidak ada komentar:
Posting Komentar