Click here to Skip to main content
Click here to Skip to main content

Extend filagroup Ipod Style Menu

, 27 Nov 2011
Rate this:
Please Sign up or sign in to vote.
Extend for first level stable

Introduction

The jQuery iPod style flyout menus of filamentgroup is a wonderful menu. You click it, it appears. The original site is:

Background

I want to use it as a main menu of my site. The first level of the menu should be always visible, and the click button is no longer needed. I make some changes to the JS file.

Using the Code

The change to the original code is (Bold is changed or new added code):

line 65~90

var options = jQuery.extend({
    content: null,
    width: 180,     // width of menu container, must be set or passed in to 
            // calculate widths of child menus
    maxHeight: 180,     // max height of menu (if a drilldown: height does not 
            // include breadcrumb)
    positionOpts: {
        posX: 'left', 
        posY: 'bottom',
        offsetX: 0,
        offsetY: 0,
        directionH: 'right',
        directionV: 'down', 
        detectH: true, // do horizontal collision detection  
        detectV: true, // do vertical collision detection
        linkToFront: false
    },
    showSpeed: 200, // show/hide speed in milliseconds
    topLevelStable: false,
 
    callerOnState: 'ui-state-active',     // class to change the appearance of 
                    // the link/button when the menu is showing
    loadingState: 'ui-state-loading',     // class added to the link/button while the 
                    // menu is created

line 105~115

if (options.flyOutOnState) { container.find('li a').removeClass(options.flyOutOnState); };
if (options.callerOnState) {     caller.removeClass(options.callerOnState); };        
if (container.is('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };
if (container.is('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };    
if (!(options.topLevelStable)) container.parent().hide();    
menu.menuOpen = false;
$(document).unbind('click', killAllMenus);
$(document).unbind('keydown');

line 15~60

$.fn.menu = function(options) { 
    var caller = this; 
    var options = options; 
    var m = new Menu(caller, options); 
    allUIMenus.push(m); 
    var gop = jQuery.extend({ 
        topLevelStable: false
     },options);

    $(this)
         .mousedown(function() {
             if (!(gop.topLevelStable)) {
                 if (!m.menuOpen) { m.showLoading(); };
             }
         })
         .click(function() {
             if (!(gop.topLevelStable)) {
                 if (m.menuOpen == false) { m.showMenu(); }
                 else { m.kill(); };
             }
             return false;
         });
 
    $(this)
         .ready(function() {
             if (gop.topLevelStable) {
                 if (!m.menuOpen) { m.showLoading(); };
             }
         })
         .ready(function() {
             if (gop.topLevelStable) {
                if (m.menuOpen == false) { m.showMenu(); }
                 else { m.kill(); };
                 return false;
             }
         });
     $(window).resize(function() {
         $(".positionHelper").css("left", $("#menuhock").offset().left);
     });
 };

Then set the place(position) hold element to zero height (style:height: 0) and initialize the menu with parameter topLevelStable: true.

It works. I use it in my own site (http://ww.songlife.net, it has still been upgrading).

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

phome
Web Developer
China China
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 PinmemberMember 1036022425-Oct-13 5:30 
GeneralMy vote of 5 PinmemberKanasz Robert29-Nov-11 22:41 
GeneralRe: My vote of 5 Pinmemberphome1-Dec-11 2:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 28 Nov 2011
Article Copyright 2011 by phome
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid