Yii Vertical Operations Menu (CMenu)

Yii framework provides a nice, dynamic “Operations Menu” with CRUD views generated by Gii application. In one of my projects I wanted to change vertical nature of the operations menu and make it horizontal to match with the template. Below image illustrates the change I wanted. Basically it is all about changing horizontal nature of Yii Operations Menu into a vertical arrangement.

Just to be sure that none of the CSS changes affect other components, DIV containing the CMenu (found in “views/layouts/column2.php”, unless you have moved it elsewhere) was modified as shown below:

Note the new class “operations_ads” added to the wrapper DIV.

<div class="span-5 last operations_ads">
<div id="sidebar">
 $this->beginWidget('zii.widgets.CPortlet', array(
 $this->widget('zii.widgets.CMenu', array(
</div><!-- sidebar -->

Finally flowing CSS was added:

.operations_ads ul {
	/* transform horizontal <UL> into a vertical UL*/
	display: inline !important;
.operations_ads li {
	/* transform horizontal <UL> into a vertical UL*/
	display: block !important;
	float: left !important;
	padding-right: 10px;
	margin-right: 10px;
	/* Styling */
.operations_ads li:hover {
.operations_ads {
	width: 100% !important;
.operations_ads .portlet-content {
	position: absolute;
	width: 732px;

4 comments on “Yii Vertical Operations Menu (CMenu)

  1. Iqbal Syamsu July 12, 2013 1:40 PM

    This is what I’m looking for. Thanks !

  2. Kishore September 23, 2013 8:04 AM

    Thank You very much

  3. Lalith October 2, 2013 12:24 PM

    Nice work. How to display the CMenu on top of the page.


  4. Marvin April 24, 2014 5:38 PM

    Exactly what i wanted to achieve, however i wanted to ask where do you put the css code because bootstrap component overrides everything css related, in my case it works because i put the css code in tag inside the column2.php, but is there more elegant solution?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">