Liferay 5.2.3 - Change Navigation to an Accordian

1. Change the navigation.vm file in your theme to the following (Note, change the options for different effects):

<script type="text/javascript">
jQuery().ready(function(){
jQuery('#accordian-nav').accordion({
active: false,
header: '.head',
event: 'mouseover',
fillSpace: true,
active: '.selected',
animated: 'easeslide'
});

});

</script>

<div id="navi" class="sort-pages modify-pages">
<ul id="accordian-nav">
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected")
#else
#set ($nav_item_class = "")
#end

<li class="$nav_item_class">
<a class="head" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

#if ($nav_item.hasChildren())
<ul class="">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
#set ($nav_child_class = "selected")
#else
#set ($nav_child_class = "")
#end

<li class="$nav_child_class">
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</div>

2. Add the CSS to your custom.css file (You'll definitely want to modify the colors):

/* Accordian Navigation */
#navi {
border:1px solid #5263AB;
margin:0px;
padding:0px;
text-indent:0px;
width:200px;
}
#navi a.head {
cursor:pointer;
border:1px solid #43AEE4;
color:#336699;
display:block;
font-weight:bold;
margin:0px;
padding:0px;
text-indent:14px;
text-decoration: none;
background-color: green;
}
#navi a.head:hover {
color:#000;
}
#navi a.selected {


}
#navi a.current {
background-color:#FFFF99;
}
#navi ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
height: auto!important
}
#navi li {
list-style:none outside none; display:inline;
}
#navi li li a {
color:#000000;
display:block;
text-indent:10px;
text-decoration: none;
}
#navi li li a:hover {
background-color: #E3F1FA;
color:#FF0000;
}

Example:



The only thing I don't particularly care for at this stage is that it moves all content items down. Solvable, but good enough for now. ;)

Only tested in IE7 and FF3