We've seen this design before, navigation links that somehow bare children that you're able to play with in the comfort of the navigation's "lawn." Now don't get me wrong, there's really no perfect analogy for how simple and efficient dropdowns can be, it's just straightforward fun navigation.

While designing a theme for Liferay, you've probably wondered to yourself, "How easy would it be to actually implement this." Then maybe, you've drifted into the sub-navigation blues... well take it easy, maybe even get your Liferay plugin's sdk out and make some sub-navigation dropdowns with me:

Recently, I've been showing interns how to build drop down navigation items within Liferay themes. I think this information might be useful for those with the "sub-navigation blues."

To start, I developed this on Liferay 5.2 EE SP2, the jQuery javascript should work up to the latest version below 6.0

Building web interface usually involves html, which in our case, we're using Velocity to render html. Velocity is simple templating language developed by Apache. Then we also have the CSS and Javascript to format our sub-navigation visually and functionally.

Our journey starts within the theme:

In my navigation.vm file within the templates folder, Liferay 5.2 includes the for-loop I need in order to get the first child of the current iteration of the navigation item... it starts with a:

#if ($nav_item.hasChildren())

#foreach ($nav_child in $nav_item.getChildren()) #if ($nav_child.isSelected()) #set ($nav_child_class = "selected") #else #set ($nav_child_class = "") #end
• $nav_child.getName()
#end

You can actually inspect the html and find that the child menu is just hidden with plain css. This is controlled through the navigation.css, within the CSS folder. To override this attribute, we'll change the state from within custom.css:

#navigation li:hover .child-menu, .ie6 #navigation li.hover .child-menu { display: block; }

You must be wondering why there's two selectors. To render the hover state in Internet Explorer 6, I needed to use javascript in order to specify the list item's hover state.

Here's some of the code for the actual child menu and the list item that holds it.

#navigation ul li { position: relative } #navigation .child-menu { background: #FFF; border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 13px #999; -moz-box-shadow: 0px 0px 13px #999; -webkit-box-shadow: 0px 0px 13px #999; left: 0; margin: 0; padding: 3px 0; position: absolute; top: 35px; width: 210px; z-index: 2; }

So in the end, there's just about 378 lines of formatted CSS (5.83kb), and 2 other edited files (navigation.vm 1.52kb and javascript.js 864bytes)... the 4 images came down to 16.3kb for all of them.

Download the theme and check out the code and play around with it. It's not a perfect or production quality theme, but it's a good way to explore how to make sub-navigation dropdowns.