Yahoo! User Interface Blog (YUIBlog)

In the YUI 3 Gallery: Julien Lecomte’s 1.3KB SimpleMenu with Keyboard and ARIA Support

Julien Lecomte wrote the SimpleMenu module for use on Yahoo! Search (the “More” link uses this code). It’s superbly light — a 1.3KB minified script leveraging the YUI 3 core, plugin architecture, and keyboard/focus management utilities. Moreover, it’s simple to use. He’s shared it in the YUI 3 Gallery — you can use it under YUI’s BSD license or you can grab the source from GitHub and use Julien’s code as starting point for your own project.

Julien hasn’t had time to document the widget fully, so I wrote up a common use case.

Take a simple piece of markup:

<!--menu activator-->
<a href="http://developer.yahoo.com/yui/" id="optionsmenu">YUI-Related Links</a>

<!--menu contents-->
<div id="optionsmenucontainer" class="yui-cssreset">
<ul>
<li><a href="http://developer.yahoo.com/yui/">YUI documentation</a></li>
<li><a href="http://yuilibrary.com">YUI project site</a></li>
<li><a href="http://yuilibrary.com/forum/">YUI discussion forums</a></li>
<li><a href="http://yuiblog.com">YUIBlog</a></li>
<li><a href="http://developer.yahoo.com/yui/theater/">YUI Theater</a></li>
<li><a href="http://yuilibrary.com/gallery/">YUI 3 Gallery</a></li>
<li><a href="http://twitter.com/yuilibrary">@YUILibrary on Twitter</a></li>
<li><a href="http://twitter.com/miraglia/yui/members">@YUILibrary developers on Twitter</a></li>
</ul>
</div>

And the following script:

<script type="text/javascript" 
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.10-01/
build/gallery-simple-menu/gallery-simple-menu-min.js"></script>

<script language="javascript">
YUI().use('gallery-simple-menu', function(Y) {
    Y.one('#optionsmenu').plug(Y.Plugin.SimpleMenu);
});
</script>

What remains is simply some CSS styling. Julien’s widget applies the .menu-visible class when the menu is activated; a simple approach is to set the menu container’s default position to absolute and move it off-screen. Then, in your .menu-visible declaration, remove the offset and allow the widget to position the container under its activator element:

#optionsmenucontainer {
    left:-4500px;
    position:absolute;
}

#optionsmenucontainer.menu-visible {
    left:auto;
}

Click through to try this example in action.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!