Implementing YUI or AlloyUI in Liferay

Implementing YUI 3.2 node menunav in Liferay

I am a novice to YUI and Alloy UI but want to share my learnings on how to implement YUI 3.2 Node MenuNav (YUI navigation) in Liferay. I am currently on Liferay 6 which has YUI 3.2 inbuilt.

 For adding YUI navigation in Liferay theme, add the following code:

1. Create a theme in Liferay.
2. Add the following code in the navigation.vm:

<div id="menu-1" class="yui3-menu"><!-- Root menu bounding box -->
<div class="yui3-menu-content"><!-- Root menu content box -->
<ul>
<li class="yui3-menuitem"><!-- Menuitem bounding box -->
<a class="yui3-menuitem-content" href="http://www.yahoo.com"><!-- Menuitem content box -->
Yahoo!
</a>
</li>
<li>
<a class="yui3-menu-label" href="#pim">PIM</a><!-- Submenu label -->
<div id="pim" class="yui3-menu"><!-- Submenu bounding box -->
<div class="yui3-menu-content"><!-- Submenu content box -->
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://mail.yahoo.com">Yahoo! Mail</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Yahoo! Address Book</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Yahoo! Calendar</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Yahoo! Notepad</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">

YUI().use("node-menunav", function(Y) {

var menu = Y.one("#menu-1");
 menu.plug(Y.Plugin.NodeMenuNav);
// Show the menu now that it is ready
menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");

});

</script>
Build the theme and apply to check the navigation working. Don't forget to add the CSS as that is not inbuilt with Liferay.

If you are trying to use some other version of YUI node menunav then add the yui folder in webapps and call it in vm, it will work.

YUI 3.2 navigation example:
http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/node-menunav/node-menunav-1.html

Hope this will help.