<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<header class="menu-container">
<div class="container">
<nav class="row">
<ul class="megamenu">
<li data-hover="mega" class="top-level"><a href="#">About <span class="caret"></span></i></a>
<div class="mega">
<div class="inner">
<div class="col-xs-12 parent">
<div class="row">
<div class="col-sm-3">
<a href="#" class="sub-parent">Wright State Applied Research Corporation</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Board of Directors</a></li>
<li><a href="#">OFRN</a></li>
<li><a href="#">Reports & Documents</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Wright State University</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Visit Website</a></li>
<li><a href="#">RSP</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Working with Our Researchers and Faculty</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Partnering with our Researchers</a></li>
<li><a href="#">Partnering with our Faculty</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Our Leadership</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-hover="mega" class="top-level"><a href="#">Research Focus Areas <span class="caret"></span></a>
<div class="mega">
<div class="inner">
<div class="col-xs-12 parent">
<div class="row">
<div class="col-sm-3">
<a href="#" class="sub-parent">Human Performance</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Publications & Resources</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Live Virtual Constructive</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Publications & Resources</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Autonomy & Human Machine Interface</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Publications & Resources</a></li>
</ul>
</div>
<div class="col-sm-3">
<a href="#" class="sub-parent">Cognitive & Social Sciences</a>
<ul class="sub-menu">
<li><a href="#">Publications & Resources</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-hover="mega" class="top-level"><a href="#">Programs and Facilities <span class="caret"></span></a>
<div class="mega">
<div class="inner">
<div class="col-xs-12 parent">
<div class="row">
<div class="col-sm-6">
<a href="#" class="sub-parent">Training and Education Programs</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Cyber Analyst & Intelligence Analyst Training</a></li>
<li><a href="#">Analyst Boot Camp</a></li>
<li><a href="#">Cyber Analysis Data Security</a></li>
<li><a href="#">Experiential Training</a></li>
</ul>
</div>
<div class="col-sm-6">
<a href="#" class="sub-parent">National Center for Medical Readiness
</a>
<hr>
<ul class="sub-menu">
<li><a href="#">History</a></li>
<li><a href="#">Training & People</a></li>
<li><a href="#">Tech Warrior</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-hover="mega" class="top-level"><a href="#">Working With Us <span class="caret"></span></a>
<div class="mega">
<div class="inner">
<div class="col-xs-12 parent">
<div class="row">
<div class="col-sm-6">
<a href="javascript:void(0);" class="sub-parent">WSARC Links</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-sm-6">
<a href="javascript:void(0);" class="sub-parent">RSP Links</a>
<hr>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<form class="searchbox">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</nav>
</div>
</header>
<script>
jQuery(document).ready(function ($) {
var menu = $('.megamenu').megaMenu();
console.log(menu.data());
});
</script>
.menu-container{
background-color: #186c53;
border-color: #fff;
}
.menu-container .row{
position:relative;
}
.mega{
background: #47ad73;
display: none;
text-align: left;
width:100%;
top: 48px;
padding:10px;
position: absolute;
box-shadow: 2px 1px 5px 0px rgba(0,0,0,0.23);
}
ul.megamenu{
margin: 0 auto;
list-style: none;
position: relative;
z-index: 999;
padding:0;
}
ul.megamenu li{
display:inline;
font-family: 'Roboto', sans-serif;
font-size:13px;
font-weight:100;
}
ul.megamenu li a{
color:white;
text-decoration:none;
padding:15px;
display: inline-block;
}
ul.megamenu li a:hover{
background-color:#47ad73;
}
.parent a{
padding:0 !important;
}
.parent hr{
margin: 11px 0;
}
.parent ul.sub-menu{
margin: 0;
list-style: none;
padding: 0;
}
.parent ul.sub-menu li{
padding:0 0 5px;
display:block;
}
.sub-parent{
font-weight:bold;
}
/*Search Box*/
.searchbox{
position:absolute;
width:170px;
right:0;
top:5px;
z-index:999;
}
.stylish-input-group .input-group-addon{
background: #044E3C !important;
border:0;
}
.stylish-input-group .form-control{
border:0;
box-shadow:0 0 0;
background: #044E3C;
color:white;
}
.stylish-input-group button{
border:0;
background:transparent;
color:rgba(255, 255, 255, 0.5);
}
;(function ( $, window, document, undefined ) {
var
pluginName = "megaMenu",
defaults = {
offsetLeft: 0, // A negative left margin
interval: 100,
sensitivity: 4,
timeout: 400
};
function MegaMenu (element, options) {
this.element = element;
this.obj = $(this.element);
this.options = $.extend( {}, defaults, options );
this.defaults = defaults;
this.name = pluginName;
init.apply(this);
}
/*******************
Private methods
There is simply no need to expose these
*/
var init = function() {
setElements.apply(this);
start.apply(this);
}
var setElements = function() {
this.topLevelItems = $(">li", this.obj);
this.megaMenues = $(".mega", this.obj);
}
var setEvents = function() {
var $this = this;
}
var start = function() {
var $this = this;
this.topLevelItems.each(function(){
var obj = $(this);
if(obj.data('hover')) {
$this.applyHoverIntent(obj)
}
})
}
/*******************
Public Methods
*/
MegaMenu.prototype.applyHoverIntent = function(obj)
{
var
$this = this,
menu = obj.find('.'+obj.data('hover'))
obj.hoverIntent({
interval: this.options.interval,
sensitivity: this.options.sensitivity,
timeout: this.options.timeout,
over: function(){
$this.show(obj, menu)
},
out: function(){
$this.hide(obj, menu)
}
});
}
MegaMenu.prototype.show = function(obj, menu)
{
obj.addClass("is-active");
menu.slideDown({
opacity: 1
}, 250, function() {
//
}).css({
'display': 'block'
});
}
MegaMenu.prototype.hide = function(obj, menu)
{
obj.removeClass("is-active");
menu.slideUp({
opacity: 0
}, 250, function() {
$(this).css({display: 'none'})
});
}
MegaMenu.prototype.menuPosition = function(obj, menu)
{
var
pos = obj.position(),
overWidth = pos.left+menu.width(),
bodyWidth = $('body').width();
return (this.options.offsetLeft + (overWidth > bodyWidth ? overWidth - bodyWidth : 0))
}
/**************
Constructor
*/
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new MegaMenu(this, options));
}
});
};
})(jQuery, window, document);
/*!
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*
* You may use hoverIntent under the terms of the MIT license.
* Copyright 2007, 2013 Brian Cherne
*/
(function(e){e.fn.hoverIntent=function(t,n,r){var i={interval:100,sensitivity:7,timeout:0};if(typeof t==="object"){i=e.extend(i,t)}else if(e.isFunction(n)){i=e.extend(i,{over:t,out:n,selector:r})}else{i=e.extend(i,{over:t,out:t,selector:n})}var s,o,u,a;var f=function(e){s=e.pageX;o=e.pageY};var l=function(t,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);if(Math.abs(u-s)+Math.abs(a-o)<i.sensitivity){e(n).off("mousemove.hoverIntent",f);n.hoverIntent_s=1;return i.over.apply(n,[t])}else{u=s;a=o;n.hoverIntent_t=setTimeout(function(){l(t,n)},i.interval)}};var c=function(e,t){t.hoverIntent_t=clearTimeout(t.hoverIntent_t);t.hoverIntent_s=0;return i.out.apply(t,[e])};var h=function(t){var n=jQuery.extend({},t);var r=this;if(r.hoverIntent_t){r.hoverIntent_t=clearTimeout(r.hoverIntent_t)}if(t.type=="mouseenter"){u=n.pageX;a=n.pageY;e(r).on("mousemove.hoverIntent",f);if(r.hoverIntent_s!=1){r.hoverIntent_t=setTimeout(function(){l(n,r)},i.interval)}}else{e(r).off("mousemove.hoverIntent",f);if(r.hoverIntent_s==1){r.hoverIntent_t=setTimeout(function(){c(n,r)},i.timeout)}}};return this.on({"mouseenter.hoverIntent":h,"mouseleave.hoverIntent":h},i.selector)}})(jQuery);
