File: /home/imensosw/www/imenso.co/demo/zuruuna/administrator/layout-horizontal-megamenu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Avenger Admin Theme</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="description" content="Avenger Admin Theme">
<meta name="author" content="KaijuThemes">
<link href='http://fonts.googleapis.com/css?family=RobotoDraft:300,400,400italic,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 10]>
<script type="text/javascript" src="assets/js/media.match.min.js"></script>
<script type="text/javascript" src="assets/js/placeholder.min.js"></script>
<![endif]-->
<link type="text/css" href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- Font Awesome -->
<link type="text/css" href="assets/css/styles.css" rel="stylesheet"> <!-- Core CSS with all styles -->
<link type="text/css" href="assets/plugins/jstree/dist/themes/avenger/style.min.css" rel="stylesheet"> <!-- jsTree -->
<link type="text/css" href="assets/plugins/codeprettifier/prettify.css" rel="stylesheet"> <!-- Code Prettifier -->
<link type="text/css" href="assets/plugins/iCheck/skins/minimal/blue.css" rel="stylesheet"> <!-- iCheck -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries. Placeholdr.js enables the placeholder attribute -->
<!--[if lt IE 9]>
<link type="text/css" href="assets/css/ie8.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<script type="text/javascript" src="assets/plugins/charts-flot/excanvas.min.js"></script>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- The following CSS are included as plugins and can be removed if unused-->
</head>
<body class="infobar-offcanvas horizontal-nav">
<div id="wrapper">
<header id="topnav" class="navbar navbar-midnightblue navbar-fixed-top clearfix" role="banner">
<span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg">
<a data-toggle="tooltips" data-placement="right" title="Toggle Sidebar"><span class="icon-bg"><i class="fa fa-fw fa-bars"></i></span></a>
</span>
<a class="navbar-brand" href="index.php">Avenger</a>
<span id="trigger-infobar" class="toolbar-trigger toolbar-icon-bg">
<a data-toggle="tooltips" data-placement="left" title="Toggle Infobar"><span class="icon-bg"><i class="fa fa-fw fa-bars"></i></span></a>
</span>
<div class="yamm navbar-left navbar-collapse collapse in">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu<span class="caret"></span></a>
<ul class="dropdown-menu" style="width: 900px;">
<li>
<div class="yamm-content container-sm-height">
<div class="row row-sm-height yamm-col-bordered">
<div class="col-sm-3 col-sm-height yamm-col">
<h3 class="yamm-category">Sidebar</h3>
<ul class="list-unstyled mb20">
<li><a href="layout-fixed-sidebars.html">Stretch Sidebars</a></li>
<li><a href="layout-sidebar-scroll.html">Scroll Sidebar</a></li>
<li><a href="layout-static-leftbar.html">Static Sidebar</a></li>
<li><a href="layout-leftbar-widgets.html">Sidebar Widgets</a></li>
</ul>
<h3 class="yamm-category">Infobar</h3>
<ul class="list-unstyled">
<li><a href="layout-infobar-offcanvas.html">Offcanvas Infobar</a></li>
<li><a href="layout-infobar-overlay.html">Overlay Infobar</a></li>
<li><a href="layout-chatbar-overlay.html">Chatbar</a></li>
<li><a href="layout-rightbar-widgets.html">Infobar Widgets</a></li>
</ul>
</div>
<div class="col-sm-3 col-sm-height yamm-col">
<h3 class="yamm-category">Page Content</h3>
<ul class="list-unstyled mb20">
<li><a href="layout-breadcrumb-top.html">Breadcrumbs on Top</a></li>
<li><a href="layout-page-tabs.html">Page Tabs</a></li>
<li><a href="layout-fullheight-panel.html">Full-Height Panel</a></li>
<li><a href="layout-fullheight-content.html">Full-Height Content</a></li>
</ul>
<h3 class="yamm-category">Misc</h3>
<ul class="list-unstyled">
<li><a href="layout-topnav-options.html">Topnav Options</a></li>
<li><a href="layout-horizontal-small.html">Horizontal Small</a></li>
<li><a href="layout-horizontal-large.html">Horizontal Large</a></li>
<li><a href="layout-boxed.html">Boxed</a></li>
</ul>
</div>
<div class="col-sm-3 col-sm-height yamm-col">
<h3 class="yamm-category">Analytics</h3>
<ul class="list-unstyled mb20">
<li><a href="charts-flot.html">Flot</a></li>
<li><a href="charts-sparklines.html">Sparklines</a></li>
<li><a href="charts-morris.html">Morris</a></li>
<li><a href="charts-easypiechart.html">Easy Pie Charts</a></li>
</ul>
<h3 class="yamm-category">Components</h3>
<ul class="list-unstyled">
<li><a href="ui-tiles.html">Tiles</a></li>
<li><a href="custom-knob.html">jQuery Knob</a></li>
<li><a href="custom-jqueryui.html">jQuery Slider</a></li>
<li><a href="custom-ionrange.html">Ion Range Slider</a></li>
</ul>
</div>
<div class="col-sm-3 col-sm-height yamm-col">
<h3 class="yamm-category">Rem</h3>
<img src="http://placehold.it/300&text=Placeholder" class="mb20 img-responsive" style="width: 100%;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown" id="widget-classicmenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav toolbar pull-right">
<li class="dropdown toolbar-icon-bg">
<a href="#" id="navbar-links-toggle" data-toggle="collapse" data-target="header>.navbar-collapse">
<span class="icon-bg">
<i class="fa fa-fw fa-ellipsis-h"></i>
</span>
</a>
</li>
<li class="dropdown toolbar-icon-bg demo-search-hidden">
<a href="#" class="dropdown-toggle tooltips" data-toggle="dropdown"><span class="icon-bg"><i class="fa fa-fw fa-search"></i></span></a>
<div class="dropdown-menu dropdown-alternate arrow search dropdown-menu-form">
<div class="dd-header">
<span>Search</span>
<span><a href="#">Advanced search</a></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="">
<span class="input-group-btn">
<a class="btn btn-primary" href="#">Search</a>
</span>
</div>
</div>
</li>
<li class="toolbar-icon-bg demo-headerdrop-hidden">
<a href="#" id="headerbardropdown"><span class="icon-bg"><i class="fa fa-fw fa-level-down"></i></span></i></a>
</li>
<li class="toolbar-icon-bg hidden-xs" id="trigger-fullscreen">
<a href="#" class="toggle-fullscreen"><span class="icon-bg"><i class="fa fa-fw fa-arrows-alt"></i></span></i></a>
</li>
<li class="dropdown toolbar-icon-bg">
<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-bell"></i></span><span class="badge badge-info">5</span></a>
<div class="dropdown-menu dropdown-alternate notifications arrow">
<div class="dd-header">
<span>Notifications</span>
<span><a href="#">Settings</a></span>
</div>
<div class="scrollthis scroll-pane">
<ul class="scroll-content">
<li class="">
<a href="#" class="notification-info">
<div class="notification-icon"><i class="fa fa-user fa-fw"></i></div>
<div class="notification-content">Profile Page has been updated</div>
<div class="notification-time">2m</div>
</a>
</li>
<li class="">
<a href="#" class="notification-success">
<div class="notification-icon"><i class="fa fa-check fa-fw"></i></div>
<div class="notification-content">Updates pushed successfully</div>
<div class="notification-time">12m</div>
</a>
</li>
<li class="">
<a href="#" class="notification-primary">
<div class="notification-icon"><i class="fa fa-users fa-fw"></i></div>
<div class="notification-content">New users request to join</div>
<div class="notification-time">35m</div>
</a>
</li>
<li class="">
<a href="#" class="notification-danger">
<div class="notification-icon"><i class="fa fa-shopping-cart fa-fw"></i></div>
<div class="notification-content">More orders are pending</div>
<div class="notification-time">11h</div>
</a>
</li>
<li class="">
<a href="#" class="notification-primary">
<div class="notification-icon"><i class="fa fa-arrow-up fa-fw"></i></div>
<div class="notification-content">Pending Membership approval</div>
<div class="notification-time">2d</div>
</a>
</li>
<li class="">
<a href="#" class="notification-info">
<div class="notification-icon"><i class="fa fa-check fa-fw"></i></div>
<div class="notification-content">Succesfully updated to version 1.0.1</div>
<div class="notification-time">40m</div>
</a>
</li>
</ul>
</div>
<div class="dd-footer">
<a href="#">View all notifications</a>
</div>
</div>
</li>
<li class="dropdown toolbar-icon-bg hidden-xs">
<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-envelope"></i></span></a>
<div class="dropdown-menu dropdown-alternate messages arrow">
<div class="dd-header">
<span>Messages</span>
<span><a href="#">Settings</a></span>
</div>
<div class="scrollthis scroll-pane">
<ul class="scroll-content">
<li class="">
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_09.png" alt="avatar" />
<div class="msg-content">
<span class="name">Steven Shipe</span>
<span class="msg">Nonummy nibh epismod lorem ipsum</span>
</div>
<span class="msg-time">30s</span>
</a>
</li>
<li>
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_01.png" alt="avatar" />
<div class="msg-content">
<span class="name">Roxann Hollingworth <i class="fa fa-paperclip attachment"></i></span>
<span class="msg">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
</div>
<span class="msg-time">5m</span>
</a>
</li>
<li>
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_05.png" alt="avatar" />
<div class="msg-content">
<span class="name">Diamond Harlands</span>
<span class="msg">:)</span>
</div>
<span class="msg-time">3h</span>
</a>
</li>
<li>
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_02.png" alt="avatar" />
<div class="msg-content">
<span class="name">Michael Serio <i class="fa fa-paperclip attachment"></i></span>
<span class="msg">Sed distinctio dolores fuga molestiae modi?</span>
</div>
<span class="msg-time">12h</span>
</a>
</li>
<li>
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_03.png" alt="avatar" />
<div class="msg-content">
<span class="name">Matt Jones</span>
<span class="msg">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et mole</span>
</div>
<span class="msg-time">2d</span>
</a>
</li>
<li>
<a href="#">
<img class="msg-avatar" src="assets/demo/avatar/avatar_07.png" alt="avatar" />
<div class="msg-content">
<span class="name">John Doe</span>
<span class="msg">Neque porro quisquam est qui dolorem</span>
</div>
<span class="msg-time">7d</span>
</a>
</li>
</ul>
</div>
<div class="dd-footer"><a href="#">View all messages</a></div>
</div>
</li>
<li class="dropdown toolbar-icon-bg">
<a href="#" class="dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-user"></i></span></a>
<ul class="dropdown-menu userinfo arrow">
<li><a href="#"><span class="pull-left">Profile</span> <span class="badge badge-info">80%</span></a></li>
<li><a href="#"><span class="pull-left">Account</span> <i class="pull-right fa fa-user"></i></a></li>
<li><a href="#"><span class="pull-left">Settings</span> <i class="pull-right fa fa-cog"></i></a></li>
<li class="divider"></li>
<li><a href="#"><span class="pull-left">Earnings</span> <i class="pull-right fa fa-line-chart"></i></a></li>
<li><a href="#"><span class="pull-left">Statement</span> <i class="pull-right fa fa-list-alt"></i></a></li>
<li><a href="#"><span class="pull-left">Withdrawals</span> <i class="pull-right fa fa-dollar"></i></a></li>
<li class="divider"></li>
<li><a href="#"><span class="pull-left">Sign Out</span> <i class="pull-right fa fa-sign-out"></i></a></li>
</ul>
</li>
</ul>
</header>
<div class="static-content">
<div class="page-content">
<div class="page-heading">
<h1>Horizontal Megamenu with Sidebar Tools</h1>
<div class="options">
<div class="btn-toolbar">
<a href="#" class="btn btn-default"><i class="fa fa-fw fa-wrench"></i></a>
</div>
</div>
</div>
<ol class="breadcrumb">
<li><a href="index.php">Home</a></li>
<li><a href="#">Layout</a></li>
<li class="active"><a href="layout-horizontal-megamenu.html">Horizontal Megamenu with Sidebar Tools</a></li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="alert alert-info"><p>Avenger comes built-in with a lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.</p></div>
<div class="panel panel-info">
<div class="panel-heading"><h2>Fixed width menu with Navbar Default style</h2></div>
<div class="panel-body">
<nav class="navbar navbar-default mb20" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Navbar</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="yamm collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Accordion <b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 900px;">
<li>
<div class="yamm-content container-sm-height">
<div class="row row-sm-height yamm-col-bordered">
<div class="col-sm-3 col-sm-height yamm-col">
<h6>
<span class="yamm-category">Variations</span>
</h6>
<ul class="list-unstyled">
<li><a href="layout-fixed-sidebars">Fixed Sidebars</a></li>
<li><a href="layout-infobar-offcanvas">Offcanvas Infobar</a></li>
<li><a href="layout-infobar-overlay">Overlay Infobar</a></li>
<li><a href="layout-sidebar-scroll">Scroll Sidebar</a></li>
<li><a href="layout-boxed">Boxed</a></li>
<li><a href="layout-chatbar-overlay">Chatbar</a></li>
<li><a href="layout-compact">Compact</a></li>
</ul>
</div>
<div class="col-sm-3 col-sm-height yamm-col">
<h6>
<span class="yamm-category">Variations</span>
</h6>
<ul class="list-unstyled">
<li><a href="layout-fixed-sidebars">Fixed Sidebars</a></li>
<li><a href="layout-infobar-offcanvas">Offcanvas Infobar</a></li>
<li><a href="layout-infobar-overlay">Overlay Infobar</a></li>
<li><a href="layout-sidebar-scroll">Scroll Sidebar</a></li>
<li><a href="layout-boxed">Boxed</a></li>
<li><a href="layout-chatbar-overlay">Chatbar</a></li>
<li><a href="layout-compact">Compact</a></li>
</ul>
</div>
<div class="col-sm-6 col-sm-height yamm-col">
<div class="accordion-group" id="accordionB">
<div class="panel accordion-item">
<a class="accordion-title" data-toggle="collapse" data-parent="#accordionB" href="#collapseaOne"><h2>Collapsible Group Item #1</h2></a>
<div id="collapseaOne" class="collapse in">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
<div class="panel accordion-item">
<a class="accordion-title" data-toggle="collapse" data-parent="#accordionB" href="#collapseaTwo"><h2>Collapsible Group Item #2</h2></a>
<div id="collapseaTwo" class="collapse">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
<div class="panel accordion-item">
<a class="accordion-title" data-toggle="collapse" data-parent="#accordionB" href="#collapseaThree"><h2>Collapsible Group Item #3</h2></a>
<div id="collapseaThree" class="collapse">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 900px">
<li>
<div class="yamm-content">
<div class="container">
<div class="row">
<div class="col-sm-4 yamm-col">
<h6><span class="yamm-category">From the Blog</span></h6>
<style>
.from-the-blog {padding-left: 0;}
.from-the-blog a {background: none; padding: 0 !important;}
.from-the-blog li {margin: 0 0 10px 0 !important;}
.from-the-blog img {height: 60px;}
.from-the-blog .tabular-cell:first-child {width: 100px;padding-right: 10px;}
</style>
<ul class="list-unstlyed from-the-blog">
<li class="tabular">
<a href="#" class="tabular-row">
<div class="tabular-cell">
<img src="http://placehold.it/300&text=Placeholder" alt="">
</div>
<h6 class="tabular-cell">How does quartz in a clock keep time?</h6>
</a>
</li>
<li class="tabular">
<a href="#" class="tabular-row">
<div class="tabular-cell">
<img src="http://placehold.it/300&text=Placeholder" alt="">
</div>
<h6 class="tabular-cell">How would you prevent and fight DDoS Attack?</h6>
</a>
</li>
<li class="tabular">
<a href="#" class="tabular-row">
<div class="tabular-cell">
<img src="http://placehold.it/300&text=Placeholder" alt="">
</div>
<h6 class="tabular-cell">Is the center of a rotating circle at rest?</h6>
</a>
</li>
<li class="tabular">
<a href="#" class="tabular-row">
<div class="tabular-cell">
<img src="http://placehold.it/300&text=Placeholder" alt="">
</div>
<h6 class="tabular-cell">Is the center of a rotating circle at rest?</h6>
</a>
</li>
</ul>
</div>
<div class="col-sm-4 yamm-col">
<div id="basic-map" style="height: 312px !important; width: 273px !important"></div>
</div>
<div class="col-sm-4 yamm-col">
<form action="#">
<div class="form-group mb10">
<label class="mb5">Name <small>(required)</small></label>
<input type="text" class="form-control input-sm" placeholder="">
</div>
<div class="form-group mb10">
<label class="mb5">Email Address <small>(required)</small></label>
<input type="text" class="form-control input-sm" placeholder="">
</div>
<div class="form-group mb10">
<label class="mb5">Message</label>
<textarea class="form-control" rows="5">This form is for demonstration purposes only</textarea>
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tables <b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 900px">
<div class="yamm-content">
<div class="yamm-col">
<table class="table table-striped mb0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Classic Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="row">
<div class="col-md-4">
<h4>Markup</h4>
<ul>
<li>Reuse navbar markup and add class <code>.yamm</code> at the top.</li>
<li>Then add your markup into the <code>.dropdown-menu</code></li>
<li>Optionally, use .<code>yamm-content</code> to wrap content with padding.</li>
<li>Optionally, add a fixed width to <code>ul.dropdown-menu</code> using <code>style</code></li>
</ul>
</div>
<div class="col-md-8">
<pre class="prettyprint">
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
...
</div>
</div>
</li>
</ul>
</li>
</ul>
...
</nav>
</pre>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h2>Full width menu with Navbar Inverse style</h2></div>
<div class="panel-body">
<nav class="navbar navbar-inverse mb20" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Navbar</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="yamm collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Grid <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="show-grid">
<div class="yamm-content">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown yamm-fw">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Offset <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="show-grid">
<div class="yamm-content">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown yamm-fw">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Aside <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="show-grid">
<div class="yamm-content">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nesting<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="show-grid">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="row">
<div class="col-md-3">
<h3>Width</h3>
<p>By default every mega-dropdown will take the content size so is possible to use add .yamm-fw to .dropdown to expand it fullwidth</p>
<p>Yamm works better with fullwidth menus.</p>
</div>
<div class="col-md-9">
<pre class="prettyprint">
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
...
</li>
</ul>
...
</nav>
</pre>
</div>
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, asperiores, minima nostrum non ratione quibusdam minus facere neque sit quos quidem dolore deserunt officia harum iusto reprehenderit nesciunt totam nulla? Fugit excepturi veniam quos iste sint ad ipsum natus deleniti perferendis voluptatem. Harum, natus consequuntur dolorum quae repudiandae necessitatibus ducimus molestiae cumque. Explicabo, cumque, eveniet, expedita iure earum reprehenderit vel non doloremque repellat sunt minima eum reiciendis quia quaerat fuga similique provident incidunt accusantium voluptatem ex. Quaerat, laboriosam, doloremque, ipsum, voluptas soluta dolores ea tempora voluptatibus minus reprehenderit laborum vitae dolorum eos blanditiis nulla itaque atque. Explicabo, iure veritatis id.</p>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
</div>
<footer role="contentinfo">
<div class="clearfix">
<ul class="list-unstyled list-inline pull-left">
<li><h6 style="margin: 0;"> © 2015 Avenger</h6></li>
</ul>
<button class="pull-right btn btn-link btn-xs hidden-print" id="back-to-top"><i class="fa fa-arrow-up"></i></button>
</div>
</footer>
<div class="infobar-wrapper scroll-pane">
<div class="infobar scroll-content">
<div id="widgetarea">
<div class="widget" id="widget-sparkline">
<div class="widget-heading">
<a href="javascript:;" data-toggle="collapse" data-target="#sparklinestats"><h4>Sparkline Stats</h4></a>
</div>
<div id="sparklinestats" class="collapse in">
<div class="widget-body">
<ul class="sparklinestats">
<li>
<div class="title">Earnings</div>
<div class="stats">$22,500</div>
<div class="sparkline" id="infobar-earningsstats" style="100%"></div>
</li>
<li>
<div class="title">Orders</div>
<div class="stats">4,750</div>
<div class="sparkline" id="infobar-orderstats" style="100%"></div>
</li>
</ul>
<a href="#" class="more">More Sparklines</a>
</div>
</div>
</div>
<div class="widget">
<div class="widget-heading">
<a href="javascript:;" data-toggle="collapse" data-target="#recentactivity"><h4>Recent Activity</h4></a>
</div>
<div id="recentactivity" class="collapse in">
<div class="widget-body">
<ul class="recent-activities">
<li>
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<div class="content">
<span class="msg"><a href="#" class="person">Jean Alanis</a> invited 3 unconfirmed members</span>
<span class="time">2 mins ago</span>
</div>
</li>
<li>
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<div class="content">
<span class="msg"><a href="#" class="person">Anthony Ware</a> is now following you</span>
<span class="time">4 hours ago</span>
</div>
</li>
<li>
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<div class="content">
<span class="msg"><a href="#" class="person">Bruce Ory</a> commented on <a href="#">Dashboard UI</a></span>
<span class="time">16 hours ago</span>
</div>
</li>
<li>
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<div class="content">
<span class="msg"><a href="#" class="person">Roxann Hollingworth</a>is now following you</span>
<span class="time">Feb 13, 2015</span>
</div>
</li>
</ul>
<a href="#" class="more">See all activities</a>
</div>
</div>
</div>
<div class="widget" >
<div class="widget-heading">
<a href="javascript:;" data-toggle="collapse" data-target="#widget-milestones"><h4>Milestones</h4></a>
</div>
<div id="widget-milestones" class="collapse in">
<div class="widget-body">
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">UI Design</div>
<div class="progress-percentage">12/16</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-lime" style="width: 75%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">UX Design</div>
<div class="progress-percentage">8/24</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-orange" style="width: 33.3%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Frontend Development</div>
<div class="progress-percentage">8/40</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-purple" style="width: 20%"></div>
</div>
</div>
<div class="contextual-progress m0">
<div class="clearfix">
<div class="progress-title">Backend Development</div>
<div class="progress-percentage">24/48</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 50%"></div>
</div>
</div>
<a href="#" class="more">See All</a>
</div>
</div>
</div>
<div class="widget">
<div class="widget-heading">
<a href="javascript:;" data-toggle="collapse" data-target="#widget-contact"><h4>Contacts</h4></a>
</div>
<div id="widget-contact" class="collapse in">
<div class="widget-body">
<ul class="contact-list">
<li id="contact-1">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>Jeremy Potter</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-1">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">Jeremy Potter</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
<li id="contact-2">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>David Tennant</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-2">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">David Tennant</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
<li id="contact-3">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>Anna Johansson</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-3">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">Anna Johansson</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
<li id="contact-4">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>Alan Doyle</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-4">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">Alan Doyle</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
<li id="contact-5">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>Simon Corbett</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-5">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">Simon Corbett</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
<li id="contact-6">
<a href="javascript:;"><img src="http://placehold.it/300&text=Placeholder" alt=""><span>Polly Paton</span></a>
<!-- <div class="contact-card contactdetails" data-child-of="contact-6">
<div class="avatar">
<img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle">
</div>
<span class="contact-name">Polly Paton</span>
<span class="contact-status">Client Representative</span>
<ul class="details">
<li><a href="#"><i class="fa fa-envelope-o"></i> p.bateman@gmail.com</a></li>
<li><i class="fa fa-phone"></i> +1 234 567 890</li>
<li><i class="fa fa-map-marker"></i> Hollywood Hills, California</li>
</ul>
</div> -->
</li>
</ul>
<a href="#" class="more">See All</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load site level scripts -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script> <!-- Load jQuery -->
<script type="text/javascript" src="assets/js/jqueryui-1.9.2.min.js"></script> <!-- Load jQueryUI -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <!-- Load Bootstrap -->
<script type="text/javascript" src="assets/plugins/easypiechart/jquery.easypiechart.js"></script> <!-- EasyPieChart-->
<script type="text/javascript" src="assets/plugins/sparklines/jquery.sparklines.min.js"></script> <!-- Sparkline -->
<script type="text/javascript" src="assets/plugins/jstree/dist/jstree.min.js"></script> <!-- jsTree -->
<script type="text/javascript" src="assets/plugins/codeprettifier/prettify.js"></script> <!-- Code Prettifier -->
<script type="text/javascript" src="assets/plugins/bootstrap-switch/bootstrap-switch.js"></script> <!-- Swith/Toggle Button -->
<script type="text/javascript" src="assets/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js"></script> <!-- Bootstrap Tabdrop -->
<script type="text/javascript" src="assets/plugins/iCheck/icheck.min.js"></script> <!-- iCheck -->
<script type="text/javascript" src="assets/js/enquire.min.js"></script> <!-- Enquire for Responsiveness -->
<script type="text/javascript" src="assets/plugins/bootbox/bootbox.js"></script> <!-- Bootbox -->
<script type="text/javascript" src="assets/plugins/simpleWeather/jquery.simpleWeather.min.js"></script> <!-- Weather plugin-->
<script type="text/javascript" src="assets/plugins/nanoScroller/js/jquery.nanoscroller.min.js"></script> <!-- nano scroller -->
<script type="text/javascript" src="assets/plugins/jquery-mousewheel/jquery.mousewheel.min.js"></script> <!-- Mousewheel support needed for jScrollPane -->
<script type="text/javascript" src="assets/js/application.js"></script>
<script type="text/javascript" src="assets/demo/demo.js"></script>
<script type="text/javascript" src="assets/demo/demo-switcher.js"></script>
<!-- End loading site level scripts -->
<!-- Load page level scripts-->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmaps/gmaps.js"></script>
<script>
$(document).ready(function () {
map = new GMaps({
div: '#basic-map',
lat: -12.043333,
lng: -77.028333
});
map.addMarker({
lat: -12.042,
lng: -77.028333,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>HTML Content</p>'
}
});
});
</script>
<!-- End loading page level scripts-->
</body>
</html>