I am new to Yii, and I have been LOOKING for documentation on Yii and CMenu. I have used Phalcon and various other frameworks with similar options, but Yii's menu engine is new to me.
I am trying to create a button menu with two drop down menu buttons, each with sub menu items, like this: Drop Down Button Group
But what is being rendered by the Yii CMenu engine is two drop down menus overlayed on each other and both are being triggered by the same buttons. Like this: enter image description here
Looking at the rendered code, it looks like the two dropdown menus are being assigned the "dropdown-menu" class by CMenu, (or whatever the bootstrap enabled lib is) and becasue they are in the same button group, when the "open" class is assigned, it's opening BOTH dropdowns at the same time.
So my question is simple, is is even possible, using the CMenu menu arrays, to have two dropdowns in the same. Is there a menu "Item Option" or "HTML Option" I can add to the menu item properties that will all this to reference two different css tags? I know I gotta be missing something.
Here is how the menu's are being built in the view.
$this->menu = array_merge($this->menu, array(
array(
'label' => '<span class="hidden-xs hidden-sm">' . Yii::t('app', 'Export') . '</span>',
'encodeLabel' => false,
'htmlOptions' => array('id' => 'export-or-email-btn', 'class' => 'navbar-btn btn-sm',),
'items' => array(
array(
'label' => Yii::t('app', 'Export'),
'icon' => 'fa fa-file-excel-o',
'visible' => true,
'itemOptions' => array('class' => 'work-order-export-btn'),
),
array(
'label' => Yii::t('app', 'Email Export'),
'icon' => 'fa fa-envelope-o',
'visible' => true,
'itemOptions' => array('id' => $model->getClassName(), 'class' => 'email-export-btn', 'data-grid-id' => 'work-order-grid'),
),
array(
'label' => Yii::t('app', 'Export as Import Template'),
'icon' => 'fa fa-file-excel-o fa-lg',
'visible' => true,
'itemOptions' => array('class' => 'work-order-export-import-btn'),
),),),);
$this->menu = array_merge($this->menu, array(
array(
'label' => '<span class="hidden-xs hidden-sm">' . Yii::t('app', 'Actions') . '</span>',
'encodeLabel' => false,
'htmlOptions' => array(
'id' => 'work-order-actions-btn work-order-actions',
'class' => 'navbar-btn btn-sm',
'style' => 'margin: 0 0 0 15px;',
),
'items' => array(
array(
'icon' => 'fa fa-print fa-lg',
'label' => Yii::t('app', 'Print to PDF'),
'visible' => true,
'itemOptions' => array(
'class' => 'work-order-print-pdf',
),),
array(
'icon' => 'fa fa-print fa-lg',
'label' => Yii::t('app', 'Print'),
'visible' => true,
'itemOptions' => array(
'class' => 'work-order-print-selected',
),),))));
and here is the rendered code snippet:
<div class="btn-toolbar">
<div class="operations btn-group-sm btn-group open">
<button id="export-or-email-btn" class="navbar-btn btn-sm btn btn-primary dropdown-toggle" data-toggle="dropdown" name="yt7" type="button">
<span class="hidden-xs hidden-sm">Export</span>
<span class="caret"></span>
</button>
<ul id="yw6" class="dropdown-menu">
<li class="work-order-export-btn nav-header" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-file-excel-o"></i> Export</a>
</li>
<li id="WorkOrder" class="email-export-btn nav-header" data-grid-id="work-order-grid" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-envelope-o"></i> Email Export</a>
</li>
<li class="work-order-export-import-btn nav-header" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-file-excel-o fa-lg"></i> Export as Import Template</a>
</li>
</ul>
<button id="work-order-actions-btn work-order-actions" class="navbar-btn btn-sm btn btn-primary dropdown-toggle" style="margin: 0 0 0 15px;" data-toggle="dropdown" name="yt8" type="button">
<span class="hidden-xs hidden-sm">Actions</span>
<span class="caret"></span>
</button>
<ul id="yw7" class="dropdown-menu">
<li class="work-order-print-pdf nav-header">
<a href="#"><i class="fa fa-print fa-lg"></i> Print PDF</a>
</li>
<li class="work-order-print-selected nav-header">
<a href="#"><i class="fa fa-print fa-lg"></i> Print Selected</a>
</li>
</ul>
</div>
</div>
I think your problem is you are merging both arrays in the same $this->menu attribute.
Maybe you should use CMenu as widget like in the documentation
$this->widget('zii.widgets.CMenu', array(
'items'=>array(
// Important: you need to specify url as 'controller/action',
// not just as 'controller' even if default action is used.
array('label'=>'Home', 'url'=>array('site/index')),
// 'Products' menu item will be selected no matter which tag parameter value is since it's not specified.
array('label'=>'Products', 'url'=>array('product/index'), 'items'=>array(
array('label'=>'New Arrivals', 'url'=>array('product/new', 'tag'=>'new')),
array('label'=>'Most Popular', 'url'=>array('product/index', 'tag'=>'popular')),
)),
array('label'=>'Login', 'url'=>array('site/login'), 'visible'=>Yii::app()->user->isGuest),
),
));
For more information and attributes check out the official documentation here.