jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Posted by Maggie on 04/02/2009

Topics:

Update: We contributed this menu plugin to the jQuery UI library. It’s currently being refactored and slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the planning wiki.

We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. In the process of refining the script, we morphed it into more of a menu system, which can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, by default a "Back" link appears below the menu to allow navigation to previous (parent) menus, or set options to show breadcrumb links above the menu options to both deliver feedback and allow quick access to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types.

We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options. In the examples below, we plugged in jQuery UI CSS Framework classes so that the menus can be styled on the fly using ThemeRoller — try changing each menu's theme with the "Switch Theme" button.

By default, the menu script will transform an unordered list of links into a simple dropdown menu:

Demo Page

When the menu content contains nested lists, by default it creates an iPod-style menu:

Demo Page

NOTE: If you're familiar with our original iPod-style menu, we've made a few updates:

  • scrollbars are only applied to child menus that overflow the container, not to the menu container itself.
  • two ways to navigate: by default a "back" link appears in a footer that allows navigation to the previous (parent) menu, or set options to show a full breadcrumb above the menu that tracks your place in the navigation structure with a link for each level in the menu. Link text is configurable for both (see options below).
  • smoother slide transitions when navigating forward and back.

When you configure a menu with the "flyout" option set to true, the script formats a hierarchical list as a flyout:

Demo Page

All menus include:

  • ARIA menu roles and states as specified for menu widgets (learn more about ARIA best practices). We followed the WAI ARIA recommendations and validated the markup, but there's always room for improvement. If you have any thoughts or use cases to share on ARIA best practices, please let us know.
  • support for jQuery UI CSS Framework classes, so they can be styled using ThemeRoller.
  • collision detection, which may be optionally turned off. Dropdown and iPod-style menus will flip up if there is not enough room to appear below; each child menu within a flyout will flip up or back when they reach the edge of the browser window.
  • rudimentary key controls, which include the ability to manipulate arrow keys for menu navigation, the enter key to select a node or navigate the iPod menu, and the escape key to close. (UPDATE: key controls now work in IE 6-8 and Safari. Thanks, Ian!)

How it works

Required markup

The menu plugin was written with progressive enhancement in mind: first mark up a basic and functional unordered list of links, then layer on complex styles and functionality. (Ideally the advanced functionality will only be applied if the device is capable of rendering it correctly. We've developed a capabilities test to ensure that the appropriate experience is delivered to the a device — read more at A List Apart.)

List markup must conform to the following format to work with this plugin:

<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
</ul>

*  *  *

<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a>
    <ul>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
    </ul>
  </li>
  <li><a href="#">Menu option</a></li>
</ul>

Run the script on DOM ready

Calling the menu plugin departs slightly from how jQuery normally works. Instead of "find something, act on it," you attach the plugin to the link or button selector and pass in the content as an option. We deviated from the standard format so that we could reference the link/button with low overhead, and also make it possible to use content that's loaded to the page via AJAX.

As shown below, all options are passed in using object notation (see full list of options below):

$(document).ready(function(){
	$('#myMenuButton').menu({
		content: $('#myContent').html(),		
		maxHeight: 180,
		positionOpts: { offsetX: 10, offsetY: 20 },
		showSpeed: 300
	});
});

Configurable options

Default values are next to each option:

  • content: null - the menu content. It must be passed in as an option and formatted as an unordered list with anchor tags (links) for the nav options (see an example)
  • width: 180 - width of menu container. Required for hierarchical menus (flyout, ipod) to calculate widths of child menus
  • maxHeight: 180 - maximum height of menu (if ipod-style, height does not include breadcrumb, which can vary in height depending on content)
  • positionOpts (defaults listed below) - location and orientation of the menu, relative to the button/link used to open it
    • posX: 'left' - left side of the menu aligned with a side of the button, left or right
    • posY: 'bottom' - top of the menu aligned with a either top or bottom of the menu
    • offsetX: 0 - number of pixels to offset the menu left/right
    • offsetY: 0 - number of pixels to offset the menu top/bottom
    • directionH: 'right' - horizontal direction in which the menu will open, to the right or left
    • directionV: 'down' - vertical direction in which the menu will open, up or down
    • detectH: true - do horizontal collision detection
    • detectV: true - do vertical collision detection
    • linkToFront: false - set to "true," this option will create a clone of the button and place it over the menu for an overlapping visual effect
  • showSpeed: 200 - speed to show/hide the menu in milliseconds
  • 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
  • linkHover: 'ui-state-hover' - class for menu option hover state
  • linkHoverSecondary: 'li-hover' - alternate hover class, may be used for multi-level menus

Hierarchical (iPod-style and flyout) menu defaults

  • crossSpeed: 200 - transition effect speed for multi-level menus
  • crumbDefaultText: 'Choose an option:' - text that appears in the ipod-style footer before a child menu is opened
  • backLink: true - when set to "true", this option shows a 'back' link under the menu instead of a full breadcrumb in the ipod-style menu
  • backLinkText: 'Back' - text for the back link (i.e., could also say 'previous')
  • flyOut: false - multi-level menus are ipod-style by default; set this option to "true" to override and make flyout the default instead
  • flyOutOnState: 'ui-state-default' - class added to an option when its child menu is showing
  • nextMenuLink: 'ui-icon-triangle-1-e' - class to style the link (specifically, a span within the link) used in the multi-level menu to show the next level
  • topLinkText: 'All' - text for the first breadcrumb that navigates back to the start of the ipod-style menu
  • nextCrumbLink: 'ui-icon-carat-1-e' - class for setting the background image that follows each breadcrumb link (currently a carat)

Known issues

The following issues were found when we tested the menus in Firefox 2 & 3, Internet Explorer 6-8, Safari 3, and Opera 9.6:

  • We're currently discussing with the jQuery Accessibility team whether the ARIA attributes we've used in this menu are in the right places. You can join the discussion here: Hierarchical menu ARIA markup -- looking for input
  • The initial creation of the menu (first time user clicks the button) is very slow in IE 6.
  • Mouseover events are sometimes very slow in IE 6, but seem to work a little faster when using key controls.
  • Currently the "content" option is required, but it shouldn't need to be. Ideally, this should just pull from the element referenced in the anchor's href attribute.
  • If you spaz out and toggle arrow keys very quickly in the iPod-style menu, the menu may break and display a gray bar where the options should be.

Want to download this script?

This menu plugin is a working design prototype that you're welcome to reuse and extend under the MIT and GPL open source licenses. It comes "as is" with the features demonstrated here, and with several known issues. If you think you can help on a particular issue, please submit a pull request and we'll review it as soon as possible.

The demo code is available in a git repository, jQuery-Menu.

Earlier this year we contributed this plugin to the jQuery UI library. It's currently being retooled into a more robust widget and is slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the development and planning wiki.

Thanks for the helpful feedback!

We're no longer taking comments on this post because we've handed off development of this widget to the jQuery UI development team. The menu is currently being re-factored and is slated for an upcoming jQuery UI release. We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

The iPod menu design is a great idea.  Very nice.

Comment by Nikola on 04/03  at  04:58 AM

Awesome.

Thanks

P.S. has a bit of an issue with firefox 2

Comment by Sruly Taber on 04/03  at  08:18 AM

Its a great effort. because recently i saw an comment about jQuery Ui is missing a Menu feature, now its sort of done, all the best guys

Comment by Yoosuf on 04/03  at  06:14 PM

This is very nice :)

Just a couple of suggestions:

1) If not content is supplied then it should use the matched element
2) A menuClick callback would make it easier to handle menu item clicks
3) Option to let menu remain on screen after item was clicked. This would make it great sidebar menu

Comment by raymond on 04/03  at  11:23 PM

Thanks…

You are doing a good job guys.
Keep going

Comment by saeed on 04/04  at  08:31 AM

Although I do not have anything special to say...congratulations! It is because of people like you that the web is getting more and more beautiful. Thank you very much for sharing your hard work. Keep it up and good luck guys:)

Comment by Teiosanu George on 04/04  at  05:56 PM

Very nice!!

too bad it doesn’t work on IE..

I want it =/

Comment by MarcoBarbosa on 04/06  at  09:28 AM

yes, it’s great. Thanks for all the work taht you’ve made, it’s beautiful, useful and stylysh. Thanks for share, i agree with “Teiosanu George” comment !!

adeux, from Argentina

Comment by dlv on 04/06  at  01:49 PM

“MarcoBarbosa”.. eh? I’ve IE7 and it works great… i can’t test it in IE6 but i’m sure developer had test it

Comment by dlv on 04/06  at  01:52 PM

Hey Guys,

I’ve been doing a ton of work with jQuery and ARIA related elements and the biggest issue I’ve encountered is blurring out of an ARIA widget/element by pressing tab and regaining focus in the tabbing index.  I tried to tab out of your first menu demo above and was unable to tab out of it.  The ARIA attributes change properly on up and down keys, but tabbing does not work.  This is an obvious accessibility issue.  However, I am very happy that others are doing work with the ARIA spec.  Keep it up!

Comment by Joe McCann on 04/06  at  03:59 PM

Thanks for all the positive comments!  :)

@raymond:  good suggestions, and ones that should make it into the jQuery UI menu.  Feel free to share your thoughts with the jQuery UI team at the development and planning wiki: http://jqueryui.pbwiki.com/

@MarcoBarbosa:  as dlv mentioned, the menus do work in IE7-8, and are functional but kind of slow in IE6.  The key controls don’t work in any version of IE, but that’s just a matter of tweaking the code to make them work everywhere.  Key access is a necessary feature of this plugin, so it should be included in any final, production-ready version.

Comment by Maggie (Filament) on 04/06  at  04:05 PM

@Joe McCann:  thanks for the feedback!  We definitely had problems getting tabbing to work on the page, and weren’t sure if it was our local browsers, or if we missed something in the code (it validated). You mentioned you’ve been working with jQuery and ARIA, do you have any ideas why it’s failing, or have you seen similar cases?

Also, it’d be great to get more accessibility minded-folks involved with the planning of upcoming jQuery widgets.  If you’re interested (and not already signed up), we’d encourage you to get involved with jQuery UI development and planning wiki, especially now because we’re considering widgets for development in the short term.  http://jqueryui.pbwiki.com/

Comment by Maggie (Filament) on 04/06  at  04:15 PM

Very good job…
By the way, is it possible to keep the current position of the sub-items when the “popup” is “reopened” ?
due to my limited english, I mean when I am on the item A->B->C and I close the “popup” and I reopen it I lose the “breadcrumb” and the path and I have to reselect all the items.

Regards,
Stan

Comment by Stan on 04/06  at  06:30 PM

Hi Stan,

We built the menus according to standard menu behavior, where each menu resets itself to the starting position when an option is selected or when the menu is closed.  So there is no built-in option to make the last state “sticky.”

