YUI-Style Menu based in jQuery for Website Navigation

1
votes

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:

3
jqueryyuiyui-menu

3 Answers

2
votes

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

1
votes

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

1
votes

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>