Theming zii.widget.CMenu

Yii 1.1 General Discussion
1

default cmenu output is




<ul>

<li>menuitem1</li>....

</ul>

is there some way to make the layout different? like, make view for it, as i do it in CListView via ‘itemView’ attribute?

Thanks

2

What do you want to generate?

3

just links without list -




<a href="">link1</a>

<a href="" class="selected">link2</a>

....
4

What’s the point in links without a list? Using lists is much more semantically correct.

You can easily style it to look like just like there is no list. Set widget’s htmlOptions to array(‘class’ => ‘my_menu’). Add following to your CSS:




.my_menu {

  list-style: none;  

}


.my_menu li {

  display: inline;

}
5

Need to generate a bit larger structure. i know i can css lists to be invisible - was just an example :) So - is there any way to define your own structure for CMenu? Thanks

6

Right now you can’t do it by configuring a widget. It will be something like:




class MyMenu extends CMenu {

  protected function renderMenu($items)

	{

		if(count($items))

		{

			$this->renderMenuRecursive($items);

		}

	}

}


protected function renderMenuRecursive($items)

	{

		foreach($items as $item)

		{

			if(isset($item['url']))

				echo CHtml::link($item['label'],$item['url'],isset($item['linkOptions']) ? $item['linkOptions'] : array());

			else

				echo CHtml::tag('span',isset($item['linkOptions']) ? $item['linkOptions'] : array(), $item['label']);

			if(isset($item['items']) && count($item['items']))

			{

				$this->renderMenuRecursive($item['items']);

			}

		}

	}

}
7

I don’t know if you are trying to do something exotic – but you can simply put the menu widget in a div with a class or an id,




	<div id="mainmenu">

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

etc…

and then in the css sheet set the elements like this:




#mainmenu ul li a

{

	color:#ffffff;

	background-color:transparent;

	font-size:12px;

	font-weight:bold;

	text-decoration:none;

	padding:5px 8px;

}


#mainmenu ul li a:hover

{

	color: #7C0C00;

	background-color:#FFFEC0;

	text-decoration:none;

}

#mainmenu ul li a.active

{

	color: #7C0C00;

	background-color:#FCF489;

	text-decoration:none;

}

or however you want to style it…

if you want to change the class itself, I don’t know - but this method is simple and it works.

PS firebug is great for trying out changes in css (and for tracking down the css files in some of the jquery stuff)

8

Superb, thats what i needed to know :) thanks

9

is there a <span> tag included in the CMenu widget? i mean

i would like the output to be <ul>

                          &lt;li&gt;


                          &lt;a href=&quot;#&quot;&gt;&lt;span&gt;Click here&lt;/span&gt;&lt;/a&gt;


                          &lt;/li&gt;


                          &lt;/ul&gt;

right now it just has the <a> tag

                     &lt;a href=&quot;#&quot;&gt;Click here&lt;/a&gt;

i checked it out via ‘view selection source’ of mozilla.

10

it’s cool… i got it… i just turned encodedLabel to false and added <span> inside the label like this


array('label'=>'<span>Contact</span>', 'url'=>array('index.php/site/contact')),

works fine :D