But it’s possible to edit the script to make this the default behavior.  A good starting point is here:  the flyout and ipod-style menus both have “reset” functions that are called when the menu is closed—see lines 87-88 in fg.menu.js.  In theory, if you comment out these reset functions the last state should stay when you reopen the menu.  We haven’t tested this yet so it’s very possible that additional edits may be necessary to make it work.  Good luck!

Comment by Maggie (Filament) on 04/06  at  07:34 PM

Maggie, I thank you for your help.. I’ll check it out…

Comment by Stan on 04/06  at  08:06 PM

A few people have asked about a callback function that runs when you select a menu item.  We didn’t set up the script with a true callback, however the following function is called whenever a menu item is clicked:

this.chooseItem = function(item){
menu.kill();
// edit this for your own custom function/callback:
$(’#menuSelection’).text($(item).text());
};

Currently the last line updates the “You chose:” statement with your selection, but you can edit it to do anything.  For example, if you want to navigate to the URL in the menu item’s href value, you’d replace the last line of that function with:

location.href = $(item).attr(’href’);

Comment by Maggie (Filament) on 04/06  at  09:49 PM

Hello, a little problem using IE8 and maybe IE7.
The first screen uses the maxHeight parameter but the next ones don’t.
So, if on the screens (A) and (B) I have 4 options and the 7 options on the (C), I can’t see the 3 last options and I haven’t the scrollbar.
Is there a way to use the maxHeight on the different submenus or resize the height of the submenus if it’s taller than the previous screen ?

Comment by Stan on 04/07  at  07:57 AM

Hi Stan,

Are you referring to the menu examples on this page, or a demo that you’re working on?  We tested our examples in IE 7 & 8 with their default browser settings (just double-checked), and didn’t see the problem you’re referring to—both ipod menus show scrollbars when the sub menus are taller than the max height.  Could there be another issue going on here?

Comment by Maggie (Filament) on 04/07  at  03:42 PM

1 issue, 1 question.

Issue: There seems to be some bounce when using IE7. I think this has to do with the text bold-ing as you roll over, but I could be mistaken. Basically, as you roll over each menu item, all the menu items below it move down one pixel. This does not happen in Firefox.

Question: Using the flyout menu, is there a way to force the first level to be automatically expanded? Instead of requiring a click. This would make this usable as a left side menu option.

Comment by Michael on 04/07  at  04:06 PM

I fixed keyboard navigation in IE and Safari. Please replace the exisiting lines with those below and it will work. Main thing is to use keydown instead of keypress and check event.which since you are using arrow keys with no ASCII value.

// assign key events
$(document).keydown(function(event){
var e;
if (event.which !="")
{
e = event.which;
}
else if (event.charCode != “")
{
e = event.charCode;
}
else if(event.keyCode != “")
{
e = event.keyCode;
}
switch(e) {

Comment by Ian Felton on 04/07  at  09:04 PM

@Ian Felton:  Thanks, that was a huge help!  I’ve updated the script for the examples on this page (you may need to do a hard refresh) and also in the zip to download.

Comment by Maggie (Filament) on 04/07  at  11:12 PM

@Michael: 

re: issue, we’re not seeing the bouncing here, but we’ll keep an eye out for it.

re: question, it’s definitely possible to keep any of the menus open on the page, but you’ll need to edit the script to make that happen.  Right now the sequence of events is as follows:

1. on DOM ready the open/close click event is added to it’s button

2. on button click, if an instance of the menu already exists it’s shown, if not, it’s created and then shown.

To keep the menu on the page you’d need to restructure the script so that the menu instance is drawn on the page, not shown on click.  If you’re familiar with jQuery it should be pretty straightforward.

Hope this helps!

Comment by Maggie (Filament) on 04/07  at  11:30 PM

Thanks.

I’ve tested multiple machines and the “bounce” or “jitter” is showing on all of them (in IE7, winXP). It only happens on the items below the currently highlighted item.  I’ve recorded a small video using camstudio and uploaded it here (7MB):
http://scarymike.com/temp/jitter.avi

This was recorded from the demo on this page: http://www.filamentgroup.com/examples/menus/flyout.php

Re: leaving the menu open. I’ll look into it. Unfortunately, I’m not familiar with JQuery. But I guess this gives me a chance to look into it.  Any hints would be helpful as to where in the script to look.

Thanks again,
-Mike

Comment by Michael on 04/07  at  11:48 PM

This was really a cool plugin. I am into jQuery from last 3 months and am progressing quite well. These kind of plugins make jobs so simple.Awesome and keep up the good work. I am planning to use this on one of my new website and in case I use it, will give you due recognition. Thanks!

Comment by Pradeep on 04/08  at  03:18 PM

This is a really great plugin - thanks so much!

Just to let you know I think I’m seeing the same problem as Stan. In the Ipod drilldown menu child menus shrink to fit their content. The nested ul elements are still the max height but the containing div is shrinking - this also means the ul element overlaps the back button and you can’t click it. (I hope that makes sense, this is as far as I got into it before I was utterly confused) This happens to me on FF3 with any markup that isn’t the ‘Breaking News, Entertainment....’ example. It even happens with the required markup example above.

Thanks for all your work so far!

Comment by Rosie on 04/08  at  05:33 PM

@Pradeep - thanks!

@Michael - thanks for the detailed info.  The bounce is now gone in IE thanks to a tip from Scott (Filament) that he received on another post.  Here’s how it works: 

The menu item hover state has a border, and the default state does not, thus the “bounce” in height between them.  The fix involves adding a transparent 1px border to the default state.  IE doesn’t support transparency on solid borders very well, but it does work when the border style is “dashed.” So now the default state has a 1px dashed transparent border, and the hover simply changes the style to solid so that it can inherit the selected theme’s border color.

BTW, I applied this fix to the examples here, and posted a new version of fg.menu.css to the download zip.

Comment by Maggie (Filament) on 04/08  at  05:40 PM

@Rosie: Glad you like the plugin. :)

Hm.  I’m not able to reproduce the issue you and Stan found (tested in several browsers on Mac & PC, including FF3).  If you or any other JavaScript ninjas out there can reproduce this and send a patch, we’ll re-post it here.

Comment by Maggie (Filament) on 04/08  at  07:24 PM

hello q mas

Comment by erika natalia arias on 04/08  at  08:44 PM

Trying to look through the js to see how to make the overall button ui_widget act as a button if I simply click the label and only show the menu if I click the down arrow (in the simple, “flat” example").  The end result would work similar to button/menu combos in yahoo and gmail. 

Any thoughts on how to begin?

Comment by bill on 04/08  at  10:05 PM

Hey Maggie,

I will take a look at the jQuery UI stuff, but will need to successfully launch our current project, with the ARIA stuff fully integrated and functioning before I jump on the jQuery UI project, but thanks for the invite!

Comment by Joe McCann on 04/09  at  06:45 AM

I am having the same problem as Rosie in FF3 and Chrome. I am trying to look for a fix but so far no luck.

Comment by Jim on 04/09  at  05:56 PM

Just wondering if its possible to have the menu show up right away, meaning without having to CLICK on the dropdown....  I guess what I am more looking to use this for is a main nav, so having the user click a drop down isn’t gonna work.

Possible?

Comment by bradley on 04/13  at  07:00 PM

I noticed you have bundled a separately licensed function in the menu code: pxToEm is GPL licensed only.  I don’t believe you can release under MIT while including that function.  Am I mistaken?

Comment by dustin on 04/13  at  11:44 PM

I really like the fluid motion and clean markup of the menu. Good work!

Comment by mark on 04/14  at  08:08 AM

Hi.
Regarding the license.
iirc, the gpl states that the terms must be reproduced when the source is distributed.
Because the source code is distributed in order to make the application work, then do I need to include the gpl somewhere on my site ?

Comment by rob on 04/14  at  11:53 AM

@dustin:  Thanks for the heads up—that was an oversight.  All of our code is dual licensed under MIT & GPL.  I’ve updated the script file (fg.menu.js) to reflect this.

@mark:  Thanks!

@rob:  Yes.  From the license Terms & Conditions:

“1. You may copy and distribute verbatim copies of the Program’s
source code as you receive it, in any medium, provided that you
conspicuously and appropriately publish on each copy an appropriate
copyright notice and disclaimer of warranty; keep intact all the
notices that refer to this License and to the absence of any warranty;
and give any other recipients of the Program a copy of this License
along with the Program.”

The full license is here: http://www.filamentgroup.com/examples/gpl-license.txt

Comment by Maggie (Filament) on 04/14  at  04:29 PM

@bradley:  See my earlier comment to Michael, who raised the same issue.  It’s definitely possible to do, you’ll just need to roll up your sleeves and make some adjustments to the code. :)

Related to this, the jQuery UI version of this menu is currently in the works, and the spec includes a recommendation for an option called “mode” with three possible values: dropdown (behavior shown in our examples), context (right-click to show), or static (always on the page).  If you’re interested in the jQuery UI menu’s progress or collaborating on it, check out the dev and planning wiki:  http://wiki.jqueryui.com/Menu.

Comment by Maggie (Filament) on 04/14  at  04:37 PM

@bill:  When we make button/menu widgets, we usually combine a couple of buttons side-by-side into a button set, where multiple buttons with different purposes are styled to look like a uniform widget.  We’ve found that combining buttons this way works much better than trying to nest buttons or links, where it’s too easy to run into cross-browser event issues.  A good starting point might be to check out the button widgets we posted a little while ago:

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

There you’ll find a couple of button sets that you may be able to tweak into a combo button/menu widget.  Keep in mind that if you have, for example, an arrow button on the right to open the menu, you’ll need to specify a negative X offset equal to the width of the other button in the set so that the menu appears under both of them:

var buttonOffset = $(’.firstButton’).width();
$(’#myMenuButton’).menu({
positionOpts: { offsetX: -buttonOffset },
});

Hope that helps, and good luck!

Comment by Maggie (Filament) on 04/14  at  04:56 PM

Hello!!

First I want to thank you for your amazing menu, because it is the best, i had checked many examples of menus with jQuery, but yours is the best it’s elegant and small.

I have the same problem like (Stan and Rosie), let me try to explain:

If you have the breadcrumb menu i.e.: if you have 5 options and in the next submenu you have 7 or 10 elements you can’t see de rest because at the beginning the size was only for 5 options and I don’t know why the size is smaller (you can see the image):

http://www.fileden.com/files/2007/7/8/1250902/menus.PNG

I hope that you can understand what happend and if you have time I appreciate if you try to fix that.

Greetings from Mexico!.

Sorry for my poor English I’m still learning.

Comment by Enrique on 04/14  at  07:57 PM

FYI - this is really cool.

one question. we are using the flyout menu and it works great except for one thing, when there are more items in the menu than will fit on the page you are unable to see them (it doesn’t scroll) we tried setting maxHeight with no success. we have tried it in IE8 and firefox 3.  any suggestions would be greatly appriciated

Comment by Brandon on 04/14  at  08:34 PM

Hi there,
This is great work - but, i can’t get it work along with prototype - there is a conflict -any suggestions?

Thanks
Vru

Comment by Veeru on 04/15  at  07:01 AM

Sorted it out - had to change $ in fg.menu.js to the corresponding jquery variable, in my case it was $j

Thanks for the great plugin

Comment by Veeru on 04/15  at  07:07 AM

I love this menu for accessibility reasons- it works great with the keyboard and has a lot of visual appeal. However, it’s not so great with a screen reader. Are you planning future development for greater accessibility?

Thanks!

Comment by Ghita Jones on 04/16  at  04:04 PM

I’m having the same height issue as Stan and others. Any fix for it?

Comment by Randy on 04/16  at  06:01 PM

great job as always. really impressive.
just to report 2 issues:
- same as Brandon: maxHeight does not work for me either.
- the position of the positionHelper is computed once, so if something changes afterward its position will be wrong. ie. with inline positioned buttons and using the theme switcher.

Comment by Michael Moossen on 04/17  at  12:26 AM

Dear Maggie,
I found your menu very good, we want to take it in our homepage.
I tested especially the hierarchy and hierarchybreadcrumb options and I got some problems. I think when you test your menu with the paramaters as shown in this attachment, you can see it immediately. ( comment by by Enrique on 04/14 at 12:57 PM, see also Stan and Rosie.

!!THE BEST I HAVE SEEN up to NOW!!, really phantastic work.
It wolud bee good if the second example would work too, it is produced automatically by the codeplex sitemap tool.
Thanks by markus from switzerland.

$(function(){
// BUTTONS
$(’.fg-button’).hover(
function(){ $(this).removeClass(’ui-state-default’).addClass(’ui-state-focus’); },
function(){ $(this).removeClass(’ui-state-focus’).addClass(’ui-state-default’); }
);

// MENUS
$.get(’new10.html’, function(data){ // grab content from another page
$(’#hierarchy’).menu({
content: data,
crumbDefaultText: ‘ ‘
});
});
$.get(’new10.html’, function(data){ // grab content from another page
$(’#hierarchybreadcrumb’).menu({
content: data,
backLink: false
});
});
});

<ul class="test">
<li>Root<li>
<li>Home</li>
<li>About</li>
<li>Options
<ul>
<li>Customizer</li>
<li>LicenseInfo</li>
<li>LicenseForm</li>
<li>Pages</li>
<li>Parameters</li>
<li>Help</li>
<li>Readme</li>
<li>Customizer2</li>
<li>LicenseInfo2</li>
<li>LicenseForm2</li>
<li>Pages2</li>
<li>Parameters2</li>
<li>Help2</li>
<li>Readme2</li>
</ul>
</li>
</ul>

<ul class="test">
<li>Root
<ul>
<li>Home</li>
</ul>
<ul>
<li>About</li>
</ul>
<ul>
<li>Options
<ul>
<li>Customizer</li>
</ul>
<ul>
<li>LicenseInfo</li>
</ul>
<ul>
<li>LicenseForm</li>
</ul>
<ul>
<li>Pages</li>
</ul>
<ul>
<li>Parameters</li>
</ul>
<ul>
<li>Help</li>
</ul>
<ul>
<li>Readme</li>
</ul>
</li>
</ul>
</li>
</ul>

Comment by Markus Fritschi on 04/17  at  08:49 AM

Hi there,
Is it possible to have two flyout menus in the same page? It seems that the id of the target element is harcoded into fg.menu.js.

Thanks

Comment by Veeru on 04/17  at  09:50 AM

To Veeru from Markus:
You can have as much flyout menus on the same page as you want.

// MENUS
$.get(’new10.html’, function(data){ // grab content from another page
$(’#hierarchy’).menu({
content: data,
crumbDefaultText: ‘ ‘
});
});

Here the content is loaded from the ‘new10.html’ file two times and then loaded into the locations ’#hierarchy’ and ‘#hierarchybreadcrumb’.
But the id’s colud also be named as #test1 ans #test2. ( <div id="test1"></div> ) etc..
Hope this helps.
The id is not hardcoded ...
Markus

Comment by Markus Fritschi on 04/17  at  01:59 PM

I have about 100 button and use the same menu. How I can create one time and use it for all thank.

Comment by nguyen on 04/17  at  02:26 PM

@Everyone: We’ll give the maxHeight option some testing and post an update when we find a fix. Code fixes are always welcome.

@Veeru: thanks. we’ll try and get all those $’s switched over to “jQuery” in the next pass.

@Ghita Jones: We agree - the ARIA support in this menu is not quite worked out yet. But yes, we do plan to update it once we find time to test it further in jaws / nvda. Any pointers on implementation are very welcome!

@nguyen: just set your content in a javascript variable and reference that variable in the content: option whenever you build the menus.

@Markus: send us a demo page if you want us to take a look. Thanks

Comment by Scott (Filament) on 04/17  at  10:30 PM

Hi markus,
Guess you missed my point - the function chooseItem updates one id only, so if i have two flyout menus on the same page, the chooseItem function can update only one Id, so in other words, i can have 100 flyouts on the same page, but all of them will update only one id.
Any suggestions or updates?

Thanks
Vru

Comment by Veeru on 04/20  at  08:36 AM

Thanks for the wonderful menu!

I think it may have been mentioned already, but it mightn’t hurt to bring it up again.

Using the ipod drill-down menu, if you click to drop down the menu, then move your browser window, the positionhelper moves along with it as it looks like the position is set absolute to the body itself?

Is it possible to add the positionhelper into the div that contains the ul list? If so, that div could be set to relative and the positionhelper might move along with the menu when the browser window is resized?

Any help would be greatly appreciated. I love this menu!

Comment by Glen on 04/20  at  02:03 PM

Very nice :)

IE 6 and IE 7 does not look round corners.

Comment by Murat on 04/20  at  03:00 PM

Maybe doesn’t support ha :)

