Yii 1.1: Multi level dropdown menu in Bootstrap

40 followers

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.

Total 1 comment

#17068 report it
keiny at 2014/04/29 09:58pm
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'),

Leave a comment

Please to leave your comment.

Write new article