Sebelumnya saya minta maaf kepada temenku karena artikel ini baru saya posting, Oce kemaren pertanyaanya gini ya??
”Bagaimana Mas caranya membuat menu ke samping (dengan kata lain Horizontal)”??
Oce! Sesuai permintaan, dalam postingan kali ini saya berikan bagaimana membuat menu Horizontal.??
Yang pertama kita asumsikan bahwa website yang akan kita buat ada 3 menu.
Menu 1, Menu 2 dan Menu 3
Klo menunya telah diketahui, langkah selanjutnya adalah membuat tabel, kodingnya kira-kira seperti ini:
<table id=link width=300 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=100><a href=#>Menu 1</a></td>
<td width=100><a href=#>Menu 2</a></td>
<td width=100><a href=#>Menu 3</a></td>
</tr>
</table>
Gimana, mudah bukan ! tabelnya udah jadi,,, Oce selanjutnya kita bikin kode CSSnya kira-kira seperti ini:
<style type=text/css>
#link a {
float: left;/* koding ini berfungsi agar tabelnya ga’ putus..*/
width: 100px; /* yg ini udh ngertikan, untuk lebarnya */
text-align: center; /* biar teksnya pas ditengah */
color: #ffffff; /*biar tampilan sebelum hover berwarna putih */
text-decoration: none; /* ngilangin garis bawah teks */
border-right: 1px solid #D15A0B; /*buat nampilin border kanannya ja */
background: #0D2099; /* background tabel */
line-height: 25px; /* tinggi tabel */
}
#link a:hover {
background: #3B77F1;
color:#90FCAF;
font-weight: bold;
}
</style>
Yoi.... dah hampir ne..... ngomong2 ada yg beliin kopi ngg’ ni... hemmmm kopi tinggal separoh..
Oce biar g’ lama-lama langsung aja lihat kode komplitnya.....
<html>
<head>
<style type=text/css>
#link a {
float: left; /* float list item...*/
width: 100px;
text-align: center;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #D15A0B;
background: #0D2099;
line-height: 25px;
}
#link a:hover {
background: #3B77F1;
color:#90FCAF;
font-weight: bold;
}
</style>
</head>
<body>
<table id=link width=300 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=100><a href=#>Menu 1</a></td>
<td width=100><a href=#>Menu 2</a></td>
<td width=100><a href=#>Menu 3</a></td>
</tr>
</table>
</body>
</html>
Wah….. jadi dech….. hehehehehe….. sekarang tinggal kopi paste kodingx N tarok di notepad,,,
Ngomong-ngomong notepad itu apa???
Hedehh…. Blum tau notepad, yudah jangan banyak nanya,,, langsung klik Start > Run.
Mana Startnya???
Waduhh…. Kelewatan, ketauan ga’ pernah megang komputer…. Hehe...
Oce dech,, biar kelewatan anggep aja Run nya udah ada... hehehe... udah itu simpen dengan nama sembarang.html
Kogh di kasih nama sembarang???
Aduhhhh dasar goblok!! (^_^)
N hasilnya seperti ini……
sebelum hover
sesudah hover
Hadowh….. capek juga, baru pertama posting udah ditanyain kayak ini,,,, hemmmm...... kopinya juga udh abis.... hemmm.
Emmmm.... Beliin kopi dulu ya... ntar aq tambain postingannya... hehehehe.... Oce... !!!
Donwload artikel selengkapnya Disini
0 komentar:
Posting Komentar