CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapdrop-down-menu
John Cargo
John Cargo

Reputation: 2121

Twitter Bootstrap Broader Dropdown Menu with 2 or more Div

I want to design menu like below in picture :- enter image description here

But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/

Code Below :-

<div class="dropdown">
  <a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
        <div class="dropdown-menu">
            <div class="container">
                <div class="row-fluid">
                    <div class="span6">
                        <ul class="unstyled">
                            <li class="nav-header">Category A </li>
                            <li>Item A</li>
                            <li>Item B</li>
                        </ul>
                    </div>
                    <div class="span6">
                        <ul class="unstyled">
                            <li class="nav-header">Category A </li>
                            <li>Item A</li>
                            <li>Item B</li>
                        </ul>                        
                    </div>
                </div>
            </div>
        </div>
    </li>
  </ul>
</div>

Is above Menu Possible with Bootstrap ?

Thanks

Upvotes: 4

Views: 889

Answers (1)

yarl
yarl

Reputation: 3195

Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.

.dropdown-menu-tworows .span6 {
  width: 49%;
  display: inline-block;
}

Is this what you wanted?

Upvotes: 2

Related Questions