Menu Link

Setiap Website maupun Weblog pasti memiliki MENU LINK. Menu link merupakan representasi seluruh isi blog atau web. Seyogyanya melalui menu link kita bisa mendapat gambaran dasar tentang apa yang dimuat dalam sebuah blog. Menu link juga memberikan banyak kemudahan bagi pengunjung untuk memilih bagian mana dari blog yang hendak dituju. Dan satu lagi, selain digunakan untuk jump ke halaman lain dari blog ini, Menu Link juga bisa digunakan untuk focus ke widget tertentu (baca WIDGET FOCUS dan WIDGET MENU )di halaman yang sama.

Oleh karena menu link memiliki peran yang sangat penting pada blog, sehingga sering di tempatkan pada bagian top halaman web/blog yang tentu saja dengan tujuan agar mudah dilihat. Hanya saja menu link yang berisi banyak kadang juga membuat beberapa pengguna blog tidak merasa nyaman karena kelihatannya mengambil banyak ruang. Oleh karena itu banyak master webprogram menciptakan menu link yang begitu apik sehingga selain dapat menghemat ruang juga dimodifikasi sedemikian rupa sehingga dapat memancing daya tarik pengunjung.

Trik yang umum digunakan adalah metode cascading menu atau drop down menu. Ada banyak trik javascript yang bisa kita cari di internet untuk membuat menu dengan prinsip cascading atau dropdown, mungkin titlenya berbeda-beda tapi karakternya sama. Metode cascading biasanya menggunakan layar tersembunyi, dengan trik onmouseover atau onclick, layar akan muncul dengan style slide in, bisa horisontal ke kanan atau kekiri atau vertikal ke bawah atau ke atas. Metode dropdown lebih sederhana hanya menggunakan form select untuk membuatnya.

Pada artikel ini saya akan membahas tentang OMNI MENU yang dibuat dengan menggunakan metode javascript Cascading + Slide in left/right + Always On Top. Pada blog ini bisa dilihat contohnya pada sisi kiri ("JALUR CEPAT") dan Pada sisi kanan ("MENU BLOG"). Saya tertarik menggunakan OMNI MENU karena sifatnya yang Always On top. Yaitu menu ini akan selalu terlihat berada diatas meskipun halaman blog di scroll kebawah.

Jika anda tertarik menggunakannya, silahkan simak dan copy pasta script-script dibawah ini.

BUKA TATA LETAK > EDIT HTML > Copy paste script ini diatas </head>

<style>

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}


#menu3 a { /*Menu3 Links*/
color:black;
background-color:white;
text-decoration:none;
text-indent:1ex;
}
#menu3 a:hover {
color:black;background-color:#FFFF99;
}
#menu3 a:active {color:black;text-decoration:none;}
#menu3 a:visited {color:black;text-decoration:none;}

</style>


<script language='JavaScript1.2' src='http://www.geocities.com/topoleogi/mmenu.js'/>

<script>

resizereinit=true;

menu[1] = {
id:'menu1',
bartext:'JALUR CEPAT',
barbgcolor:"#ccddcc",
barcolor:"#000000",
barfontweight:"bold",
barfontsize:'80%',
bordercolor:'#000000',
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Block Archives", "#blogarchives", "_self"],
["Blog List", "#bloglist",""],
["Site Statistik", "#stat", ""],
["Top Komentar", "#topkom", ""],
["Font Style Setting", "#fontstylesetting", ""],
["Followers", "#followers", ""],
["Langganan", "#langganan", ""],
["Kategori", "#labelcloud", ""],
["Medium Komentar", "#tagboard", ""],
["Live Traffic", "javascript:staticbar('feedjit')", ""],
["Shout Box", "javascript:staticbar('shout')", ""],
["Admin Area", "javascript:mpopup()", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'right',
kviewtype:'fixed',
barbgcolor:"#ffffff",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://abgamal.blogspot.com", ""],
["Tentang Saya", "javascript:aktif_bt()",""],
["Infomedis", "javascript:buka_scroll3()", ""],
["Widget", "javascript:aktif_div1('http://abdgamal.ueuo.com/add_ons.php')", ""],
["Yang Lagi Online", "javascript:aktif_div1('http://abdgamal.ueuo.com/members.php')", ""],
["Private Message", "javascript:aktif_div1('http://abdgamal.ueuo.com/privmail.php')", ""],
["Posting Artikel", "javascript:aktif_div1('http://abdgamal.ueuo.com/tambah_tulisan.php')",""],
["Statistik", "javascript:aktif_div1('http://abdgamal.ueuo.com/topfive.php')", ""],
["Admin Area", "javascript:aktif_div1('http://abdgamal.ueuo.com/admin_area.php')", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

make_menus();
</script>

<----Batas Copy Paste ---->
Keterangan :
Contoh diatas adalah contoh OMNI MENU pada Blog ini, silahkan anda ubah sendiri
Merah : Judul Menu
Biru : Alamat URL
Hijau : Target URL

Related Posts by Categories