Click here to Skip to main content
13,351,457 members (48,516 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


9 bookmarked
Posted 28 Nov 2011

Extend filagroup Ipod Style Menu

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


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


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 ('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };
if ('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };    
if (!(options.topLevelStable)) container.parent().hide();    
menu.menuOpen = false;
$(document).unbind('click', killAllMenus);

line 15~60

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

         .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;
         .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 (, it has still been upgrading).


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


About the Author

Web Developer
China China
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
Member 1036022425-Oct-13 6:30
memberMember 1036022425-Oct-13 6:30 
GeneralMy vote of 5 Pin
Kanasz Robert29-Nov-11 23:41
memberKanasz Robert29-Nov-11 23:41 
GeneralRe: My vote of 5 Pin
phome1-Dec-11 3:45
memberphome1-Dec-11 3:45 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 28 Nov 2011
Article Copyright 2011 by phome
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid