Multi level dropdown menu in Bootstrap

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.

4 0
38 followers
Viewed: 32 878 times
Version: 1.1
Category: Tutorials
Written by: sefburhan
Last updated by: CeBe
Created on: Jan 18, 2014
Last updated: 9 years ago
Update Article

Revisions

View all history

Related Articles