Skip to content

Instantly share code, notes, and snippets.

@shawnsandy

shawnsandy/bootstrap-mega-menu.markdown

Created April 10, 2018 02:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shawnsandy/a1e1b5392ebbb4569670af2466726907 to your computer and use it in GitHub Desktop.
Save shawnsandy/a1e1b5392ebbb4569670af2466726907 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Mega Menu
Raw
bootstrap-mega-menu.markdown

Bootstrap Mega Menu

A mega menu implementation using Bootstrap (unfinished - how can the indicator be positioned on the active top-level item without the relative positioning?)

A Pen by Jon Reece on CodePen.

License.

Raw
index.html
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-mega">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Gadgets <b class="caret"></b>
</a>
<ul class="dropdown-menu mega-menu">
<li>
<div class="row-fluid">
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
</div>
<hr>
<div class="row-fluid">
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span4">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Gadgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Subcategory Three</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Widgets <b class="caret"></b>
</a>
<ul class="dropdown-menu mega-menu">
<li>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<ul class="media-list span6">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Widgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Sub Category Three with a Longer Name</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span6">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Widgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Sub Category Three with a Longer Name</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
</div>
<hr>
<div class="row-fluid">
<ul class="media-list span6">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Widgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Sub Category Three with a Longer Name</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
<ul class="media-list span6">
<li class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/70/70/" alt="" class="media-object">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#">Shiny Widgets</a></h5>
<ul class="unstyled">
<li><a href="#">Subcategory One</a></li>
<li><a href="#">Subcategory Two</a></li>
<li><a href="#">Sub Category Three with a Longer Name</a></li>
<li><a href="#">Subcategory Four</a></li>
<li><a href="#">Subcategory Five</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<h5>Featured Item</h5>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Raw
style.scss
@import "compass/css3";
body { padding: 3%; }
.nav-mega {
width: 100%;
.dropdown {
// disable relative positioning on dropdown container
// mega-menu will get left from parent .nav-mega
position: static;
}
.dropdown-menu.mega-menu {
@include box-sizing(border-box);
@include border-top-radius(0);
min-width: auto;
width: 100%;
margin-top: 0;
padding: 0;
border-color: #ccc;
> li {
//@include box-shadow(rgba(black, 0.1) 0 2px 6px inset);
padding: 20px;
}
.media-list {
.media { padding: 10px; font-size: 13px; }
.media-heading { font-size: 16px; }
//.media-object { max-width: 70px; }
}
}
}
Raw
styles
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment