1

I've used YUI Menu in the past for website navigation, and was impressed with it's ability to handle all sorts of cases like viewport size detection, etc. My current project is centered in jQuery, and I wondering if there's a good comparable menu system for jQuery. Web searches haven't turned up an answer to this specific question.

Specific things that YUI Menu does that I am looking for:

  • Creates menu from nested list markup in document (<ul>)
  • Is fairly simple to style (to match site)
  • Progressive enhancement
  • Has sub-menu indicators
  • Is viewport aware when rendering sub-menus (keeps them in the screen, scrolling)

Two examples from the YUI site:

Sonny
  • 8,204
  • 7
  • 63
  • 134

3 Answers3

2

Perhaps you are looking for something like the Filament Group jQuery UI Menu Plugin. It has some powerful dropdown/flyout options, including some iPod style menus with flyouts, etc.

It also looks like the jQuery UI Menu (in development) can do what you are looking for - take a look at the second example on this page

gnarf
  • 105,192
  • 25
  • 127
  • 161
  • That's an impressive menu system, but still not quite what I'm looking for. I added links to examples of the YUI Menu that might clarify my desires. – Sonny Feb 28 '11 at 22:07
  • If you play with filament group's menu system and let me know what are your major gripes, I can sort them out for you. I have done many versions of this menu systems for many clients but for copyright reasons I cant give the code away. Wouldnt take me long :) – Nikhil Mar 04 '11 at 11:10
  • 1) I like sub-menus to open on hover. 2) I would like sub-menus to have their own fly-out. 3) The menus don't seem to be viewport aware. – Sonny Mar 07 '11 at 14:02
  • My above comment was in response to Nikhil. It looks like the jQuery UI menu is going to be what I end up using. Does anyone know the projected release date for jQuery UI 1.9? – Sonny Mar 07 '11 at 14:41
  • @Sonny - You should be able to fork the current menu parts of ui from https://github.com/jquery/jquery-ui/ if you want to start playing with it, just remember - pre-release versions aren't necessarily going to be the same as the final versions. – gnarf Mar 07 '11 at 20:24
  • @Sonny - In particular these two files: [jquery.ui.menu.css](https://github.com/jquery/jquery-ui/blob/master/themes/base/jquery.ui.menu.css) [jquery.ui.menu.js](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.menu.js) - should work against 1.8.9 if you don't want to fork 1.9pre. – gnarf Mar 07 '11 at 20:40
  • @Sonny - Apparently, you'll need changes from [jquery.ui.widget.js](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js) too but it is "pretty stable" according to the team, and probably won't see any API changes before 1.9 final – gnarf Mar 07 '11 at 20:54
  • There is no immediate need, so I can wait for 1.9 final. Thanks! – Sonny Mar 08 '11 at 14:31
  • 1
    @Sonny - Just wanted to update you and let you know that 1.9 final is almost here. We are just working on finishing the new websites to go with the 1.9 release. The code from 1.9 RC should be stable :) – gnarf Sep 12 '12 at 17:38
1

Here you have all class of menus I don't know what do you need exactly, but take a look here:

http://plugins.jquery.com/projects/plugins?type=44

JAiro
  • 5,914
  • 2
  • 22
  • 21
  • I want one that behaves like YUI Menu. Let me know what other information you need, and I'll clarify my question. – Sonny Feb 28 '11 at 18:25
  • you could mention the behave expected, because I had never used YUI. – JAiro Feb 28 '11 at 18:28
1

I would +1 jqueryUI menu. Have a look into simple sample here http://docs.jquery.com/UI/Menu If you are designing a RIA App i suggest ExtJS look here ExtJS menu demo jQueryUI can provide you a menu system like below

wiki.jqueryui.com/f/1226677250/e2_menubar.png

here is a quick code to view the menu'

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="http://view.jqueryui.com/menu/ui/jquery.ui.menu.js"></script> <script type="text/javascript">// <![CDATA[
         $(document).ready(function() {$("ul").menu();});
// ]]></script>
<ul>
    <li><a href="#">Aberdeen</a></li>
    <li><a href="#">Ada</a></li>
    <li><a href="#">Adamsville</a></li>
    <li><a href="#">Addyston</a></li>
    <li><a href="#">Adelphi</a></li>
</ul>
Deeptechtons
  • 10,945
  • 27
  • 96
  • 178
  • I use the jQuery UI elsewhere, and I'm concerned about how difficult it will be to style just the site navigation menu to match the seite design while keeping the other jQuery UI elements with the theme that I use. Which menu system accomplishes the screen shot you linked to? – Sonny Mar 07 '11 at 14:07
  • jQuery UI menu, with the styles UL elements. There is a demo somewhere on filament group site hope you can find it on their blogs – Deeptechtons Mar 08 '11 at 06:12
  • 1
    @Sonny - You can override the themes based on a scoped selector, like `#sitemenu .ui-state-default { ... }` etc – gnarf Sep 12 '12 at 17:39