Comment by Murat on 04/20  at  03:27 PM

HI there…
Is it possible to fill the “you choose” with the full choosen path ??

Let me explain…
If i choose Link2 / Link2 / link3
in “your choose” shows : link3
but i want to have: You choose: Link2 / Link2 / link3

Is there a way???

Friendly greetings… :-)

Sub

Comment by Sub on 04/21  at  08:48 PM

excellent flyout menu, thanks for all the effort.

had a question though.

got flyout menu to work on a website but as soon as i click on the text link that accesses the flyout all links on the page just stops working, not sure why, none of the href links work.

there’s NO error js error.

does any one have a clue what this could be?

thanks in advance

Comment by rajiv on 04/22  at  12:08 AM

Hi,

Is it possible to get data for child menus using ajax?

Actually, I have large amount of data (more then 1000 rows in total), and it takes too long for creating menu for the first time and sometimes my browser stops responding. It will be better If I can get only the data I require using ajax.

Thanks in advance.

Comment by Shahzad Fateh Ali on 04/22  at  08:05 AM

IE 6 and IE 7 does not look round corners.
plz do something for this

Comment by mark on 04/22  at  08:05 AM

Great work, Maggie et al.

Only a short tip for those not so skilled on javascript (like me :)). Pay attention: You have to put “jquery_xx.js” script tag before “fg-menu.js”. Cheers! thanks for this excelent component.

Comment by Charles on 04/23  at  08:42 PM

@Veeru - you can edit the chooseItem function to do whatever you need it to do.  In our examples it updates the “menuSelection” element with the selected item text, but that logic isn’t necessary for the menu to work.  Feel free to write in your own functionality after the comment:

this.chooseItem = function(item){
menu.kill();
// ADD YOUR LOGIC HERE
};

@Murat & @Mark - you’ve got it, IE doesn’t support border-radius (part of the CSS3 spec) so the rounded corners don’t show up.  There are alternate JavaScript workarounds to make corners appear in IE, and they require additional plugins.  One plugin that we’ve had some success with is DD_roundies: http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/

@rajiv - hm, that’s a new one.  In our examples, the links stay active after selecting a flyout menu item, so I’m inclined to say it may be related to another script on your page?  We’re not able to reproduce it here, so let us know if you have any luck debugging it.

@Shahzad Fateh Ali - it’s possible that AJAX functionality like what you describe will be included in the jQuery UI version of this menu.  If that’s something you’d like to see and can present a good use case for it, please share your thoughts on the planning and development wiki: http://wiki.jqueryui.com/Menu.

@Glen, and others who are looking for functionality updates:  we’re really encouraged by your interest in our design prototype, and we can’t stress enough how much we’d like to get your input on the jQuery UI development and planning wiki: http://wiki.jqueryui.com/Menu.  The menu plugin shown here is a great test case as evidenced by all of your thoughtful feedback.  Going forward we’re focusing our design and development efforts on the jQuery UI menu widget, and your comments and feedback here and at the planning wiki are essential to helping us design and build a full-featured widget that’s useful.  For those of you interested in using the plugin in it’s current state: go for it!  We just ask that you post your progress here and/or at the planning wiki.

Comment by Maggie (Filament) on 04/23  at  11:43 PM

I love jQuery and this plugin impress me much. Thank you vry much for the work.

Comment by Kristiono Setyadi on 04/24  at  04:46 AM

great work.
But how to show the Menu Option without click the flyout button(the drop down icon).
I would like to use this like a Pop out Vertical navigation similar like this page
http://www.tanfa.co.uk/css/examples/menu/vs6.asp
thanks,

Comment by mrk on 04/25  at  05:29 AM

From a user exp perspective this seems to be good navigation tool and for my current purposes (navigation of hardware inventory with many categories and sub, sub cats) it may perfect.

On the flip side, inclusion of the css switcher in the download is not helpful and adds an additional hurdle to its use .  From my perspective a more generic css with commented descriptions for the selectors would be more beneficial.  Your style chops are very nice, but it would seem far more likely that future implementations either inhouse or by leaches like myself would benefit by the passing of knowledge not colours and borders that need to be stripped away.

Knowing that you didn’t write this for me I’ll let you determine how useful my preceding comments are.

Within IE 7 the ipod -style menu has a width issue for the sub categories that require a scrollbar and a height issue with regard to the ‘Back’ link. The same appears to be the case with the bread crumb variant where the height issue relates to the breadcrumb header.  These should be fairly easy to flesh out and may already be answered above.

Comment by jdc on 04/25  at  11:01 PM

Regarding ie7 in my above post I was incorrect.  the issues was with me, It the Height/width is fine until you change fonts in which case you need to change the dimensions of the container accordingly.  Sorry.

Comment by jdc on 04/25  at  11:34 PM

