Kamis, 09 Mei 2013

Membuat Menu Horizontal dan Vertikal dengan CSS


Sebelum mulai, apa saja sih file yang kita buat nanti ?
filenya sih cuma 2 kog, seperti :
  1. menu.html
  2. 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 :
1
2
3
4
5
6
7
<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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
<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.
 belajar-menu-horizontal-dan-vertikal

KETIGA

Selanjutnya dalam tahap ini kita hubungkan file style.cssnya.
menggunakan <link> pada <head>/*disini*/</head>, seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 :)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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 ?
belajar-menu-horizontal-dan-vertikal

Nah sekarang gimana cara buat klo saat salah satu menu di dekatkan mouse langsung berubah.
Tinggal tambahkan aja ini di bawah #menu li a{ } 
1
2
3
#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 :
belajar-menu-horizontal-dan-vertikal
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 :
1
#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 : 

belajar-menu-horizontal-dan-vertikal
belajar-menu-horizontal-dan-vertikal
Mungkin sampai sini dulu untuk Tutorialnya, semoga tutorialnya membantu. Terima kasih jagocoding.com . Saya bisa berbagi dan belajar disini :)