Create a gist now

Instantly share code, notes, and snippets.

Liferay 6.2 Navigation with responsive toggle
AUI().ready(
'liferay-hudcrumbs', 'liferay-navigation-interaction', 'liferay-sign-in-modal',
function(A) {
var navigation = A.one('#navigation');
var menu_toggle = navigation.one('#nav_toggle');
if (navigation) {
navigation.plug(Liferay.NavigationInteraction);
}
menu_toggle.on('click', function(event){
navigation.one('.collapse.nav-collapse').toggleClass('open');
});
var siteBreadcrumbs = A.one('#breadcrumbs');
if (siteBreadcrumbs) {
siteBreadcrumbs.plug(A.Hudcrumbs);
}
var signIn = A.one('li.sign-in a');
if (signIn && signIn.getData('redirect') !== 'true') {
signIn.plug(Liferay.SignInModal);
}
}
);
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" id="nav_toggle" data-navid="navCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="collapse nav-collapse">
<ul aria-label="#language ("site-pages")" id="navCollapse" class="nav " role="menubar">
#foreach ($nav_item in $nav_items)
#set ($nav_item_attr_selected="")
#set ($nav_item_attr_has_popup="")
#set ($nav_item_caret="")
#set ($nav_item_css_class="lfr-nav-item")
#set ($nav_item_link_css_class="")
#if ($nav_item.isSelected())
#set ($nav_item_attr_selected="aria-selected='true'")
#set ($nav_item_css_class="$nav_item_css_class selected active")
#end
#if ($nav_item.hasChildren())
#set ($nav_item_attr_has_popup="aria-haspopup='true'")
#set ($nav_item_caret='<span class="lfr-nav-child-toggle"><i class="icon-caret-down"></i></span>')
#set ($nav_item_css_class="$nav_item_css_class dropdown")
#set ($nav_item_link_css_class="dropdown-toggle")
#end
<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_item.getLayoutId()" $nav_item_attr_has_popup class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item.getTarget() role="menuitem">
<span>$nav_item.icon() $nav_item.getName() $nav_item_caret</span>
</a>
#if ($nav_item.hasChildren())
<ul class="dropdown-menu child-menu" role="menu">
#foreach ($nav_child in $nav_item.getChildren())
#set ($nav_child_attr_selected="")
#set ($nav_child_css_class="lfr-nav-item")
#if ($nav_child.isSelected())
#set ($nav_child_attr_selected="aria-selected='true'")
#set ($nav_child_css_class="selected")
#end
<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.getTarget() role="menuitem">$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</div>
</div>
</div>
</nav>
<script>
Liferay.Data.NAV_LIST_SELECTOR = '.navbar-inner .nav-collapse > ul';
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment