Bootstrap Snippet WSRI Mega Nav using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
;(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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"WSRI Mega Nav"
Bootstrap 3.3.0 Snippet by aibrean

Related: See More

Questions / Comments:

"WSRI Mega Nav" Bootstrap 3.3.0 Snippet by aibrean

Related: See More

Questions / Comments:

"WSRI Mega Nav"
Bootstrap 3.3.0 Snippet by aibrean