CakePHP selected state for navigation links
I'm building a portfolio website using CakePHP that has a navigation like so:
<nav id="nav">
<ul>
<li><?php echo $html->link('Home', '/', array('title' => 'Home')); ?></li>
<li><?php echo $html->link('Portfolio', '/portfolio', array('title' => 'Portfolio')); ?>
<ul>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
<li><?php echo $html->link('Lorem ipsum dolor sit amet, consectetur adipisicing elit', '/portfolio', 开发者_C百科array('title' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit')); ?></li>
</ul>
</li>
<li><?php echo $html->link('About me', '/about', array('title' => 'About me')); ?></li>
</ul>
</nav>
However I would like to add a class of selected to the links when a user is on that page OR within the nested page of it. So for example if they were on a portfolio item then BOTH the item link and the portfolio would have class="selected" on the <li>.
Anyone ever done anything like this with CakePHP? Thanks
Instead of adding a "selected" class to the <li>, you might want to add an id attribute on the <body> tag instead. This solution would be easier to cascade for pages within a specific section that may not adhere to a strict, predictable URL pattern. You could have a default for each controller, etc.
This answer explains how to easily add an id attribute to the <body> tag in CakePHP: Add to <body> tag of a cakePHP app
Otherwise, there are a few menu and navigation view helpers floating around. I found this one here: http://www.solitechgmbh.com/2008/06/06/menu-highlighting-with-cakephp-12/
This is a bit of a combination of CakePHP and "normal" html/php, but it works for me in my CakePHP site.
<a href="/portfolio" <? if($this->params['controller'] == "portfolio")
echo 'class="selected"'; ?>>PORTFOLIO</a>
Or, if you need to check more than just the controller, you can check the action too.
<a href="/pages/about" <? if($this->params['controller'] == "pages"
&& $this->params['action'] == "about")
echo 'class="selected"'; ?>>ABOUT</a>
加载中,请稍侯......
精彩评论