Menu highlighting with CakePHP 1.2
In: Tutorials
6
Jun
2008
As far as I can tell CakePHP 1.2 does not have a good navigation menu helper at the moment. That is probably because they have a good link builder that is very flexible so you can just throw some css togeather and make ome very decent looking menus. You can make them look good but wouldn’t it be nice to have a highlight effect that shows the current menu option you selected.
I found a pretty decent solution. It will figure out which section of the website you are in and highlight the proper link. It is pretty crude but it works for what I want it to do.
class MenuHelper extends Helper {
var $helpers = array('Html');
/**
* Highlight a menu option based on path
*
* A menu path gets passed and it compares to requestd path and sets the call to be highlighted.
* Use regular ereg expressions in the pattern matching.
*
* @param path for wich the nav item should be highlighted
* @param optional normal class to be returned, default navLink
* @param optional highlight class to be returnd, default navLinkSelected
* @return returns the proper class based on the url
*/
function highlight($path, $normal = 'navLink', $selected = 'navLinkSelected') {
$class = $normal;
$currentPath = substr($this->Html->here, strlen($this->Html->base));
// if there is a star in the path we need to do different checking
$regs = array();
if (ereg($path,$currentPath,$regs)){
$class .= " ".$selected;
}
return $class;
}
}
A usage example would be something like the following…
Create something like this for each menu item. The string in highlight should be the path part you want the menu item highlighted for.
<?php echo link('Home','/', array('title' => 'Home', 'class' => $menu->highlight("/$"))) ?>
<?php echo link('My Account','/users', array('title' => 'My Account', 'class' => $menu->highlight('/users*'))) ?>
You also need to add some CSS for the menus. This is just an example. This code is used at RewardChamp if you want to take a look.
#navMenu {
width:750px;
margin:0px auto;
height:35px;
}
#navMenu a.navLink {
height:13px;
font:normal 12px Helvetica;
color:#FFF;
float:left;
padding:11px 12px;
margin:0px;
}
#navMenu a.navLink:hover {
background:#3F3F3F;
color:#FFF;
text-decoration: none;
}
#navMenu a.navLinkSelected {
background: #B61D1D;
}
#navMenu a.navLinkSelected:hover {
background: #B61D1D;
}

9 Responses to Menu highlighting with CakePHP 1.2
depi
August 4th, 2008 at 6:04 am
Could you please include also an example how to use that helper? It should be included in the HTML helper link method call?
Gyuri
August 4th, 2008 at 7:49 am
depi: I updated the post and added some examples. I hope this helps. Also, any suggestions for improvements are welcome.
depi
August 4th, 2008 at 12:53 pm
Hello Gyuri (BTW your are Hungarian?
)
I found it out myself, but I had problems highlighting the home page when it was accesses id by “/”, but as I got back here I find the updated version which is great!
So basically the $path in the function is a regular expression, right?
Shouldn’t this $menu->highlight(“/$”) be $menu->highlight(“^/$”) ? Or it doesn’t matter? I’m just curious (I’m not so good in regexp)
Still thanks for your helper, I really like it.
Dom
December 1st, 2008 at 2:42 pm
Hey, this works like a charm. Many thanks!
Olu
June 10th, 2009 at 11:27 am
Where do you save this file, app/views/helpers or app/helpers?
Richard@Home
June 19th, 2009 at 6:53 am
My Link Helper does a similar job:
http://richardathome.com/blog/cakephp-smarter-links
Paolo
July 21st, 2009 at 8:23 am
hi,
I modify the function to accept an array as $path. The result:
function highlight($path, $normal = ‘navLink’, $selected = ‘navLinkSelected’) {
$class = ‘ ‘.$normal;
$currentPath = substr($this->Html->here, strlen($this->Html->base));
// if there is a star in the path we need to do different checking
$regs = array();
if (!is_array($path) && ereg($path,$currentPath,$regs)){
$class .= ‘ ‘.$selected;
}else if (is_array($path)){
foreach($path as $value){
if (ereg($value,$currentPath,$regs)){
$class .= ‘ ‘.$selected;
break;
}
}
}
return $class;
}
William
February 6th, 2010 at 3:57 am
home link ‘/’ is always highlighted. Is there a way to solve this problem ?
William
February 6th, 2010 at 5:05 am
sorry I forgot the ‘$’ after the ‘/’.
But it does not work for the pages controller.