Cara membuat menu and navigation widget

Seperti biasa berkat blogwalking saya menemukan hal yang baru untuk mempercantik tampilah blog kita dengan menu and navigation widget,,seperti yang saya terapkan pada blog saya,,,itu loh yang berada di pojok kanan bawah...
saya mendapat widget yang bernama zFPmenu apa itu ??
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
Letakan code di bawah ini sebelum code </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'

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.

sumber http://inimu.com

Artikel Terkait