Multi level dropdown menu in Bootstrap

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#1)next (#3) »

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: 33 557 times
Version: Unknown (update)
Category: Tutorials
Written by: sefburhan
Last updated by: CeBe
Created on: Jan 18, 2014
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles