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 :
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.
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.
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 :
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 ?
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{ }
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 :
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 :
Mungkin sampai sini dulu untuk Tutorialnya, semoga tutorialnya membantu. Terima kasih jagocoding.com . Saya bisa berbagi dan belajar disini :)