Hello,
I have superfish drop down menu. HTML is rendered with CMenu class. When user clicks on some link in menu, .active class is added to that link to highlight it. What I want is: when user clicks on some sub-menu link, I want it’s parent to be highlighted as active too. I tried by setting ‘activateParents’=>true, but then all <li>'s in submenu are highlighted as active + parent. But ofcourse that is wrong, only one active <li> plus his parent should be highlighted. I tried with several jQuery solutons like this one http://jsfiddle.net/dhMSN/1/, but it didn’t work.
Here is the Menu code :
<!-- Navigation -->
<div id="mainmenu">
<?php $this->widget('zii.widgets.CMenu',array(
'htmlOptions'=>array('class'=>'sf-menu'),
'activeCssClass'=>'active',
'activateParents'=>true,
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'Link 1', 'url'=>array('/site/page_1')),
array('label'=>'Link 2', 'url'=>array('/site/page_2'), 'items'=>array(
array('label'=>'Child link 1', 'url'=>array('/site/child_page_1')),
array('label'=>'Child link 2', 'url'=>array('/site/child_page_2')),
array('label'=>'Child link 3', 'url'=>array('/site/child_page_3')),
array('label'=>'Child link 4', 'url'=>array('/site/child_page_4')),
)),
array('label'=>'Link 3', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Link 4', 'url'=>array('/site/contact')),
array('label'=>'Link 5', 'url'=>array('/site/page_5')),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
</div>
<!-- ENDS Navigation -->
Here is the CSS:
/* NAVIGATION ------------------------------------------------------------*/
#mainmenu{
display: block;
margin-left: 15px;
margin-right: 36px;
padding-top: 15px;
margin-bottom: 10px;
}
#mainmenu li{
float: left;
position: relative;
display: block;
height: 40px;
background: url(../img/nav-item.png) no-repeat transparent;
border-bottom: 1px solid #000000;
border-top: 1px solid #141414;
padding-left: 4px;
padding-bottom: 1px;
}
#mainmenu li:first-child{ border-top: none; }
#mainmenu li:last-child{ border-bottom: none; }
#mainmenu li:hover,
#mainmenu li.active{
background-position: 0px -40px;
}
#mainmenu li a:hover{
color: #ecc731;
left:5px;
}
#mainmenu li.active a{
color: #ecc731;
}
#mainmenu li ul{
padding-left: 20px;
padding-right: 10px;
background : url('../img/dropdown.png') no-repeat top left;
color: #e2e2e2;
}
#mainmenu a{
display: block;
position: relative;
}
/*** ESSENTIAL STYLES ***/
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
/*** LEFT ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
padding: .75em 1em;
text-decoration:none;
}
/*** adding vertical menu ***/
.sf-menu, .sf-menu li {
width: 234px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}
Do anyone have any idea how this can be done ?
