"Large Dropdown Menu"
Bootstrap 3.0.0 Snippet by diglog

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Large Dropdown Menu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React
Navbar with Social icon & Dropdown
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu

Questions / Comments:

With dropdrown-menu as position:static is complicated for making dropdown center

Adriano Resende () - 8 years ago - Reply 0

How to use tab section in this mega menu?

Santosh Neupane () - 8 years ago - Reply 0

It is not working with Bootstrap 3.3.4. Can anyone resolve this how to make it work?

Anuj Garg () - 9 years ago - Reply 0

How can I enable vertical scroll if page is shorter than menu??

Mike () - 10 years ago - Reply 0

I used this menu and placed PHP Code to generate my menus's for me !

see Link for image if my issues - http://guestlodge.za.org/we...

The area marked with red is where the second row of menu items are supposed to be and nothing ?

there are four sets of menus below what is visible now that are just disappearing into nothingness

i used the standard menu as per the sample above

Any help appreciated
Thank you
Sam

Charles Harris () - 10 years ago - Reply 0

you saved my deadline thanks :D

Hasan Zahran () - 10 years ago - Reply 0

works fine! but try this .dropdown-menu-large { /*margin-left: inherit;*/ left:inherit; margin-right: 16px;padding: 20px 0px; } to better alignment :) thx!

pmendonca () - 10 years ago - Reply 0

it is great! however, how do you deal with the dropdown list in the right corner?

Wei () - 10 years ago - Reply 0

how can i open collapse able menu under any link which expand more child but on click ....

David () - 10 years ago - Reply 0

Excellent job!! thanks!

Luis Abarca () - 11 years ago - Reply 0

Hi there, after opening the large menu, can I set the mouse click event not to close the toggle when click in the air (click nothing).

Alfred Yeap () - 11 years ago - Reply 0

Use Javascript for margin left

$(document).ready(function (){
$('.dropdown-menu-large').css({'margin-left': $('#mega_drop_holder').position().left});
});

$( window ).resize(function() {
$('.dropdown-menu-large').css({'margin-left': $('#mega_drop_holder').position().left});
});

Gonzalo () - 11 years ago - Reply 0

can any one tell me,how can i get only dropdown menu,not navbar...help me plzz

sameer () - 11 years ago - Reply 0

me too

Yoza Wiratama () - 11 years ago - Reply 0

for dropdown check our this

<ul class="nav nav-tabs">
<li class="dropdown">

Dropdown


<ul class="dropdown-menu">

</ul>
</li>
</ul>

Noushad Ali () - 10 years ago - Reply 0

nice menu drop-down thanks

allyssonharry () - 11 years ago - Reply 0

Is there one that works with Bootstrap 2?

joaiwna () - 11 years ago - Reply 0

This is great, but I need this with mouse over to open sub menu. Does anyone knows how to convert it?

bojanpejanovic () - 11 years ago - Reply 0

.dropdown:hover .dropdown-menu { display: block; }

AJM () - 9 years ago - Reply 0

Great done! Is it possible to make the large menu match container size?

Darren Li () - 11 years ago - Reply 0

Does anyone have an example page with menus on the left and right and of different sizes? If I remove columns from the menu the positioning is wrong.

Mike Stoddart () - 11 years ago - Reply 0

Thanks alot!

Alex () - 11 years ago - Reply 0

Great !!!

บัณฑิต แสนคำภา () - 11 years ago - Reply 0

This is awesome! Thanks!

Mijo Džalto () - 11 years ago - Reply 0

Great solution, what i really needed, but i really wish it adopts the location acroding to the navbar possition.

Yoosuf () - 11 years ago - Reply 0

Set .dropdown-menu{left:inherit}

Shageevan Sachithanandan () - 11 years ago - Reply 0