Extend filagroup Ipod Style Menu

• Download source - 10.31 KB

Introduction

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

• http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

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).