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">
<?php
 $this->beginWidget('zii.widgets.CPortlet', array(
  'title'=>'Operations',
 ));
 $this->widget('zii.widgets.CMenu', array(
  'items'=>$this->menu,
  'htmlOptions'=>array('class'=>'operations'),
 ));
 $this->endWidget();
?>
</div><!-- sidebar -->
</div>

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 */
	border-style:solid;
	border-color:#80CFFF;
	border-width:1px;
	background-color:#CEEDFF;
}
.operations_ads li:hover {
	background-color:#80CFFF;
}
.operations_ads {
	width: 100% !important;
}
.operations_ads .portlet-content {
	position: absolute;
	width: 732px;
}
Share

5 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.

    Thanks

  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?

  5. Danielle September 17, 2014 10:28 PM

    I read a lot of interesting posts here. Probably you spend
    a lot of time writing, i know how to save you a lot of
    time, there is an online tool that creates readable,
    SEO friendly posts in seconds, just type in google
    - laranitas free content source

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>