You are viewing revision #3 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.
To get multi level dropdown menu of using boostrap extension (http://www.yiiframework.com/extension/bootstrap/) widget TbNavbar just follow steps
1) copy css into your main css file, you can change according to your requirements!
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
2) change your TbNavbar widget
<?php
$this->widget('bootstrap.widgets.TbNavbar', array(
'...'
'items' => array(
array(
'class' => 'bootstrap.widgets.TbMenu',
'submenuHtmlOptions' => array('class' => 'multi-level'),
'items' => array(
array('label' => 'Top', 'url' => '#', 'items' => array(
'...',
array('label' => 'Level One', 'url' => '#',),
array('label' => 'Level One', 'url' => '#', 'itemOptions' => array('class' => 'dropdown-submenu'),
'items' => array(
'...',
array('label' => 'Level One', 'url' => '#',),
),
),
)
),
),
),
),
));
?>
You can define as many levels as you want just by changing itemOptions array options.
Funciona correctamente
Si no se maneja boostrap sino CMenu, nada más se copia el css y se pone el submenu.
'itemOptions'=>array('class'=>'dropdown-submenu'),
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.