Mega Menu

1.md

Mega menu user generated

B@SE CSS

Using css_class we can tell the menu to use a different style.

This menu design could work for menu 1, 2, 3 and 4 levels deep

http://devphil.neto.com.au/?nview=skeletal-mega-menu

2.html

				<div class="navbar megamenu navbar-default">
					<div class="navbar-header">
						<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle collapsed" aria-expanded="false"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Megamenu</a>
					</div>
					<div id="navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
						<ul class="nav navbar-nav">
							[%menu id:'mega_menu'%]
								[%param *level_1%]
									[%if [@css_class@] eq 'megamenu'%]
									<li class="[%if [@next_level@]%]dropdown megamenu-fw [%/if%]"><a [%if [@next_level@]%]href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" [%else%]href="[@url@]" [%/if%]>[@name@] [%if [@next_level@]%]<i class="caret"></i>[%/if%]</a>
										[%if [@next_level@]%]
										<ul class="dropdown-menu">
											<li>
												<div class="megamenu-content">
													<div class="row">[@next_level@] </div>
												</div>
											</li>
										</ul>
										[%/if%]
									[%else%]
										<li class="[%if [@next_level@]%]dropdow[%/if%]"><a [%if [@next_level@]%]href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" [%else%]href="[@url@]" [%/if%]>[@name@] [%if [@next_level@]%]<i class="caret"></i>[%/if%]</a>
											[%if [@next_level@]%]
											<ul role="menu" class="dropdown-menu">
												[@next_level@]
											</ul>
											[%/if%]
										</li>
									[%/if%]
								[%/param%]
								[%param *level_2%]
									<ul class="col-sm-2 list-unstyled">
										<li class="lv-2"><a href="[@url@]"><strong>[@name@]</strong></a></li>
										[%if [@next_level@]%][@next_level@][%/if%]
									</ul>
								[%/param%]
								[%param *level_3%]
									<li class="lv-3"><a href="[@url@]">[@name@]</a></li>
								[%if [@next_level@]%]
									<li>
										<ul>[@next_level@]</ul>
									</li>
								[%/if%]
								[%/param%]
								[%param *level_4%]
								<li class="lv-4"><a href="[@url@]">[@name@]</a></li>
								[%/param%]
							[%/menu%]
						</ul>
					</div>
				</div>

3.css

.megamenu .list-unstyled, .megamenu .list-unstyled ul {
	min-width: 120px
}
.megamenu .nav, .megamenu .collapse,
.megamenu .dropup, .megamenu .dropdown {
  position: static;
}
.megamenu .dropdown-menu {
  left: auto;
}
.megamenu .megamenu-content {
  padding: 20px 30px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
  left: 0;
  right: 0;
}
.megamenu li.lv-3 {
    padding-left: 15px;
}