Menu Always On Top adalah Menu Pilihan yang selalu berada pada posisi atas Website/Blog meskipun anda menggulung layar browser anda ke bawah, seperti Menu bar pada account Facebook kita.

Jika Blog anda menggunakan CMS standard, biasanya Menu bar tidak akan terlihat ketika anda menggulung browser ke bawah. Jika anda ingin tetap menampilkan menu tersebut pada posisi atas pada halaman Web Anda, maka anda harus sedikit memodifikasi Program PHP bawaan Theme anda.

Berikut langkah-langkahnya untuk CMS WordPress :
1. Bukalah program PHP yang berfungsi untuk menampilkan Menu Navigasi Blog anda, jika anda menggunakan WordPress, silahkan buka Header.php.

Caranya Loginlah ke Dashboard, Appereance, Editor dan pilih Header.php pada Frame bagian kanan (daftar program php)
2. Tambahkan script berikut di antara tag <HEAD> dan </HEAD>

<!– ALWAYS ON TOP LINKS MENU –>
<!– This goes into the HEAD of the html file –>
<script language=”JavaScript” type=”text/javascript”>
<!–
(document.getElementById) ? dom = true : dom = false;
function typeStart() {
if (dom) { document.write(‘<div id=”linksBox” style=”position:absolute; width:100%; left:0px; top:0px; visibility:visible”>’) } }
function typeEnd() { if (dom) { document.write(‘</div>’) } }
function placeIt() {
if (dom && !document.all) {document.getElementById(“linksBox”).style.top = window.pageYOffset + 0 + “px”;}
if (document.all) {document.all[“linksBox”].style.pixelTop = document.documentElement.scrollTop + 0}
window.setTimeout(“placeIt()”, 10); }
// –>
</script>
<style type=”text/css”>
<!–
a:hover.link {text-decoration: none; background-color: white}
a.link {text-decoration: none}
–>
</style>

3. Pada tag <BODY> tambahkan onLoad=”placeIt()” sehingga menjadi <body onLoad=”placeIt()”> atau lengkapnya menjadi<body onLoad=”placeIt()” <?php body_class(); ?> >
4. Selanjutnya, carilah tag yang menampilkan Menu Navigasi yang akan ditampilkan di atas, biasanya  pada bagian ini..

<div id=”navigation”>
<div>
<?php if ( function_exists( ‘wp_nav_menu’ ) ) { // Added in 3.0 ?>
<?php wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_id’ => ‘dropmenu’,
‘fallback_cb’ => ‘revert_wp_menu_page’
)); ?>
<?php } else { ?>
<ul id=”dropmenu”>
<li id=”<?php if (is_home()) { ?>home<?php } else { ?>page_item<?php } ?>”><a href=”<?php bloginfo(‘url’); ?>” title=”Home”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=0&orderby=name’); ?>
</ul><!– DROPMENU END –>
<?php } ?>


</div><!– NAVIGATION END –>

Tambahkan di atas baris <div id=”navigation”> script berikut :
<script>typeStart()</script>
<table align=”center” border=”0px” width=”100%” cellpadding=”2″ cellspacing=”0″ style=”border: 0pt> <!– Editlah table sesuai dengan kebutuhan –>
<tr>
<td align=”center”>

Dan di bawah baris </div><!– NAVIGATION END –> Tambahkan perintah :

</td>
</tr>
</table>
<script>typeEnd()</script>

Simpanlah kembali Program Header.php dengan mengeklik Update file pada bagian bawahdan Refreshlah browser anda untuk melihat hasilnya.
Lakukan pengaturan tampilan warna, border dan posisi menu dari Program CSS (Stylesheet)nya pada bagian navigation.
Hasil dari Menu Always on top ini

 

___ SELAMAT  MENCOBA ___

 

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s