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

Put this code into your web pages (before the closing </body> tag):

<!-- 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:
Show share box:

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.

.

  • i
 Posted by at 17:08

  101 Responses to “zFPmenu”

  1. wah bagus sekali ini. thanks ya

  2. wah thanks mas… bagus banget.. tp gimana ya caranya nambahin menu kayak Artikel Terbaru yang ad di zFPmenu dan menu yg di @Inimu.com.

    maklum masih newbie mas… mhon bantuannya ya.. :)

    • Menu Artikel Terbaru itu agak pake hack sedikit :)
      Ambil script dari feedburner, di bagian Publicize => BuzzBoost.
      Trus pasang sbg menu, spt ini:

      <li class="box">
       <a target="_blank" href="http://feeds.feedburner.com/Inimucom">Artikel Terbaru</a>
       <ul>
        <li>
         <div style="width:300px; height:400px; overflow:auto;">
          <style>span.headline{font-weight:bold;}</style>
          <script src="http://feeds.feedburner.com/Inimucom?format=sigpro" type="text/javascript"></script>
         </div>
        </li>
       </ul>
      </li>

      Kalo mau langsung pake contoh itu juga bisa, tinggal ganti aja tulisan Inimucom dgn nama alamat RSS feedburner kamu.

      .

  3. Akhirnya dibikin juga tutorialnya
    zFPmenu, namanya harus dipatenin nih 8)

  4. Terimakasih untuk bisa berbagi…

  5. heeelp…. 😮
    koq sub menu nya ga muncul jg….. 😥
    di sini http://www.teenagerx.co.cc
    :roll:

  6. mas ,ajarin donk gimana caranya buat broser&tools sperti punya mas . .wah bagus banget smua siitusnya jd satu cbox jg ada tukh ajarin donk ,replay di email ku ya .thnks 😥

  7. mas saya masang menu tersebut diblog saya. kalo menggunakan exploler sub menu bisa tampil tapi kalo make mozilla atau opera kok ndak bisa tampil ya submenunya. tks infonya. 😮 😥

  8. mas ko nambahin tombol close di upperBox na gimana? tanks ilmu namas

    • Di dalam upperBox, misalnya diisi spot iklan seperti ini:

      <div id="spotIklan" style="width:470px;">
         <!-- Isi iklan mulai -->
         Isi iklan
         <!-- Isi iklan selesai -->
         <a onclick="document.getElementById('spotIklan').style.display='none';" title="Close" href="javascript:void(0);" style="position:absolute; right:-7px; top:-8px; color:#fff; background-color:#333; border:1px solid #ccc; border-radius:8px; -moz-border-radius:8px; opacity:0.75; filter:alpha(opacity=75); text-decoration:none; font-size:13px; line-height:14px; font-weight:bold; margin:0; padding:0; width:16px; height:16px;"><span style="position:relative; bottom:2px;">x</span></a>
      </div>

      .

  9. Kakak makasih Code nya ..
    wah Jadi tambah menarik Blog / web saya dengan ada nya code widget ini kakak ..
    makasih banyak

  10. mas klo mau ope link ke halaman sesuka kita caranya gimana?

  11. Thanks banget atas widget nya sob,,, V’ teks nya bisa di letakkan di bwah menu g’ sob,, coz q mw buat teks news N’ posisi tepatnya menurut q t di bawah menu2,,, ni dia blog q sob http://www.syahrulhadi.blogspot.com

    untuk sementara teks nya q biarin aja di atas dulu,,,, mohon bantuannya segera ya sob,,, sekali lagi thanks bnget atas tutorialnya,,,, 8)

  12. wah bagus banget mas,,,widget nya… 😉

  13. mass, itu menunya bisa ditaruh samping ngga ???
    cos di blog saya dibawah uda ada wibya toolbarnya !!!

    tolong pencerahannya

  14. mas, kok saya ga muncul-muncul..
    padahal udah saya coba berkali-kali..

  15. mantab sob, kalau ada yang tanya buka blog ane aja…
    follow ya??

  16. bang di blog ane kug g bsa knapa ya gan???

  17. Gan, cara menaruh kotaknya berada di kira gimana ?
    thanx bgetz

  18. kalo cssnya di ganti bgmn gan.. cos warna ane mau revisi nih biar mecing gt sm template ane gan, mohon maaf sblmnya n makasih dah share,…

  19. bagus,,,,,,,,,,.. 😛 😛

  20. cara mau masukkin link nya gmn?
    misalnya nulis twitter lalu ketika di click kebuka tab baru twitter

  21. blognya bagus banget…. mampir ke blog q ya,,

  22. Om, ko’ aku pasang di blog ku, jquery slidshow yg di header malah ga muncul??

    apa beda versi jquerynya berpengaruh???

    gmna nih??

  23. cara mengubah warna tulisan di blog saya gmna? N’ Cara meletakkan tulisan di tengah gmna? tulisan yg Berikan Sedikit Komentar Buat Kemajuan BLOG ini

    di sini http://www.style7.co.tv/ mohon bantuannya
    atas prhatiannya Trims

  24. saya tidak bisa memasang gadget ini karena rumit!

  25. Mas thanks dh bagi ilmunya
    ni box bsa dpindah di atas blog g????
    klu bsa tolong dibantu, mungkin nambah scrip apa gtu????
    blas secepatnya y klu bsa
    sebelumna makasih,
    di email saya jg bleh
    hehehehehe 😀

    • Bisa aja, tapi nanti submenu nya jadi kacau.
      Coba aja pasang kode ini:

      <style>
      #zfpm_div { bottom:auto !important; top:7px !important; }
      </style>

      .

  26. om spot untuk iklan dan tombol closenya tidak berfungsi.. tolong update om.. masa iklannya ga bisa di close.. 😀 terimakasih..

  27. Mantep gann…
    Ijin Share yaa gan… link sumber pasti ditancap 😀

  28. sebenarnya gw mau cari cara membuat tombol like facebook, Eh….. malah nemuin cara membuat menu zFP, keren gan!!! lihat di blog ku ni Baca Manga Indonesia

  29. sob mau tny? :roll:
    gimana caraya gnt misal blog bebas thu br klik msuk ke blog bebas..
    mohon pencerahanya sob… thanx 😀

  30. var zfpm_customBackgroundImage = ”; valid input: full URL of an image.????

    << gag ngrt help :roll: 😥

  31. mas kalo di wordpress kodenya di taruh di mn ?? soalnya saya taruh di tag ga muncul muncul ??

  32. ijin sedot mas bro
    😳

  33. gan, kok kalo dipake HORIZONTAL MENU yang schildrennya gak muncul? gimana nih?

  34. menu yang di atas tuh. coba buka blog saya, periksa deh :)

  35. Mas.. mau nanya, kalau mau ditambahin kolom search gimana ya..
    soalnya di blog ku ga ada kolom searchnya

    dan kalau nambahin script kaya gitu disisipinnya di sebelah mana ya ? thanks..

  36. 😥 :roll: klo d pasang di atas bisag y??

  37. ijin nyoba mas :)

  38. keren boss, izin tester nih.. 😀

  39. Tq Mas …
    udah q pasang di blog aq

  40. thks gan atas skriptx..izin copas gan…dan izin share artikelx pada blogku.. 😉 😯

  41. Thanks you so much.. 😉 😉 😉

  42. matur nuwun sanget 😉

  43. mantab gan…izin copas y..
    tidak lupa saya sertakan sumbernya http://inimu.com/wp-includes/images/smilies/icon_smile.gif

  44. bro..kalau untuk WORDPRESS gimana cara pasangnya?…
    thanks.. :roll:

  45. kalo mau pasang di wordpress gimana caranya gan ❓ ❓

  46. thx gan…..
    lgsg gw pasang…. 😀

  47. Maaf gan mau nanya, bikin sub-menu kaya punya agan yg “Ocehan Hari Ini” itu gmn biar box nya ga keluar dari batas halaman blog kita?
    Soalnya kemarin aku coba, box nya kesamping keluar dari batas halaman blog kita.
    Lihat disini dan ATPA soft

  48. Akhirnya berhasil juga blog ane di pasang begituan gaN,, Thanks yah 8)
    ::: Download software :: Download game :: Blog tutorial :: IPTEK :::

  49. mas, ijin praktek sedot ya 😉

    and setelah aq pake, tampilannya sich bagus banget 😛 tapi aq ga bisa nge-link-kan ke yg bersangkutan 😥 , maklum newbie :( , silahkan cek ke http://setyawansaja.blogspot.com makasih… 😳

  50. widgetnya sangat menarik. 😉
    yang jadi pertanyaan, bisa gak posisinya widget’nya itu berada di kiri atas. kalo bisa, code’nya apa?

    rencananya, kalo emang bisa, mau aku pasang di website komunitasku 😆 tentunya, credit tetap aku utamakan :)

  51. bro ane mau tanya nih,,biar menunya itu bisa di klik jadi link gmana ya,soalnya pas ane sedot trus paste.ane klik salah satu contoh menunya,eehh g da apa apanya,,,sory msh pemula banget, 😆 ,
    maju trus pkoke bwad inimu.com :mrgreen:

  52. terima kasih atas infonya.
    langsung saya praktekin nih 💡

  53. mantab bozzzz…………..appnya saya pakai……….. 😀

  54. makasih mas tutorialnya . . .
    saya coba praktekin dulu . . . :roll: 😀

  55. admin if we want to hide it and then want to see
    is there any option

  56. Mantap gan… Berbagi Hacking, Tweaking, Source Code, Software, Game, Tips n Trick, dll

  57. izin coba gan……………

    mohon panduanya ya

    orang baru soalnya :mrgreen:

  58. Nice Share , Visit Back gan.

  59. Salam kenal Bro, mau nanya soal hostingan zfpmenu.js,kira2 bisa nggak klo kita mau costum sendiri,soalnya sudah tak coba tapi malah ilang tuch menu,aq coba hosting di google code. soalnya aq mau custom itu gambar [http://inimu.com/0-etc/zfpmenu/img/info.png] 😐

  60. bang kalau mau taruh di sebelah kiri kodenya apa ya ?

  61. kalo masang itu di WP gimana mas?? 8)

  62. thank you berat bang …. saudara-saudara …. maen-maen ya ke blog ku.. ➡

  63. Mantab nih… thanks berat 😉

  64. Good evening.
    Congratulations on your website. I love it because it’s simple, clean and concise.
    Also very good is the “zFP menu” and if possible I would like to tell me how can I do to appear at the top of the page.

    Thanks in advance
    Kalompiris Kosmas
    Nurnberg
    Germany

  65. 😛

    hmmmm senangnx q hari nie………..

  66. bagus sekali sob,,,

  67. thx nih bro,,Saya mau promosiin web,a nih,,coz,a temen Saya pada nanya cara bikin zfp menu,,daripada Saya eang bingung mending kasih alamat web,a sii masbro aja dah,,hehe,, :mrgreen:

  68. tnx for admin20

  69. Nice, om..
    bisa buat referensi inih…
    :)

  70. ijin nyimax 😉 sob ga mudeng kode script :roll:

  71. Waah, thanks gan buat menunya … (y)
    Izin share di blog saya yah 😆

  72. Thanks gan, udah di pasang di website kami,

    sukses gan 😉 😉 😉

  73. thanks gaannnnnn 😛 😛

  74. thankz bget sobat uda berbagi, sangat bermanfaat,, 😉

  75. makasih scriptnya , moga ilmunya makin bertambah, izin yah memakainya . :) :) :)

  76. Mas supaya bisa berdampingan list-nya seperti punya Mas =>Perihal | Kontak Perihal
    |
    Kontak <=
    Begitu Mas, tolong Mas di jawab, saya butuh banget soalnya hehe 😀 sebelumnya terimakasih :)

  77. Mas supaya bisa berdampingan list-nya seperti punya Mas =>Perihal | Kontak Perihal
    |
    Kontak <=
    Begitu Mas, tolong Mas di jawab, saya butuh banget soalnya hehe 😀 sebelumnya terimakasih :)

  78. Mas supaya bisa berdampingan list-nya seperti punya Mas =>Perihal | Kontak. Tolong Mas di jawab, saya butuh banget soalnya hehe 😀 sebelumnya terimakasih :)

  79. cara mindahin menu nya kekiri gimana? 😯 😯 😯 😯 😯 ❓ ❓ ❓ ❓

  80. Min kalo mau setting ditengah gimana ya? Thank you before 8)

  81. Awesome 8) like it

  82. simple tapi sangat keren. 8)

  83. om saya sudah coba hasilnya memuaskan sekali
    tp saya bingung caranya bagaimana ya agar posisinya yang sebelah kanan dirubah menjadi berada di tengah
    terimakasih sebelumnya

  84. terima kasih infonya gan

  85. Download Cheat Games Gratis: http://www.erchima.net

Leave a Reply to zon Cancel reply

(required)

(required)


nine + = 10

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

zStickyBar Widget by inimu.com