styling CMenu links

Hello everyone!

Can anybody tell me how to style hyperlinks created with CMenu widget?

<?php $this->widget('zii.widgets.CMenu',array(

			'items'=>array(

				array('label'=>'Вхід', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),

				array('label'=>'Вихід ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),

				array('label'=>'Про сайт', 'url'=>array('/site/page', 'view'=>'about')),

				array('label'=>'Контакт', 'url'=>array('/site/contact'))

				

			),

		)); ?>

I want to add class ‘menu’ to style my hyperlinks.

Thanks.

You can use htmlOptions.

<?php $this->widget('zii.widgets.CMenu',array(

                        'items'=>array([ ... ] ),

                        'htmlOptions'=>array('class'=>'#menuClass')

); ?>

Now in the css you can style like:

#menuClass ul li

{

   color: [...];

}

But I need to use this css

a.menu:link {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

a.menu:visited {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

a.menu:hover {color:#F8F8F8; font-size: 12px; font-weight: bold; text-decoration: none}

a.menu:active {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

So I need to style ‘a’ and not ‘ul’,‘li’.

Hi dude. You can use linkOptions and set the class of the anchor like this:

<?php $this->widget('zii.widgets.CMenu',array(

'id'=>'menuClass',                        

'items'=>array(

                                array('label'=>'Вхід', 'url'=>array('/site/login'), 'linkOptions'=>array('class'=>'menu'), 'visible'=>Yii::app()->user->isGuest),

                                array('label'=>'Вихід ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'linkOptions'=>array('class'=>'menu'), 'visible'=>!Yii::app()->user->isGuest),

                                array('label'=>'Про сайт', 'url'=>array('/site/page', 'view'=>'about'), 'linkOptions'=>array('class'=>'menu')),

                                array('label'=>'Контакт', 'url'=>array('/site/contact'), 'linkOptions'=>array('class'=>'menu'))

                                

                        ),

                )); ?>

link to documentation

http://www.yiiframework.com/doc/api/1.1/CMenu#items-detail

But i think it is the worst implementation. You don’t need extra stuff in your code. You should try other approach.

What do you really nead? I think you can forget all above and just use CSS to control your links appearance like below.

#menuClass ul li a:link {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

#menuClass ul li a:visited {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

#menuClass ul li a:hover {color:#F8F8F8; font-size: 12px; font-weight: bold; text-decoration: none}

#menuClass ul li a:active {color:#FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none}

Don’t forget to wrap your menu code inside a div with the correct id or just set the id property of CMenu.

http://www.yiiframework.com/doc/api/1.1/CMenu

By the way compact you CSS code. You don’t need repeat yourself.

CSS means Cascade Style Sheets so you can join the repeated attributes of elements.

#menuClass ul li a { font-size: 12px; font-weight: bold; text-decoration: none }

#menuClass ul li a:link, #menuClass ul li a:visited { color:#FFFFFF; }

#menuClass ul li a:hover, #menuClass ul li a:active { color:#F8F8F8; }

Thank you, thiagovidal.

Your advices are great and really valuable.

Is it possible to add any separator between menu items in CMenu?

I want my menu to look something like this

item1 | item2 | item3

Thanks

Yep:

cmenu-with-seporator/

Thank you jacmoe.