Yii Framework Forum: How To Highlight Parent <Li> When Child <Li> Is Active In Dropdown Menu, Using Cmenu ? - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

How To Highlight Parent <Li> When Child <Li> Is Active In Dropdown Menu, Using Cmenu ? Rate Topic: -----

#1 User is offline   trance 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 43
  • Joined: 26-February 13

Posted 14 June 2013 - 02:28 PM

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 ?
0

#2 User is offline   trance 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 43
  • Joined: 26-February 13

Posted 15 June 2013 - 08:42 AM

I have solved the problem. The problem was with CSS. Pay attention on this part :

#mainmenu li.active>a{
	color: #ecc731;
}


I needed to add > between active a, because without it yii would select and apply active class to all child classes. > is child combinator and it makes sure that only direct child element is selected.

CMenu rocks, Yii rocks, I can not believe how good this framework is :D

Cheers
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users