adding ‘first’ and ‘last’ class to Joomla Menu items : Menu overrides
Posted by cecil in Joomla, Web DevelopmentAug 27th, 2009 | 11 responses
one often needs to define the first and last element in navigation menu. It is needed when you want to remove the last/first unwanted border or maybe if you want to highlight the first item differently. The effect can be achieved by adding an extra class “first” and “last” to the respective child elements of the menus. It is a much sought after feature and I feel should be made the default feature of joomla menu system.
Joomla has a mod_mainmenu module for creating menus. Joomla allows the users to create overrides to get this special enhancements. We would make an override to joomla’s ‘mod_mainmenu’ module to get out classification finctionality.
The overrides are placed in a folder named “html” inside your template folder. Inside ‘html’ place another folder called ‘mod_mainmenu’ to specify the override. Next, copy the file default.php from modules/mod_mainmenu/tmpl from your joomla filesystem to our folder(mod_mainmenu). I recommend you get your own file it may avoid any version related issues. Your default.php file is now located similar to:
templates/MYTEMPLATE/html/mod_mainmenu/default.phpopen the file and navigate to the ‘ul’ component which looks like
if ($node->name() == 'ul') {
foreach ($node->children() as $child)
{
if ($child->attributes('access') > $user->get('aid', 0)) {
$node->removeChild($child);
}
}
}
We will add a few lines of code to this to get the ‘first’ and ‘last’ class in the menu items. Our new block will look like :
if ($node->name() == 'ul') {
foreach ($node->children() as $child)
{
if ($child->attributes('access') > $user->get('aid', 0)) {
$node->removeChild($child);
}
}
//NEW CODE STARTS HERE
$children_count = count($node->children());
$children_index = 0;
foreach ($node->children() as $child) {
if ($children_index == 0) {
$child->addAttribute('class', 'first');
}
if ($children_index == $children_count - 1) {
$child->addAttribute('class', 'last');
}
$children_index++;
}
//ENDS HERE
}
We are done. Just update the file on your webserver and test it. Now the menu child items must get classified. You can now use these classes to transform the look of its children elements.
11 Responses to “adding ‘first’ and ‘last’ class to Joomla Menu items : Menu overrides”
Leave a Reply
About Me
My Portfolio
little, but great modification.
exactly what I need.
Thank you!
Thanks for this post it got me on the right track to what I was trying to do. I needed a unique and predictable class on each and every menu item so I could style each one differently and whilst it needed a bit of adapting this was basically the answer.
Most excellent script. The only way I’ve been able to manage this so far is with CSS3 last-child which at present has limited support. Thanks to your help I now have cross browser joomla last-child alternative
THANKS!
[...] started poking around and ran into an August 2009 blog entry from Cecil Gupta that addresses the problem nicely. It shows you how to modify the menu code in [...]
Thank for this short and sweet script.
Excellent work. Thank You.
Hurray!!
aw, i love this mod
thanks
Ive tryied using this script for my joomla 1.5.15 pages and nothing seems to make it work. is this compitible with the latest version? i have a simple 1 level menu in Ul format (not the table format) and the first and last class will not get added… i dont understand this is simple i did exactly like stated. i also tried puttin it in templates/MYTEMPLATE/html/mod_mainmenu/default.php AND templates/MYTEMPLATE/html/mod_mainmenu/tmpl/default.php and no luck i even overrided the orginal one in the modules still nothing…. i need this to work badly
You need to check if you are even using the joomla native mainmenu module to render the menu. I doubt that because only then editing the files shall have no effect on the frontend. The trick applies till the latest version of joomla and works great.
Yup using mod_mainmenu the base menu included with joomla. i have a 2nd menu type installed in a diffrent position: http://box1.thegiant.ca/~belo/index.php?option=com_content&view=article&id=2&Itemid=2 the menu on the right is the one im trying to add the first last to. i changed the code you have above that starts on line 27 in the file default.php i really dont get why this isnt working. i tryied using a base joomla template and i still dont see the first last
Just tested the override on my latest Joomla 1.5.17 devsite here . Works cool for me.