Its a lovely menu system from the user side, but without an efficient way to alter its appearance I don’t see it as being useful.  It maybe that others can use it as it is or that some may be able to integrate it faster than they can create their own, but I’ve spent about 4 or 5 hours on it and I still see too much that needs to be rewritten before I could use it.  In that same amount of time I can create the containers, layout and functionality that will be suitable for the application to populate offer similar usability.  It won’t have multiple variations, but it will be infinity easier to integrate visually. 

I would have loved to use this one.  It is still very useful to me as a benchmark.

Thanks

Comment by jdc on 04/26  at  02:27 AM

@JDC: I’m not sure the which part of the appearance you’re trying to alter, but if it’s the font, colors, images, etc you’re talking about, those are all extremely flexible (this menu is styled using ThemeRoller). You can go to http://themeroller.com and create and download a design that can drastically alter the appearance of this menu system. We included a theme switcher in the demos with some of the pre-designed themes, but you can design custom themes yourself instead.

If you’re trying to alter the general layout and blocking, that would require custom work, but if you like the menu system as it is, you can easily make it match your design. Just making sure you know.. :)

Comment by Scott (Filament) on 04/26  at  03:16 AM

Yeah, I am pretty thick, but it did finally dawn on me that theme roller was the intended way to controlled the appearance. Some of the child parent relationships in the CSS are problematic for my design needs and would need to be changed, this along with the time required to figure out the resizing are making it less useful to me. My interest was a short cut to the functionality and, upon finding this, the intelligent interface. 

I think I can build the functionality, mimic the ipod like scheme and do it to fit my application in about the same amount of time that it would take me to figure out how to do it with your system with the added benefit of it being smaller and of my own design (naming conventions, familiarity etc..) There is more going on in your system than I need, but I do understand the benefit.  I also am very appreciative of the work.

Take care, congratulations and good luck.  You have all done a really nice job.

Cheers,

jdc

Comment by jdc on 04/26  at  07:35 AM

Hi,

Menu is great, i love it. Thanks for your effort.

is it possible to do flyout menus without button like this picture : https://jqueryui.pbwiki.com/f/1226677250/e2_menubar.png

Thanks.

Comment by Abraham on 04/26  at  10:22 PM

@mrk & @Abraham:  Glad you’re both finding our working prototype helpful.  It’s possible to display the menus as shown in your examples, and to do that you’ll need to edit the script to build AND show the menu on DOM ready (currently it builds the menu on DOM ready and shows on click).  Feel free to take our code as a starting place and run with it, and keep us posted on your progress.

Comment by Maggie (Filament) on 04/27  at  06:41 PM

Thank you, this is great!

Would it be possible to change the code so that the menu appears on mouseover or hover instead of mousedown or clicking the menu?

Thank you!

Comment by James on 05/01  at  08:36 PM

I have been looking for jQuery menu for 2 days. Tried jQuery official plugins and many other good menus over the internet.
But will use this one for all my needs. You guys doing a really great work.
First time I was impressed with you date range picker for jQuery. Wish you to continue doing a successfull jQuery and other projects.

...1 little issue with positionOpts: i have to specify “offsetY: 0” for IE to work (not mandatory for Chrome) and “offsetX: 0” for all browsers, otherwise it doesn’t working. same for posX, posY

Thanks!

Comment by Roman on 05/04  at  09:53 PM

Hi!

I think I’ve fixed the problem Stan, Rosie and Markus Fritschi found. Here the diff:

