Adding ‘first’ and ‘last’ classes to Joomla 2.5 Menu Items

Adding classes to the first and last element in navigation menu can be helpful in defining menu styles. We can easily add extra class “first” and “last” to the respective elements of the menus by adding a few lines to the menu module code. This as far as I know has never been a feature in Joomla, going forward adding the classes should be made redundant as support for CCS3 matures and we can reliably use the CSS3 Pseudo-classes :first-child and :last-child but until then.

Joomla 2.5.0 has a mod_menu (Joomla 1.7 used mod_mainmenu) module for creating menus. Joomla allows the users to create overrides to get this special enhancements. We want to make an override to Joomla’s ‘mod_menu’ module to get our first and last class functionality. This will allow your modifications to remain after a Joomla update.

The overrides are placed in a folder named “html” inside your template folder. Inside “html” place another folder called “mod_menu” to specify the override. Next, copy the file default.php from modules/mod_menu/tmpl from your Joomla filesystem to newly created override folder (mod_menu). Your default.php file should now be located at templates/{your_template}/html/mod_menu/default.php.

Open the file and add the following two blocks of code:

Add this part at the top of the page below the note that says “Note. It is important to remove spaces between elements.”.

<?php
$last_level_one_id = 0;
for($j=count($list)-1; $j>0; $j—){
  if($list[$j]->level == 1){
    $last_level_one_id = $list[$j]->id;
    break;
  }
} $first_start = true;
?>

Then we find the code below, this is the bit that adds classes to the menu elements and modify as shown below:

  if ($item->parent) {
    $class .= ' parent';
  }

  if (!empty($class)) {
    $class = ' class="'.trim($class) .'"';
  }

We will add a few lines of code between them to get the ‘first’ and ‘last’ class in the menu items. Our new block will look like:

  if ($item->parent) {
    $class .= ' parent';
  }

  //start first last changes
  if($first_start){
    $class .= ' firstitem';
    $first_start = false;
  }else if ($item->shallower || $item->id == $last_level_one_id ) {
    $class .= ' lastitem';
  }

  if ($item->deeper) {
    $class .= ' deeper';
    $first_start = true;
  }
  //end first last changes

  if (!empty($class)) {
    $class = ' class="'.trim($class) .'"';
  }

Finally just update the file on your web server and test. You can now use these classes to apply your styles. If anything goes wrong and you want to revert back, simply delete the file you placed in your html template folder and Joomla will revert back to using the core files.

This article was posted on 3 February 2012 in Joomla, PHP

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.