Modifying Joomla Main Menu's submenu using template override

Question

Hi,

I would like to achieve the following in my Joomla template's main menu:

    <ul class="topmenu">
         <li><a class="nav_link" id="active" href="#">Home</a></li><span class="separator"></span>
         <li><a class="nav_link" href="#">About Us</a></li><span class="separator"></span>
         <li><a class="nav_link" href="#">Services</a>
<div class="subnav_wrapper">
      <ul class="subnav">
       <li><a class="sub_nav_link" href="#">Custom Software</a></li>
       <li><a class="sub_nav_link" href="#">Software Solutions</a></li>
       <li><a class="sub_nav_link" href="#">Mobile SMS</a></li>
       <li><a class="sub_nav_link" href="#">Web Solutions</a></li>
       <li class="last"><a class="sub_nav_link" href="#">ICT Consultancy</a></li>
      </ul>
      </div>
     </li><span class="separator"></span>
</ul>

I've already overriden the default.php file for the module (I've copied "default.php" from "modules\mod_mainmenu\tmpl" into "templates\mytemplate\html\mod_mainmenu". What I don't get is how I can differentiate between the top-level ul, li and a elements and those in the subnav. For example, to add the class "last" to the last list item in the subnav, I've tried the following:

if ($node->name() == 'ul') {
   foreach ($node->children() as $child)
   {
    if ($child->attributes('access') > $user->get('aid', 0)) {
     $node->removeChild($child);
    }
   }
   $children_count = count($node->children());
   $children_index = 0;
   foreach ($node->children() as $child) {
   if ($children_index == $children_count - 1) {
    $child->addAttribute('class', 'last');
   }
   $children_index++;
   }

 }

But the above adds the class also in the last item of the top-level ul.

Is a way to achieve the desired effect using the template override method?

Answer 1

Not sure about the template overriding of menus. You could look at http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/tree-menus/163 which is a great module for customising menus.

Alternatively, if you want to merely style the menu items you could look into using ul li:last-child in your CSS. Note this is not fully supported across all browsers.