zFPmenu

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).

zFPmenu Code

Taruh Kode ini sebelum </body>

 

<!-- zFPmenu START -->

<div id="zfpm_div" style="display:none;">

<div id="zfpm_upperBox">

Place ads, text message, or anything here.

</div>

<ul id="zfpm_ul">

<!-- Your menus start -->

<li><a href="">YOUR MENU-1</a></li>

<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>

   <ul>

      <li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>

         <ul>

            <li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>

            <li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>

         </ul>

      </li>

      <li><a href="">YOUR SUBMENU 2.2</a></li>

      <li><a href="">YOUR SUBMENU 2.3</a></li>

   </ul>

</li>

<li><a href="">YOUR MENU 3</a></li>

<!-- Your menus end -->

</ul></div>

<script type="text/javascript">

var zfpm_colorTheme = 'light'

var zfpm_shareBox = 'no';

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>

<!-- zFPmenu END -->

Usage/Configuration

Menu

Replace menu with your own menu. Place class="dir" attribute inside li tag where you want to add submenu.

Setting/Variable

You can change the color theme and the share buttons visibility setting.

• var zfpm_colorTheme = 'light';
  Set the color theme for the menu widget.
  Valid input: 'light' or 'dark'
• var zfpm_shareBox = 'no'
  Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
  Valid input: 'yes' or 'no'

Setting Preview

Color theme: dark and light
Show share box: yes and no

Complete Variabel List

• var zfpm_colorTheme = 'light'; valid input: 'dark' or 'light'.
• var zfpm_customBackgroundImage = ''; valid input: full URL of an image.
• var zfpm_customBackgroundColor = ''; valid input: example: '#999999'.
• var zfpm_shareBox = 'yes'; valid input: 'yes' or 'no'.
• var zfpm_shareBoxPosition = 'right'; valid input: 'left' or 'right'.
• var zfpm_shareBoxCustomWidth = ''; valid input: example: '300'.
• var zfpm_waitForPageLoad = 'yes'; valid input: 'yes' or 'no'.

Upper Box

You can also place text messages, advertisements, or whatever you like in the div box with the ID zfpm_upperBox (above the menu).

*

Warning

This script is not design for Internet Explorer 6 browser.
Instead, if you add a variable var zfpm_ieUpgradeMessage = 'yes'; to the script, it will show an upgrade notification message on the top of page (see screenshot here) for IE 6 users.

 

Artikel Terkait

Posted in: pernak-pernik