Cara Membuat Menu Combo Box dan Go Button Menggunakan HTML
Cara Membuat Menu Combo Box dan Go Button Menggunakan HTML - Dalam mendisain sebuah halaman Website tentu kita akan membuat sebuah menu yang akan menghubungkan setiap halaman yang ada di dalam Website tersebut. Dalam pembuatan menu itu sendiri berbagai macam cara dan gaya bisa dibuat, sesuai dengan selera dan kebutuhan si pembuat Website itu sendiri.
Pada postingan kali ini, saya akan berbagi tentang bagaiman cara membuat menu combo box dan go button menggunakan HTML. Sebagai catatan postingan ini cocok bagi para pemula yang ingin belajar membuat Website hanya dengan menggunakan script HTML saja, tapi untuk para professional mungkin hal ini bukanlah perkara yang susah dan mungkin dianggap biasa-biasa saja bahkan ketinggalan jaman.
Untuk membuat menu combo box dan go button menggunakan HTML ini, kita bisa menggunakan Teks editor seperti Notepad atau Notepad++ atau jika anda ingin yang lebih pas lagi, anda bisa menggunakan software Web Builder seperti Dreamweaver, Bluefish, HTMLKit, atau Kompozer. Jika anda menggunakan Notepad, buatlah file baru dan tulis atau copy paste script HTML di bawah ini :
<html>
<head>
<title>Menu pull down dengan Go button menggunakan HTNL</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<script type=”text/javascript”>
<!–
function OnGoMenuFormLink(GoList)
{
var url = GoList.options[GoList.selectedIndex].value;
var target = GoList.options[GoList.selectedIndex].className;
GoList.selectedIndex=0;
GoList.blur();
if (url)
{
NewWin=window.open(url,target);
window['NewWin'].focus()
}
}
//–>
</script>
</head>
<body>
<div style=”position:absolute;
left:112px;
top:90px;
z-index:0″>
<form name=”GoMenuForm0″ action=”">
<select name=”GoMenu” style=”position:absolute;
left:1px;
top:1px;
width:199px;
height:20px;
font-family:Courier New;
font-size:13px;”>
<option selected>Pilih Menu</option>
<option class=”_self” value=”">Beranda</option>
<option class=”_self” value=”">Download</option>
<option class=”_self” value=”">Tentang Kami</option>
<option class=”_self” value=”">Back Link</option>
</select>
<input type=”button” value=”GO” style=”position:absolute;
left:203px;
top:0px;
width:37px;
height:22px;
font-family:Courier New;
font-size:13px;
” onClick=”OnGoMenuFormLink(this.form.GoMenu)”>
</form>
</div>
</body>
</html>
Setelah anda menulis atau mengcopy paste script di atas, save as file tersebut dengan opsi Save as type dengan “All Files” dan beri nama file dengan ekstensi akhit .html (Contoh: “menu.html”) kemudian tekan Save. Setelah itu buka file html tersebut dengan Internet Browser favorit anda.
Catatan :
Menu-menu yang dibuat di atas belum terhubung dengan halaman yang kita inginkan, untuk menghubungkan menu diatas adalah dengan mengedit srcipt : <option value=”"> Isilah script value=”" dengan nama file atau halaman Website yang anda inginkan. Contoh <option value=”download.html”>.
Selain itu nama-nama menu yang ditampilkan juga bisa diubah sesuai keingian anda, dan script yang harus anda ubah adalah teks yang saya garis bawahi:
<option selected>Pilih Menu</option>
<option value=”">Beranda</option>
<option value=”">Download</option>
<option value=”">Tentang Kami</option>
<option value=”">Back Link</option>
Demikian postingan cara membuat menu combo box dan go button menggunakan HTML, selamat mencoba dan semoga bermanfaat. Jangan lupa kritik saran dan komentar positif dan membangunnya, demi kebaikan dan kemajuan kita bersama.
0 comments:
Post a Comment