--- fg.menu.js.orig
+++ fg.menu.js
@@ -244,8 +244,8 @@ function Menu(caller, options){
this.chooseItem = function(item){
menu.kill();
// edit this for your own custom function/callback:
- $(’#menuSelection’).text($(item).text());
- // location.href = $(item).attr(’href’);
+ // $(’#menuSelection’).text($(item).text());
+ location.href = $(item).attr(’href’);
};
};

@@ -268,7 +268,12 @@ Menu.prototype.flyout = function(container, options) {
function(){
clearTimeout(hideTimer);
var subList = $(this).next();
- if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: ‘auto’, bottom: 0 }); };
+ if (!fitVertical(subList,
+ $(this).offset().top))
+ {
+ subList.css({
+ top: 0, bottom: ‘auto’ });
+ };
if (!fitHorizontal(subList, $(this).offset().left + 100)) { subList.css({ left: ‘auto’, right: linkWidth, ‘z-index’: 999 }); };
showTimer = setTimeout(function(){
subList.addClass(’ui-widget-content’).show(options.showSpeed).attr(’aria-expanded’, ‘true’);
@@ -322,13 +327,25 @@ Menu.prototype.drilldown = function(container, options) {
if (options.backLink) { breadcrumb.addClass(’fg-menu-footer’).appendTo(container).hide(); }
else { breadcrumb.addClass(’fg-menu-header’).prependTo(container); };
breadcrumb.append(crumbDefaultHeader);
-
- var checkMenuHeight = function(el){
- if (el.height() > options.maxHeight) { el.addClass(’fg-menu-scroll’) };
- el.css({ height: options.maxHeight });
+
+ var checkMenuHeight = function(el) {
+ var max_height = options.maxHeight - breadcrumb.getTotalHeight();
+ if (el.height() > max_height) {
+ el.addClass(’fg-menu-scroll’);
+ el.height(max_height);
+ topList.height(max_height);
+ }
+ else {
+ if (topList.height() < el.height()) {
+ topList.height(el.height());
+ }
+ }
};

- var resetChildMenu = function(el){ el.removeClass(’fg-menu-scroll’).removeClass(’fg-menu-current’).height(’auto’); };
+ var resetChildMenu = function(el) {
+ el.removeClass(’fg-menu-scroll’).removeClass(’fg-menu-current’).height(’auto’);
+ topList.height(’auto’);
+ };

this.resetDrilldownMenu = function(){
$(’.fg-menu-current’).removeClass(’fg-menu-current’);
@@ -369,9 +386,8 @@ Menu.prototype.drilldown = function(container, options) {

// show next menu
resetChildMenu(parentUl);
- checkMenuHeight(nextList);
topList.animate({ left: nextLeftVal }, options.crossSpeed);
- nextList.show().addClass(’fg-menu-current’).attr(’aria-expanded’, ‘true’);
+ nextList.show().addClass(’fg-menu-current’).attr(’aria-expanded’, ‘true’);

var setPrevMenu = function(backlink){
var b = backlink;
@@ -379,12 +395,13 @@ Menu.prototype.drilldown = function(container, options) {
var prevList = c.parents(’ul:eq(0)’);
c.hide().attr(’aria-expanded’, ‘false’);
resetChildMenu(c);
- checkMenuHeight(prevList);
prevList.addClass(’fg-menu-current’).attr(’aria-expanded’, ‘true’);
if (prevList.hasClass(’fg-menu-content’)) { b.remove(); footer.hide(); };
+ checkMenuHeight(prevList);
};

// initialize “back” link
+ breadcrumb.empty().append(crumbDefaultHeader);
if (options.backLink) {
if (footer.find(’a’).size() == 0) {
footer.show();
@@ -432,7 +449,8 @@ Menu.prototype.drilldown = function(container, options) {
});
newCrumb.prev().append(’ <span class="ui-icon ‘+options.nextCrumbLink+’"></span>’);
};
- return false;
+ checkMenuHeight(nextList);
+ return false;
});
}
// if the link is a leaf node (doesn’t open a child menu)
</pre>

Comment by Denis Shaposhnikov on 05/04  at  11:29 PM

Hi again
What do i need to do if i want the iPod menu, but not attached to any element, i just need the menu, to act like a panel by itself, something like a “always visible” navigation.

thanks
Vru

Comment by Veeru on 05/06  at  09:13 AM

Hi,

(I mistakenly posted this to the old article—I’m posting it again here, I hope that’s OK.)

NOTE: I use the misspelling “inner3html” in this document because “innerHTML” is not allowed in these posts apparently.

I’m planning to use the drilldown(ipod) style menu for navigation, and I’ve run into a couple problems.

1. I serve XHTML as application/xhtml+xml (except to IE of course), and problems arise with DOMElement[removed] when it’s confronted by ampersands.

For example, if I have a category in my menus like:

<li>Projects & Stuff</li>

then jQuery.html will choke on the “&” when it tries to use innerHTML.  On line 911 of jquery-1.3.2.js, it tries to do something like:

elem.inn3rHTML = “<span>projects & stuff</span><span class=’ui-icon ui-icon-triangle-1-e’></span>”;

It seems like the XML document type activates a more strict checking of the markup fed into DOMElement.inn3rHTML.  If I serve the page as “text/html”, then the problem goes away, but I’m stubborn and I don’t want to serve XHTML that way (except to the only brain-dead browser that _requires_ this non-standard behavior).

2. If FF3, problems arise when the list of menu options (at the root level at least) is not large enough to fill the available vertical space.  For example, modify the demo to use the ipod style drilldown menu with this small menu structure:

=====================================
<ul>
<li>Home
<ul>
<li>test</li>
</ul>
</li>
<li>Projects + Stuff
<ul>
<li>project 1</li>
<li>project 2</li>
</ul>
</li>
<li>Bookmarks</li>
</ul>
=====================================

As a result, the BACK button (to return to the previous menu) doesn’t work properly - there seems to be no link there, and trying to click there is equivalent to clicking on the document window (it kills the menu).  This problem disappears once there are more options in the menu.  I didn’t try it on IE.

=====

3. INCREMENTAL LOADING OF MENU STRUCTURE ?

I think the drilldown menu is a really slick way to navigate large structures.  To that end, I also need to modify the code to support incremental loading of the menu structure (so that you load the first level to begin with, and only load deeper levels once the user tries to navigate there).  If someone else is already doing it (or has done it), I’d appreciate hearing from you.

==========

Finally, thanks very much to Filament Group for their work on this control.  I searched high and low for the menu control that can best handle large structures, and I think the ipod-style drilldown menu is perfect for this purpose.  The only thing it’s missing IMO is the incremental load of the menu structure, but one way or another that shortcoming is going to be resolved fairly soon.  If I do that improvement myself, I hope my implementation is good enough to be merged in, since it would be preferable to maintaining my own patch.

Also, as I’m still fairly new to jQuery, I found a lot of benefit in studying fg-menu.js, and looking up the things I don’t understand.  First I reformatted the code so I could better read it (this is not to slam your style though—because people have very different sensibilities about that).  I still don’t have a complete knowledge of fg-menu, but I’ve already learned a lot just by spending a few hours studying the code.  Highly recommended as a learning aid !

Best regards :)

Comment by amckee on 05/06  at  07:49 PM

Hi everyone! I’m kinda new to JQuery too and im using the ipod-style menu, i’ll like to know if there’s an option to have the menu shown by default -I mean without clicking the button-. Thanks for ur help =D!

Comment by jcguzmanr on 05/06  at  10:37 PM

I take it no one has figured out how to show the iPod-style menu by default with no button to open it? I just started working with jQuery 2 months ago, so I lack the know-how on updating that code myself.

Comment by Angelo on 05/07  at  05:57 PM

Forgot to mention, if anyone has figured out a way to load the iPod menu faster, that would be a great alternative.

Comment by Angelo on 05/07  at  05:59 PM

Just noticed today that the performance of the iPod-style menu affects other jQuery UI objects onscreen.

Comment by Angelo on 05/08  at  06:04 PM

I found this bug using the ipod-style menu - other menus should be affected too but I didn’t try.

1. Activate the menu
2. Kill the menu
3. Re-size the browser window
4. Activate the menu again
>> the menu should now appears in the wrong place

Comment by amckee on 05/10  at  12:32 AM

Hello.

I have been using the menu provided here with some great results but I’ve just run into a problem. The menu is being created based on content fetched from a database and it seems that when I crossed some line in the amount of content in the menu something went wrong.

Now the menu opens upwards instead of downwards even though it’s set to open downwards. If I turn off the flyout-option it will open downwards again so it seems to be related to the flyout-option.

Any ideas about what might be going wrong?

Comment by Marcus Dalgren on 05/11  at  12:25 PM

Also when using the ipod-style menu the height of the menu becomes 100% when I drill down in the menu. The height of the first part of the menu is ok.

Comment by Marcus Dalgren on 05/11  at  12:46 PM

I think the “bug” I reported on earlier (to do with re-sizing the browser window) is actually a consequence of how I’m using the menu.  I’ve modified the menu to allow fixed positioning, since I use it for my nav menu which is fixed to the top of the viewport.  So I’ll work that out on my own.

I know you can’t add every single feature that anyone can dream up.  However, the ipod(drilldown) menu is so wonderful for navigating large structures, that I think you should accentuate that strong point by allowing the menu structure to load incrementally via AJAX (as opposed to loading the whole structure at once, which becomes increasingly unworkable as the structure gets larger).

This menu you’ve created is really nice, and it seems to only need a “relatively” small amount of work to do what I want, so it looks like a good investment of time to me.  When I’m done messing with it, I’ll share my changes (including dynamic load of menu structure) in case anyone is interested.  As I said before, my hope is for any change to the “standard” menu code to be unnecessary in the long term.

Best regards :)

Comment by amckee on 05/12  at  06:39 AM

@amckee,

When you say you altered the menu to be fixed, do you mean the iPod-style menu? If so, can you share your modified code with the rest of the class? Much thanks.

Comment by Angelo on 05/12  at  04:50 PM

You can get my modified version here:

http://www.filebam.com/download/99686-9a4840/fg.menu-0.4-modified.js

It only adds support for fixed positioning of menu control.  Read the comment at the start of the file for details.  I’ll post again when I’ve finished the support for dynamic loading of the menu structure.

Comment by amckee on 05/13  at  05:32 AM

I had a problem using the menu inside of a jquery dialog box on ie6. The drop down menu appeared behind the dialog. 

Adding this change to the code, I was able to get it to work. (added z-index)

helper.css({ position: ‘absolute’, left: dims.refX, top: dims.refY, width: dims.refW, height: dims.refH, ‘z-index’ : 900 }); (line 502)

Don’t think it messes anything else up.

Comment by Peter on 05/14  at  06:01 PM

Hello guys!

First of all, many thanks for your work, the menus are great… i’ve found only one issue though. Once I click to one specific link, it just closes de menu instead of opening the linked page. I’ve been reading and it seem that it happens de same to Rajiv.

I’ve uploaded the files so you can see what I mean and maybe catch the error:

http://www.culturagratuita.org/test2/fr.htm

Menú/ Index should link to culturagratuita.org, and even with the link correctly placed (u’ll see the destination on the navigator once you place the mouse over it), it won’t work.

Any ideas?

Comment by Erik on 05/17  at  05:22 PM

Great plug-in, thanks for the quality work.

Any chance you could add a hover support option?  I’ve changed the .click() handler to .hover(), and that works to open it correctly, but I can’t figure out how to detect a mouseout to make it automatically disappear.

This seems to be the standard UI for dropdown menus across the Internet so I’d like to have it act that way. Any help is appreciated. Thanks!

Comment by CMB on 05/19  at  09:16 PM

I have extended the jquery menu to allow the following:

* Construction from a JSON object.
* Custom callback function.
* Allow custom data to be stored on each menu item (i.e event command and argument)

There is an example at:

http://www.matthewfeerick.com/jquery_menu/

Hope to help,

Matthew

Comment by Matthew on 05/21  at  05:35 PM

I am having the same issue as Rajiv & Eric. I have created the menu structure and everthing show up fine, menus open and branch as they should.  However the links in those menus do not do anything.

I am using Windows 7 & IE8—I have tried it with all version of this widget & I have no other scripts running. I have tried replacing your widget with a few other menu widget and the other ones work fine.

I like the layout and system you provide, so thanks and I would love to use them.  Please let me know if there is a fix for this, or if anyone has any idea I can try to get it working… Using the following for setup:

$(’#mainMenuBreadcrumb’).menu({
content: $(’#mainMenu’).html(),
backLink: false
});

[url="#mainMenu" tabindex="1" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all” id="mainMenuBreadcrumb"]
<span class="ui-icon ui-icon-triangle-1-s"></span>Main Menu
[/url]

Comment by JranZu on 05/25  at  04:47 AM

Also wanted to add in that if I right-click and open-in-new window or tab it works fine.

Comment by JranZu on 05/25  at  05:08 AM

OK, figured out the issue. It appears that the JS script that you can currently download has debug or demo script still activated

On line 245 of fg.menu.js if you comment out menu.kill(); the issue of linked text not branching works.

Not sure if maybe I have it setup wrong or something, but this fixed the issue for me. Hope this helps others out that where having the same issue!

Comment by JranZu on 05/25  at  05:54 AM

holas queria hacerle una consulta aquien este a cargo de la informacion entregada con respecto a los menus de jquery, la verdad es que es realmente interesante como se trabajan los menus con esta herramienta, pero me gustari saber si yo puedo utilizar estos codigos para un sitio web que tengo?? o debo de ccancelar por su uso en mi si sitio??

desde ya muchas gracias

Comment by marco velasquez on 05/26  at  07:53 PM

Marco,
el menú tiene doble licencia de MIT y GPL, así Ud. puede usarlo así nomas.
Saludos,
Christopher.

(I’m telling him that the menu has dual MIT & GPL licenses and he can use it freely.)

Comment by Christopher Vrooman on 05/28  at  08:13 PM

nice job :).

Comment by mounir.dz on 05/30  at  10:30 AM

Really awesome work!

For correctly supporting custom widths (unlike 180) in the iPod-style menu you have to modify line 422 as follows:
- var newLeftVal = - ($(’.fg-menu-current’).parents(’ul’).size() - 1) * 180;
+ var newLeftVal = - ($(’.fg-menu-current’).parents(’ul’).size() - 1) * container.width();
Note: Only the breadcrumb navigation is affected by that bug.

Comment by Tim-Patrick Märk on 06/01  at  04:35 AM

This has got to be the best menu I’ve seen. That said, I’ve gotten myself stuck trying to use it. I’m trying to dynamically add/remove menu items after the menu has already been created and rendered to the page; either by trying to append li a’s into the menu container or by destroying the menu and re-creating it on the fly. If I rebuild the menu then all of the li nodes that previously existed are gone. And I’ve had no luck at all trying to append the li a into the container. Can someone please point me in the direction or give me some ideas how to accomplish this? I’m not afraid to get my hands dirty but I’m at a loss here on what else to try.

Comment by Jason Lindstrom on 06/05  at  11:36 PM

@Jason Lindstrom:  I think you are on the right track with creating recreating it on the fly.  What I would do is store the menu in a content container and then append and alter that content container… content: $(’#myContent’).html()

Personally, when I have to do things like dynamic menus I store the entire menu in a PHP file and then reload the entire menu when something needs to change… $(’#menu’).load(’./library/ajax/menu.php’)

Hope that helps.

Comment by JranZu on 06/05  at  11:50 PM

Very nice! SUPER!

Comment by Serj on 06/09  at  05:14 AM

I got it, I had a jquery.pack.js file linked in the head section and when I deleted that it worked fine.
what a really amazing menu !!
best wishes
john

Comment by john on 06/10  at  01:02 PM

thank it very nice

Comment by tk on 06/11  at  11:21 PM

For all those wanting the first level to expand automatically when the page loads:

Open fg.menu.js and change this:

$(this)
.mousedown(function(){
if (!m.menuOpen) { m.showLoading(); };

})
.click(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
});

To this:

$(this)
.ready(function(){
if (!m.menuOpen) { m.showLoading(); };

})
.ready(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
});

Its just changing the events from mouse interactions to page events, in other words, rather then expanding the menu when you click on it, it expands as soon as the page is ready/loaded.

Comment by Luke on 06/12  at  07:43 AM

thank you! it’s beautiful!

Comment by Jack on 06/13  at  04:53 AM

Great Work Guys!!!!

@Denis Shaposhniko - thanks for the fix. Worked like a charm

Comment by Toronto Web Design on 06/16  at  06:00 PM

I was having a problem with long lists using the breadcrumb mode in FF3. The bottom of the scrollbar became invisible and the breadcrumb links shifted out the top of the menu.

It seems that the height of the breadcrumb is not taken into account when setting the height of the inner element. Additionally the breadcrumb height is not available because this function is called before the height is set.

The following mod uses maxHeight as a fixed height (rather than a maximum) but it works for my needs.

var checkMenuHeight = function(el){
var maxElHt = options.maxHeight - breadcrumb.height()-18;//--Should really be breadcrumb.height() - padding
container.css({ height: options.maxHeight });//--needs to be a fixed height for the scrolling to work in FF
if (el.height() > maxElHt) {
el.addClass(’fg-menu-scroll’) ;
};
el.css({ height: maxElHt});
};

------------------------
Also move this:
checkMenuHeight(nextList);
FROM

// show next menu
resetChildMenu(parentUl);
<<< checkMenuHeight(nextList);

TO:
};
>>> checkMenuHeight(nextList);
return false;
});
}
// if the link is a leaf node (doesn’t open a child menu)
else {
$(this).click(function(){

Comment by Ken on 06/18  at  08:03 PM

I seem to be having some issues.

I have decided to use this as a top horizontal menu.

I noticed that in any menu that does not have a sub menu within, the colors dont seem to span all the way across like in example 1 on your menu page.  It just goes to the end of the current word of the menu item.

Now, any menu item that does have a sub menu in it, shows the arrow like it should, and that entire menu set works as expected.

I have looked over the code lots and I dont see anything different except for me defining a sub menu.

Any clues on this?

Comment by chris on 06/19  at  05:35 AM

sorry, I should have posted example.

http://img13.imageshack.us/img13/2228/screeniegpl.png

Comment by chris on 06/19  at  05:45 AM

I would like to report that after playing around, I found solution for my case.
I dont know if this messes anything else up but it doesnt seem to, for the most basic of menus (your first example)

in fg.menu.css i found:
.fg-menu li { clear:both; float:left; width:100%; margin: 0; padding:0; border: 0; }

and removed the clear:both;

This seems to have worked for my situation.
thanks

Comment by chris on 06/19  at  05:53 AM

Suggestion : Extend to also support <select>

Replace the <select> with an <input type="hidden"> with the same name and id, and put your flat menu in the same position

Comment by Arthur Pemberton on 06/26  at  09:41 PM

In concerns with the issue/bug :

“If you spaz out and toggle arrow keys very quickly in the iPod-style menu, the menu may break and display a gray bar where the options should be.”

I’ve come up with a fix for that.  I noticed in firebug that when the error occurred, the UL with the class ‘fg-menu’ had it’s display value as ‘none’. The fix is in three parts as follows :

First, the fail safe to make sure that it’s always show when the menu is opened :

inside the this.show() function at around line number 107, ( although line numbers will vary because i also edited the plugin to accept a custom callback) and after the line -
container.parent().show().click(function(){ menu.kill(); return false; });
add this line -
container.find("ul.fg-menu").css("display", “block"); // EDIT

That will make sure that the menu will always reappear.

The second is to do relatively the same thing in the this.resetDrilldownMenu function :

Just put this at the end -
$("ul.fg-menu").css("display", “block");

And the last fix is to fix another error for when your using the bread crumbs mode and not the “back” mode.  It merely checks to see if “backLink” is undefined :

Change the line -
if (prevList.hasClass(’fg-menu-content’)) { b.remove(); footer.hide(); };
to this -
if (prevList.hasClass(’fg-menu-content’) && b != undefined) { b.remove(); footer.hide(); };

So, help that helps anyone who would like to use this before this awesome plugin goes main stream.

Thanks so much for this one!!!!

Comment by tim on 06/28  at  11:25 PM

Thanks Filament Group - very nice stuff!!! My team is going to use these ASAP.

Is it possible you will release a tab menu plugin like Superfish?

It’s easy to find good looking, functionally powerful jQuery tab menus that load hidden content, but it’s hard to find a tab menu plugin like Superfish with tabs that look as good as your buttons (and have onclick built in).

Or is this what http://jqueryui.pbworks.com/Menu is trying to do? ( I guess this one can do horizontal as well, which is what I need. Such a basic web app need.)

Pwease help!

=)

Comment by anonmouse on 06/30  at  12:11 PM

a great job very useful and nice

que chingo esta esto estaba buscando algo de jquery que hiciera esto y la navegacion de ipod muy interesante

Saludos =D

Comment by luis segura on 07/02  at  12:16 AM

There is a bug when the width value of the menu is changed : if you want to go back or select a previous element with the prev Menu, the elements are displayed with a bad interval.

To fix it, replace this line

var newLeftVal = - ($(’.fg-menu-current’).parents(’ul’).size() - 1) * 180;

By this one :

var newLeftVal = - ($(’.fg-menu-current’).parents(’ul’).size() - 1) * container.width();

Comment by Johan - KEYRIO on 07/06  at  04:11 PM

@Chris, Tim, Johan, and others who’ve submitted fixes: Thank you!  We’re catching up on all the updates and hope to have an improved version of the script posted soon.

@Arthur Pemberton:  You may want to check out our recent post, jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select (http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/).

@anonmouse: We don’t currently have a Suckerfish-style menu in the works, however the jQuery UI menu design specs call for a menubar option where “the top-level menu options are arranged either horizontally or vertically in a row, and sub-menus appear either below or beside them.” (http://jqueryui.pbworks.com/Menu) The menu widget is in the UI development queue; if you’d like to contribute to its development, feel free to get in touch with the jQuery UI team by posting a comment on the menu wiki page, or to the jQuery UI developer’s Google group: http://groups.google.com/group/jquery-ui-dev (note that this group is for UI widget development only; for general questions on the use of UI, go to http://groups.google.com/group/jquery-ui).

Comment by Maggie (Filament) on 07/09  at  03:58 PM

A little improvent for that what propose LUKE

If you want the first level to expand automatically when the page loads:

Open fg.menu.js and change this:

$(this)
.mousedown(function(){
if (!m.menuOpen) { m.showLoading(); };

})
.click(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
});

To this:

$(this)
.mousedown(function(){
if (!m.menuOpen) { m.showLoading(); };

})
.mouseover(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
});

After that the menu will expand after mouse hover.

If you want to have menu expanded after page load and then after mouse hover change code to this:

$(this)
.mousedown(function(){
if (!m.menuOpen) { m.showLoading(); };
})
.ready(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
})
.mouseover(function(){
if (m.menuOpen == false) { m.showMenu(); }
else { m.kill(); };
return false;
});

Comment by Piotr Filipowicz on 07/10  at  11:29 PM

NEED HELP ASAP!

Menu layout looks great and I have all of the links in place. I have tried having it get the info from an external file as well as in the page itself - no matter what I do I cannot get them to actually go to the link I specify. It does nothing, just sits there. Hope someone can help.

Comment by Nick Parsons on 07/14  at  06:13 PM

@Piotr Filipowicz.

You could also use (button’s id=flyout):

$(document).ready(function(){
// expand when document loads
$(’#flyout’).click();

... or ...

// expand on button-hover
$(’#flyout’).hover(function () {$(this).click();});
}

Comment by Henri van Balkom on 07/14  at  10:43 PM

Hello, I applied this patch to enable the correct position of the Flyout menu after resizing the window. Instead of using a flag to perform the function create(), I save a copy of the size of the window that then I will compare it to call again the function create() to adjust the position of the menu.
To simplify the comparison using the plugin jquery-json (http://code.google.com/p/jquery-json/). $.toJSON() allows you to convert any objects into a JSON string, which makes it easier comparison.

# This patch file was generated by NetBeans IDE
# This patch can be applied using context Tools: Apply Diff Patch action on respective folder.
# It uses platform neutral UTF-8 encoding.
# Above lines and this line are ignored by the patching process.
--- C:\Documents and Settings\Made\Desktop\- Projects\HOTEL+\admin\jquery\jquery-ui-lab\fg-menu\fg.menu.js
+++ C:\Documents and Settings\Made\Desktop\- Projects\HOTEL+\admin\jquery\jquery-ui-lab\fg-menu\fg.menu.made.js
@@ -98,7 +98,8 @@

this.showMenu = function(){
killAllMenus();
- if (!menu.menuExists) { menu.create() };
+ //if (!menu.menuExists) { menu.create() };
+ if ($.toJSON(menu.menuExists)!=$.toJSON([getWindowWidth(), getWindowHeight()])) { menu.create() };
caller
.addClass(’fg-menu-open’)
.addClass(options.callerOnState);
@@ -238,7 +239,8 @@
};

menu.setPosition(container, caller, options);
- menu.menuExists = true;
\ No newline at end of file
+ //menu.menuExists = true;
+ menu.menuExists = [getWindowWidth(), getWindowHeight()];
\ No newline at end of file
};

this.chooseItem = function(item){
#

Other ideas? Sorry for my bad English :)

Comment by Matteo Trubini on 07/20  at  05:45 PM

Hi, thanks for this great menu. I have one question:

Is it possible to have a menu item that has a child menu, not actually be clickable as a selection itself? Does that make sense?

I was really expecting this to be one of the config options, and was surprised to see that there’s no easy way to control this.

Can you help? Thanks

Comment by Gavin on 07/24  at  05:03 AM

hola!
este menu esta muy padre
pero kisiera que el menu se creara dinamicamente
habra algun problema si lo hago asi ???
ademas tambien trabajo con master page en vstudio 2005 y quise ke al principio estuviera abierto el menu poniendo en la primera funcion del menu esta linea : $("#hierarchybreadcrumb").click();
pero no me funciona :(

gracias por su ayuda :) :P

Comment by yankumi on 07/27  at  05:30 PM

Hi there~ It’s really great jquery ui plugin!! Thanks! ^_^
But I need a feature that I can control item choosed behavior by myself(e.g. I don’t wanna close menu, just give me the selecetd item text).
So, I change the chooseItem function like the following:

this.chooseItem = function(item){
// David modified at 2009-07-28
if( options.itemChoosedState && $.isFunction(options.itemChoosedState) ) {
options.itemChoosedState($(item).text());
} else {
menu.kill();
// edit this for your own custom function/callback:
$(’#menuSelection’).text($(item).text());
// location.href = $(item).attr(’href’);
}
};

And add attribute in options:

var options = jQuery.extend({
....
linkHover: ‘ui-state-hover’, // class for menu option hover state
linkHoverSecondary: ‘li-hover’, // alternate class, may be used for multi-level menus
itemChoosedState: null, // David added at 2009-07-28
...
}

Then, I can alert the selected item text and do something then kill menu by myself.
Just like the following code does:

$(’#fg_menu_button’).menu({
content: $(’#fg_menu_panel’).html(), // grab content from this page
width: 300,
showSpeed: 250,
itemChoosedState: function(text) {
alert(text);
// do something what you want…
this.kill(); // kill the menu, or you can just keep it alive
}
});

I think maybe it will be more flexible.
Hope it’s helpful… :^)

Comment by FireStoke on 07/28  at  06:40 AM

I found a maxHeight attribute problem.
It seems not working if the menu content only got ONE level items.
For example, just like upper provided sample code does:

<ul>
<li>Menu option</li>
<li>Menu option</li>
<li>Menu option</li>
<li>Menu option</li>
..... (more items)
</ul>

So I found a temporary solution like this:

<ul>
<li><ul></ul></li> <!-- To cheat fg-menu make maxHeight working -->
<li>Menu option</li>
<li>Menu option</li>
<li>Menu option</li>
<li>Menu option</li>
..... (more items)
</ul>

Then, the maxHeight works again! It will show scrollbar if visible height exceed maxHeight. Hope it’s helpful~ :^)

Comment by FireStoke on 07/28  at  08:14 AM

I am obviously being a bit thick here.. but I cant get a row of drop downs to work next to each other. Is there some sort of example thats been made.. as all I wanted was somthing like like example one but with say 5 dropdown lists next to each other.

any pointers would be handy

cheers

max

Comment by max on 07/28  at  07:07 PM

I have been having another look at the examples and I have started to play around with the external source example
One question I have is if I wanted to have multiple drop-downs that pulled in there own content then how would I add the extra external source function
I did try just duplicating the
“ // or from an external source” part of the script and just changed the
“$.get(’menuContent.html’
and the
$(’#flyout’).menu

to
“ // or from an external source” part of the script and just changed the
“$.get(’menuContent2.html’
and the
$(’#flyout2’).menu

and then adding a duplicate in the html and adjusting that so it reflected the new references but unfortunately it doesn’t work

does any one have an idea of what I should be doing so I can add multiple drop-downs that can pull in there own separate data

cheers max

Comment by max Fancourt on 07/28  at  08:52 PM

well after trial and error I did get it to work
max

Comment by max Fancourt on 07/28  at  09:57 PM

Hi, I’m trying to use the flyout menu with the framework ASP.NET MVC but it doesn’t work, when I click on the menu it stay static I mean doesn’t display the elements that contain the menu, I think that’s because of how the calls to grab the content are made in the script,:

content: $(’#flat’).next().html(), // grab content from this page

If somebody know how to grab the content of the menu in ASP.NET MVC I’ll be very grateful help.

Thanks in advance ...

Comment by eds on 08/02  at  02:07 AM

I’m having the same problem that Nick posted about on 7/14, my links don’t go anyplace even though they display properly in the bottom the of browser. What am I missing? Thanks.

Comment by Rich Coy on 08/08  at  02:19 PM

Noticed a bug or perhaps a cosmetic issue in IE 6 with the flat menu.  All of the list options have black dashed borders.  Anybody know how to fix it?  Can it be fixed in css?

Comment by IE6 Blows on 08/10  at  04:01 AM

Nevermind, I fixed the problem in IE6.  The css is using a transparent border.  Unfortunately IE6 does not support transparent borders so I just got rid of the border.  On mouse over of the flat menu options it pops the text to the right a little.  Does anyone know a better fix?

Comment by IE6 Blows on 08/10  at  05:53 AM

I am also having the same problem that Nick posted about on 7/14 where my links to not work.  Has anyone resolved this issue?  Thanks.

Comment by Mike on 08/13  at  03:42 AM

Now i download your example drop down menu.
Oh! it’s good for me. Your web is goooooooooooooooood.
Now i can practice drop down menu follow u.
Now i have problem with make arround image conner with css.
Could you resolv this problem for me, i have this problem because i just start study css.
Thank you!
Good Luck..................
From Cambodia.

Comment by Sok Eng on 08/13  at  04:10 AM

nice work.thanks very usefull site

Comment by vikash on 08/13  at  09:35 AM

No debería retroceder el menu de uno en uno, sino que debería retroceder dependiendo de la seccion a la que se quiera ir

var newLeftVal = -($(’.fg-menu-current’).parents(’ul’).size() - 1) * 180;

Comment by Juan Felipe on 08/13  at  09:54 PM

Suggestion:
In ipod style with back button: place the backbutton on the complete left side of the menu.

This is the way of how KDE 4.3.  does it in its start menu.
To me this works better than a back button at the bottom of the menu which may be scrolled out of sight.

Comment by Hans Kruse on 08/14  at  01:19 PM

There was an earlier comment regarding not getting the menu button to work under IE. I’m having the same issue ... works under Firefox (Win & Linux) but with IE 8 or Safari on an XP machine.

Any ideas?

Thanks!
Greg

p.s. great widget by the way

Comment by Greg Saunders on 08/14  at  10:24 PM

but *not* (sorry forgot the not) with IE 8 or Safari

Comment by Greg Saunders on 08/14  at  10:26 PM

! solved my own problem.

I was using my templating engine to do the following:

{{ menu }} is the menu (<ul>) variable

// MENU
$(’#menu’).menu({
content: {{ menu }},
flyOut: true
});

which gets rendered as:

// MENU
$(’#menu’).menu({
content: <ul><li>-snip-</li></ul>,
flyOut: true
});

apparently Firefox can deal with this but it renders as syntactically a royal cluster and neither IE or Firefox can deal with it whereas:

// MENU
$(’#menu’).menu({
content: $(’#menu_content’).html(),
flyOut: true
});

and “menu_content” a hidden div containing your dynamically generated menu works just fine.

<div id="menu_content" style="display: none;">
{{ menu }}
</div>

where {{ menu }} is replaced by the templating engine with the <ul> of the menu.

Thanks

Comment by Greg Saunders on 08/14  at  10:57 PM

Regarding ie7 in my above post I was incorrect.  the issues was with me, It the Height/width is fine until you change fonts in which case you need to change the dimensions of the container accordingly.  Sorry

Comment by توبيكات on 08/16  at  02:12 AM

1. When I try to right align the button, the dropdown does not lineup anymore (off-centered to the right). Is there an option to right align the button?

2. Why is the selecting an entry not resulting a page to be reloaded? I can see #menuSelect changes but page is not updated.
<ul>
<li>Test</li>
</ul>

Comment by poon fung on 08/17  at  07:05 AM

Hi, great plugin!

My data set has a really large top level, and small sub levels. I have noticed that on the ipod style menu with back link, the secondary menu retains the height of the top level menu and also displays a scroll.

Any suggestions on where to start looking to solve this issue?

Comment by Jared on 08/19  at  12:57 AM

it’s really a cool tool.... thank you very much.

But, I found this issue that, when I use multiple menu in a single page with different height [using maxHeight], after toggle a few time the maxHeight changes to the default value & as a result the ‘back’ button disappeared.

In case of IE, removal of the borders from the links gives a batter result…

Thanks
Tanvir

Comment by Tanvir on 08/24  at  01:19 AM

really nice menu.

But i have a small problem when using the menu in a modal jQuery Dialog.
The menu items are covered by the jQuery Dialog… if i move the dialog i can see the items in the background. Furthermore the items are grayed.

Do i do something wrong or is it a bug?

Thanks,
Damrod

Comment by Damrod on 08/25  at  03:28 PM

Just a quick update that the jQuery UI team has moved our menu design prototype into development.  Specs for the new, full-featured menu are outlined at the jQuery UI development and planning wiki, and the team welcomes all feedback:  http://jqueryui.pbworks.com/Menu.

@Damrod:  because this script is just a prototype, we didn’t test it against the existing jQuery UI widgets, so it’s possible there may be a conflict between the scripts.  This should be resolved when the actual jQuery UI menu widget is released.

Comment by Maggie (Filament) on 08/25  at  03:57 PM

ok, thanks for the quick answer :)

Comment by Damrod on 08/25  at  04:09 PM

Hello!

In the beginning I would like to thank you for that excellent plugin!
I appreciate work you’ve put into that project. Hovewer there are still some things to be done.

1) “backLinkText” doesn’t work. I suppose that “options.backLinkText” should be inserted in place of simple Back string, near “initialize “back” link” comment in your script.
2) There are some problems using FF3.5. If the main menu is only few position (in maxHeight 180 & 11px font it would be below 4) , than you won’t be able to click “back” link in chlid menu.

Best wishes.

Comment by Bart on 08/27  at  02:49 PM

This is very nice! Thanks for sharing!

Comment by Atea Webdevelopment & SEO on 08/27  at  04:14 PM

Hello,
If I want this menu to be opened by default and does not close by clicking anywhere (that is not drop down menu), and make its width 100% of page`s width, how can I achieve this?
Please help me......I have become mad of this menu style and animation and want to play with it…

Comment by Saad Khan on 08/28  at  11:49 AM

Hi

Someone know how to set the UI Darkness by default.

Thanks a lot guys.

Comment by Lisa on 08/31  at  11:59 AM

nice job :)

Comment by Kristjan on 09/02  at  07:56 AM

Hi,
First of all, thanks for this nice job :)
I have a little problem. I want a link in my menu to open in a new window, so I’ve added a target="blank", but it seems to be ignored… So how am I supposed to do?
Thanks :)

Comment by Greg on 09/02  at  10:14 AM

Does this menu work with the new theme roller? I’ve just upgraded all the tabs/datepickers etc to the new theme roller style sheets and want to make sure that this menu is going to work before I implement.

Anyway?

Thanks :)

Jason

Comment by Jason Morjaria on 09/02  at  01:59 PM

Thanks a lot, great!!!!!!!!!!1

Comment by u3 on 09/02  at  02:16 PM

Hi
Thanks For your article!!!!
I am developing a website where i am using jQuery Dropdown menu and flash banner.when i am clicking the menu submenus are displaying behind the flash banner but i want to display the menu in front of the flash banner.  can anyone pls tel me how to solve this problem

Comment by Selva Comments on 09/02  at  05:59 PM

@Jason This plugin is compatible with the latest ThemeRoller themes.

@Salva You will need to add an additional script to dynamically write in an iframe behind the menus to fix this bug. As this plugin is merged into jQuery UI, it will include this feature by default with the new StackFix feature. Until then, you need to add bgiframe:
http://plugins.jquery.com/project/bgiframe

Comment by Todd (Filament) on 09/02  at  06:12 PM

Guys, here’s a workaround for “incorrect positioning on window resize if you’ve already clicked open a menu” bug in the flyout version:

The problem is that the function that calculates position does not do so again once the menus have been created:
This is the basic flow:
1) intial creation of the menu object and event binding (very top of fg-menu.js)
2) menu object invokes ShowMenu() (top of the .js file)
3) showMenu() invokes create() IF the menu does not yet exist.
4) create() invokes setPosition() as its last action

so here’s the fragment, with the workaround:

this.showMenu = function(){ //around line 120 in my modified file

killAllMenus();
menu.create(); //NEW LINE
//if (!menu.menuExists) { menu.create() } //ORIGINAL LINE

//lots more stuff

}

Voila.  Now the menus are created on every click and the position is correct.  No it isn’t efficient,, but I can detect virtually NO performance difference between the two versions at all.  It’s just a workaround until the menu goes live over at JQuery UI, but it is working perfectly for me.  (Nothing else I tried, including trapping window resize event in the html script tag, or calling the setPosition function ealier in the create method, were working. )

It’s a really cool menu by the way, and I won’t hold you guys responsible for the pathetic lack of Javscript speed by IE8!

Comment by scott w on 09/02  at  07:37 PM

So I want to have a left side “flyout” menu and a right side “flyout” menu.  I can get the left side one to work, but the right side one has been a challenge.  Has anyone implemented a right side (of the page) menu that opens and is justified to the bottom of the link and opens left?  (Think of it as a reverse menu)

BTW, this menu setup is awesome.  You have done great things here.

Comment by roconnor on 09/02  at  09:54 PM

Hi All… this plugin is amazing!!! But I have two problems:
1 - When I resize the window, the flyout keep in old position. I resolve this question:
$(function() {
$(window).resize(function() {
$(”.positionHelper").css("left", $(window).width() - $(".positionHelper").width());
});
});
But, If I have 2 or more menus will have problems… Any Idea?

2 - How I can change encoding for UTF-8???

Thanks.. Sorry my bad english… :S

Bye

Comment by Flavio Silva on 09/04  at  10:28 PM

In IE have a problem if the value left, top, width or height are NaN.

Fix: (line: 474)
if(isNaN(dims.refX)) dims.refX = 0;
if(isNaN(dims.refY)) dims.refY = 0;
if(isNaN(dims.refW)) dims.refW = 0;
if(isNaN(dims.refH)) dims.refH = 0;

Comment by otakurzo on 09/06  at  07:19 PM

This is amazing!  I am hoping to use the ipod menu w/breadcrumbs in a pre-expanded state, ie w/menu already showing and always showing - That would be complete perfection.  Not having delved into the task yet, perhaps someone has a tip.

Comment by Matthew M on 09/07  at  07:09 AM

Firstly, Brilliant Plugin!

I have also encountered the bug mentioned previously about the back button working…

I was able to isolate this to when there is insufficient ‘main’ menu content to fill the maxHeight eg. perhaps when there is only 2 or 3 <li></li> in the first menu. This results in the child menus not being given a large enough height and the back button is rendered in a position not accessible to the mouse click (I think it’s layered behind a now hidden main menu.

The fix is simple on line 331 of the .js
replace the height(’auto’) to height(options.maxHeight)

//DyasonHat
var resetChildMenu = function(el){ el.removeClass(’fg-menu-scroll’).removeClass(’fg-menu-current’).height(options.maxHeight); };

Cheers and keep up the great work,

DyasonHat.

PS Love the work being done on pbworks.com page, the web needs this plugin.

Comment by DyasonHat on 09/08  at  11:43 AM

Hi Todd, I’ve been thinking, is it possible (loading content from and external source) to open the menu on a specified category? this menu works very well in breadcrumbs and this option will surely be a killer.

Comment by Ben on 09/09  at  10:30 PM

Comment by lalo on 09/10  at  04:56 PM

There is a bug when jQuery is used with another shortcut than “$” (for example when jQuery is used width prototype (jQuery.noConflict() mode).

By default, jQuery uses “$” as a shortcut for “jQuery”, but it can be another shortcut !

You should use “jQuery” instead of “$” in your script, or something like

(function($) {
your script here
})(jQuery);

Comment by Nessi on 09/11  at  09:45 AM

hi, lalo
thanks for your answer, but I already did and I gerere Error in jquery-1.3.2.min.js :( because send parameters with value “NaNpx”.
not have to see if I’m creating the menu dynamically .....

Comment by yankumi on 09/11  at  05:06 PM

I have a situation where one of the long flyout menus opens up. How can I prevent this? The other smaller menus open down. The config options directionV and detectV did not change the behavior.

Comment by Poor_Knight on 09/11  at  05:59 PM

yeesss!!! , my problem either I am solved, or Le Havre when the page is loaded.
now I have another one, I want that the menu does not have position like absolute I can modify where it?

Comment by yankumi on 09/11  at  09:11 PM

This menu is great, so thank you very much for the hard work put in thus far.

I’ve come across as issue not present in your current working demo.

I’m working with a three (3) level menu.  Initial navigation to level 1, level 2, and level 3 all work normal.  However when I navigate back to level 2 through the breadcrumbs, a blank space appears to the left of the list items.  The offset persists through any subsequent navigation.

I’ve put together some screenshots of the issue here: http://gotboda.com/menu-demo/

The only modifications can recall making were made are to colors in the stylesheets and I’ve turned off vertical collision detection.

Any insight on this issue would be much appreciated.

Comment by Chris on 09/14  at  10:20 PM

I find a bug, if set options: flyOut: true
It won’t do checkMenuHeight() function… :(

Comment by firestoke on 09/15  at  05:14 AM

I’m experiencing severe delays due to recursion. The log console fills up with “too much recursion” errors. As soon as a menu is created, the log begins to fill up with such messages. Even if the is no submenu.

Comment by Henri on 09/17  at  04:24 PM

Hey, I would like to first of all say this is very nice menu system. I am wondering however, when you place the menu into a fixed position divider and open it then scroll, the menu tends to stay wherever it first popped up instead of showing up where the menu button is. can you maybe point me in the right direction so I could reset that value after a user has clicked on an item?

Thanks, and Great Job THIS MENU IS SICK!!!

Comment by Charles on 09/17  at  10:50 PM

Hi Maggie, there’s a bug, i think unavoidable, that’s when you “mad click” or “click like a crazy the menu” until eventually it’ll broke. Another thing, is it possible to open the menu in a given category/subcategory? Thanks.

Comment by Ben on 09/24  at  04:28 AM

Looks awesome and would be great for database lookups.

Unfortunately it doesn’t seem to work with the JQuery.UI Layout Plugin… Menu doesn’t appear at all if it is within a layout region.

Comment by Ian on 09/27  at  06:49 AM

When I use the code in ASP.net mvc, the layout is not working as demo.
Is this works with asp.net mvc framework?

Comment by venubabu on 09/28  at  06:11 PM

Hi all, just to be clear: this is menu a interaction design prototype that is built for a specific set of uses that we wanted to share with others as a good starting point that could be expanded or refined for their needs.

It is not a fully featured (or supported) commercial plugin and there are a number of known issues that we’ve documented in the article.  It is not actively being developed (we’re only incorporating patches that people submit) and it definitely hasn’t been tested at all within other UI widgets, 3rd party plugins or server-side frameworks (that’s a very tall order for a prototype). It has been tested to work with jQuery 1.3 and jQuery UI 1.7 only but has an open license so your can take it further than we’ve had time to.

If this menu works for you as-is, that’s great. If not, feel free to post a link to your menu update scrip to it here and people will appreciate your contribution.

Comment by Todd (Filament) on 09/28  at  06:26 PM

Hello, Im Alan Grosz from Cuanticum Argentina.

I want to collaborate with a fix to IE6.
The 1px dashed transparent doesn’t found in fg.menu.css line 92.

You need to replace that with this:

.fg-menu a {
border: 1px dashed transparent !important; /*Important to Firefox*/
/*Fix to make border transparent in ie6*/
border-color: black;
filter: chroma(color=black);
}

Comment by Alan on 09/28  at  09:51 PM

Two questions:
1. How many nodes can be added to this menu in one pass before performance starts to suffer? I have a hierarchical menu I need to browse that will have in the thousands of nodes. Has anyone put this widget through that kind of abuse?

2. Can I “select” any node, and not just leaf nodes? For example, let’s say I have Animals > Mammals > Canines > Dogs, and “Dogs” has a bunch of specific breeds, but I want the user to be able to choose “Dogs” as his final selection. Doable?

Thanks!

Comment by Max on 09/29  at  02:41 AM

You guys are doing great job.

I have a suggestion on flyout menu. It would be great if it has any option to select default selected item (like we have SelectedIndex for combo box).

Right now, I modified plugin to raise an event just before it shows so that I can change class name of previously selected item.

Thanks

Comment by Sagar on 10/01  at  08:26 PM

Hi,
I’ve tried to modify this.chooseItem method so it can execute optional click handler that I’ve added into options object.
To be precise I’ve
1. added one more option:
nextCrumbLink: ‘ui-icon-carat-1-e’,
itemClickHandler: null //luka added so we can pass in item click handler
2. modified this.chooseItem method
this.chooseItem = function(item){
menu.kill();
// edit this for your own custom function/callback:
$(’#menuSelection’).text($(item).text());
// location.href = $(item).attr(’href’);
//luka added so I can handle item click
if (options.itemClickHandler != null) {
options.itemClickHandler.apply(item);
}
};
it works in ff & safari but not on ie, any ideas about what I’m doing wrong?

Comment by luka on 10/02  at  12:56 AM

.. to bad I can not edit my previous comment.
Anyway I found out why it didn’t work on ie.
It’s because I’ve haven’t removed extra comma ‘,’ from positionOpts object at the end of properties where I’ve started by mistake to add new property.
I’ve also modified chooseItem method:
if (options.itemClickHandler != null) {
options.itemClickHandler.apply(item, [$(item).text()]);
}
Hopefully I’m doing it right and somebody can take advantage of this code
Uh, And I almost forgot, all compliments to filament group developers :-)

Comment by luka on 10/02  at  01:11 AM

Hello, great feature!

Just wanted to give you a heads up concerning Internet Explorer 8. It seems your functions getTotalHeight and getTotalWidth in fg.menu.js get broken, when no borders are defined because they return NaN which causes IE8 to throw a JS-error.

I am currently fixing this in my application but wanted to give you a heads up. Otherwise great stuff as always!

Comment by Holger Göbber on 10/02  at  01:59 PM

Hello everyone,

This is an excellent example, but I’m having problems

in IE7, I get an alert message “… IE prevented this website running scripts or ActiveX controls that could access your computer ...”

how can I fix this?

tanks Google translate!! ;)

Comment by ZacJacK on 10/02  at  04:07 PM

Hi. This component it’s fantastic but !

The maxHeight works only for the first menu in breadcrumb.
I have a menu with 44 positions. When I click on first for example, and the maxHeight is 200,
after the click it’s height is equal with the content of the menu. After I go back .. it’s return top the max height 200

Can I somehow limit all menus to 200px ?

Thanks

Comment by Cristian on 10/11  at  08:05 PM

I’ve changed the menu to open on “MouseOver”.

How do I make it autoclose, on “MouseOut” from the menu.

Comment by Jim on 10/12  at  05:16 PM

Hi! You’re doin’ great job with this plugin.
I have a little question: how can i set an default item, so when the menu opens to start “browsing” from there, also the breadcrumbs… Thanx ;)

Comment by Piter on 10/13  at  07:04 AM

Hi all ..
I get an error in IE when I click on an menu item.

Webpage error details

Message: Invalid argument.
Line: 1061
Char: 4
Code: 0
URI: http://webpage/js/jquery-1.3.2.js

This is my code:

// jQuery UI BUTTONS
$(’.fg-button’).hover(
function(){ $(this).removeClass(’ui-state-default’).addClass(’ui-state-focus’); },
function(){ $(this).removeClass(’ui-state-focus’).addClass(’ui-state-default’); }
);

// MENUS
$(’#one’).menu({
content: $(’#one’).next().html(),
backLink: true,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Inapoi’
//crumbDefaultText: ‘ ‘
});

$(’#two’).menu({
content: $(’#two’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

$(’#three’).menu({
content: $(’#three’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

$(’#four’).menu({
content: $(’#four’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

and the jquery line with the error is:

1060 if ( set )
1061 elem[ name ] = value;
1062
1063 return elem[ name ];

Any idea ?

Thanks

Comment by Cristian on 10/13  at  02:22 PM

Hi everyone—We just wanted to thank you all for the helpful feedback, and let you know that we’re no longer taking comments on this post because we’ve handed off development of this widget to the jQuery UI development team.  The menu is currently being refactored and is slated for an upcoming jQuery UI release.  We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki: http://wiki.jqueryui.com/Menu.

Comment by Maggie (Filament) on 10/13  at  04:59 PM

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site