"Large Dropdown Menu"
Bootstrap 3.0.0 Snippet by sinasafaei

<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> <li class="col-sm-3"> <ul> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="dropdown-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">Fixed to top</a></li> <li><a href="#">Fixed to bottom</a></li> <li><a href="#">Static top</a></li> <li><a href="#">Inverted navbar</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav>
.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 { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0 ; margin-right: 0 ; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } }

Related: See More


Questions / Comments:

Hello I have doubt how to add hover effect, when we hover a navbar dropdown menu.

SRI BALAJI R () - 7 years ago - Reply 0


me too

Guest () - 8 years ago - Reply 0


hello i don't know why it dosn't work for me i add the style and i add html and already i have bootstrap added (last version)

Brahim Moullablad () - 9 years ago - Reply 0


try to past this

<script src="//code.jquery.com/jquery-1.11..."></script>

<script src="//netdna.bootstrapcdn.com/boo..."></script>

<script src="http://bootsnipp.com/dist/s..."></script>

<script src="http://d1n0x3qji82z53.cloud..."></script>

<script type="text/javascript">

(function($) {

window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt)

{

if (evt.origin !== 'http://bootsnipp.com') return;

if ((evt.data != undefined) && (evt.data) && (typeof evt.data === "number"))

if(evt.data >= 500) {

$('#playground-container').css('height', evt.data+30+'px');

}

}

var htmleditor = ace.edit("editor-html");

var jseditor = ace.edit("editor-js");

var csseditor = ace.edit("editor-css");

$('#theme_chooser').change(function(){

whichCSS = $(this).val();

document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS);

});

function setEditorOptions(editor, type){

editor.setTheme("ace/theme/clouds");

editor.setHighlightActiveLine(false);

editor.setReadOnly(true);

editor.getSession().setMode("ace/mode/"+type);

};

setEditorOptions(htmleditor,'html');

setEditorOptions(jseditor,'javascript');

setEditorOptions(csseditor,'css');

function markActive(el)

{

$(el).siblings().removeClass('active');

$(el).addClass('active');

}

$('#show-html').click(function(e){

e.preventDefault();

$('#editor-html').show().siblings().hide();

markActive(this);

$('#preview-container').hide();

htmleditor.resize();

});

$('#show-js').click(function(e){

e.preventDefault();

$('#editor-js').show().siblings().hide();

$('#preview-container').hide();

markActive(this);

jseditor.resize();

});

$('#show-css').click(function(e){

e.preventDefault();

$('#editor-css').show().siblings().hide();

$('#preview-container').hide();

markActive(this);

csseditor.resize();

});

$('#show-preview').click(function(e){

e.preventDefault();

$('#preview-container').show();

$('.playground-editor').hide();

markActive(this);

});

})(jQuery);

</script>

<script type="text/javascript" src="http://cdn.buysellads.com/a..."></script>

Moataz () - 8 years ago - Reply 0


like me

Moataz () - 8 years ago - Reply 0