Horizontal Nav - Mega Menu

Statistics Invoices Schedule
Mega menu options
Mega menu components

Mega menu is a group of custom navbar components that uses slightly modified BS dropdown markup and native styling. Basically dropdown menu may contain any component - text blocks, lists, galleries, tabs, forms, tables, accordion, panels, buttons etc. However since default dropdown menu closes itself on first click, some extra js code is needed to stop propagation. In this case dropdown toggle inside dropdown menu doesn't work by default and needs additional modifications. See the table with necessary classes and description below.

Basic components

More complex components

Example markup:

<!-- Navigation with mega menu -->
<ul class="nav navbar-nav">

	<!-- Auto width -->
	<li class="mega-menu">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Auto width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /auto width -->

	<!-- Fixed width -->
	<li class="dropdown">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Auto width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content width-300">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /fixed width -->

	<!-- Full width -->
	<li class="mega-menu mega-menu-wide">
		<a href="#" data-toggle="dropdown" class="dropdown-toggle">Full width <span class="caret"></span></a>
		<div class="dropdown-menu dropdown-content">
			<div class="dropdown-content-body">...</div>
		</div>
	</li>
	<!-- /full width -->

</ul>
<!-- /navigation with mega menu -->
Menu and content options

All mega dropdowns support additional options for menu itself and content inside - menu header, menu footer, block titles, custom colors for menu's list background and menu borders, or its components. Different types of lists support all components and options available for basic dropdown menu component, such as labels, badges, switches, icons, headers etc. Custom background colors available only for simple dropdown menu.

Example menu

Example heading markup:

<!-- Dropdown menu with heading -->
<div class="dropdown-menu dropdown-content">

	<!-- Dropdown heading -->
	<div class="dropdown-content-heading">
		<ul class="icons-list">
			<li><a href="#"><i class="icon-menu7"></i></a></li>
		</ul>
	</div>
	<!-- /dropdown heading -->

	<!-- Dropdown content -->
	<div class="dropdown-content-body">...</div>
	<!-- /dropdown content -->

</div>
<!-- /dropdown menu with heading -->

Example footer markup:

<!-- Dropdown menu with footer -->
<div class="dropdown-menu dropdown-content">

	<!-- Dropdown content -->
	<div class="dropdown-content-body">...</div>
	<!-- /dropdown content -->

	<!-- Dropdown footer -->
	<div class="dropdown-content-footer">
		<a href="#">
			See all messages <i class="icon-circle-left2"></i>
		</a>
	</div>
	<!-- /dropdown footer -->

</div>
<!-- /dropdown menu with footer -->
Mega menu grid

Mega menu component supports a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row inside mega menu dropdown.

Example menu

Example markup:

<!-- Dropdown menu grid -->
<div class="dropdown-menu dropdown-content">
	<div class="dropdown-content-body">
		<div class="row">
			<div class="col-md-3 col-sm-6">First column content</div>
			<div class="col-md-3 col-sm-6">Second column content</div>
			<div class="col-md-3 col-sm-6">Third column content</div>
			<div class="col-md-3 col-sm-6">Fourth column content</div>
		</div>
	</div>
</div>
<!-- /dropdown menu grid -->
Mega menu classes
Mega menu - responsive navbar component driven by CSS and a small piece of jquery code. This table displays custom classes for navbar mega menu needed for proper look and correct functionality.
Class Description
.dropdown-content Prevents dropdown menu from closing on click. Some of the components need additional jquery initialization such as tabs and children dropdowns
li.mega-menu This class changes dropdown menu position from absolute to static to remove dependency from parent container
li.mega-menu-wide Adds 100% width to children dropdown menu. Must be used with .mega-menu class
.dropdown-content-body Similar to .panel-body adds padding to the content. Sometimes some components don't require padding, just remove this div to get a full sized content without spacing
.menu-list Specific class for menu lists. It adds additional padding to list items and adds background color to hover and focus states
.menu-heading Headings for menu content. 2 options available: default and underlined. For underlined heading add .underlined class to the same div
.dropdown-content-heading Dropdown menu heading. Supports custom background color options and list of links. See examples below
.dropdown-content-footer Dropdown menu footer. Could be both link and group of content similar to dropdown heading. See examples below
.dropdown-content.col-* Optional column classes for %-based width of the dropdown menu. This type of dropdowns don't have fixed width and change it according to the window size
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com