"Bootstrap Mobile Responsive Mega Menu "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="header_area"> <div class="main_header_area animated"> <div class="container"> <nav id="navigation1" class="navigation"> <div class="nav-header"> <a class="nav-brand" href="#">LOGO</a> <div class="nav-toggle"></div> </div> <div class="nav-search"> <div class="nav-search-button"><i class="nav-search-icon"></i></div> <form> <div class="nav-search-inner"> <input type="search" name="search" placeholder="Search..."/> </div> </form> </div> <div class="nav-menus-wrapper"> <ul class="nav-menu align-to-right"> <li><a href="#" target="_blank">Home</a></li> <li> <a href="#">Dropdown Menu</a> <ul class="nav-dropdown"> <li> <a href="#">Menu Level 2</a> <ul class="nav-dropdown"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> <li><a href="#" target="_blank">Link 6</a></li> <li><a href="#" target="_blank">Link 7</a></li> <li><a href="#" target="_blank">Link 8</a></li> <li><a href="#" target="_blank">Link 9</a></li> <li><a href="#" target="_blank">Link 10</a></li> </ul> </li> <li> <a href="#">Menu Level 2</a> <ul class="nav-dropdown"> <li> <a href="#">Menu Level 3</a> <ul class="nav-dropdown"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> </li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> </li> <li> <a href="#">Menu Level 2</a> <ul class="nav-dropdown"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> </li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> </li> <li> <a href="#">Mega Menu</a> <div class="megamenu-panel"> <div class="megamenu-lists"> <ul class="megamenu-list list-col-4"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> <li><a href="#" target="_blank">Link 6</a></li> <li><a href="#" target="_blank">Link 7</a></li> <li><a href="#" target="_blank">Link 8</a></li> </ul> <ul class="megamenu-list list-col-4"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> <li><a href="#" target="_blank">Link 6</a></li> <li><a href="#" target="_blank">Link 7</a></li> <li><a href="#" target="_blank">Link 8</a></li> </ul> <ul class="megamenu-list list-col-4"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> <li><a href="#" target="_blank">Link 6</a></li> <li><a href="#" target="_blank">Link 7</a></li> <li><a href="#" target="_blank">Link 8</a></li> </ul> <ul class="megamenu-list list-col-4"> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> <li><a href="#" target="_blank">Link 6</a></li> <li><a href="#" target="_blank">Link 7</a></li> <li><a href="#" target="_blank">Link 8</a></li> </ul> </div> </div> </li> <li> <a href="#">Mega Menu 2</a> <div class="megamenu-panel"> <div class="megamenu-lists"> <ul class="megamenu-list list-col-4"> <li class="megamenu-list-title"><a href="#">Title Name</a></li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> <ul class="megamenu-list list-col-4"> <li class="megamenu-list-title"><a href="#">Title Name</a></li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> <ul class="megamenu-list list-col-4"> <li class="megamenu-list-title"><a href="#">Title Name</a></li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> <ul class="megamenu-list list-col-4"> <li class="megamenu-list-title"><a href="#">Title Name</a></li> <li><a href="#" target="_blank">Link 1</a></li> <li><a href="#" target="_blank">Link 2</a></li> <li><a href="#" target="_blank">Link 3</a></li> <li><a href="#" target="_blank">Link 4</a></li> <li><a href="#" target="_blank">Link 5</a></li> </ul> </div> </div> </li> </ul> </div> </nav> </div> </div> </header>
.navigation { width: 100%; height: 70px; display: table; position: relative; font-family: inherit; background-color: #fff; } .navigation * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .navigation-portrait { height: 48px; } .navigation-fixed { position: fixed; top: 0; left: 0; z-index: 19998; } .navigation-hidden { width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .align-to-right { float: right; } .nav-header { float: left; } .navigation-hidden .nav-header { display: none; } .nav-brand { line-height: 70px; padding: 0; color: #343a40; font-size: 24px; text-decoration: none !important; } .nav-brand:hover, .nav-brand:focus { color: #343a40; } .navigation-portrait .nav-brand { font-size: 18px; line-height: 48px; } .nav-logo > img { height: 48px; margin: 11px auto; padding: 0 15px; float: left; } .nav-logo:focus > img { outline: initial; } .navigation-portrait .nav-logo > img { height: 36px; margin: 6px auto 6px 15px; padding: 0; } .nav-toggle { width: 30px; height: 30px; padding: 6px 2px 0; position: absolute; top: 50%; margin-top: -14px; right: 15px; display: none; cursor: pointer; } .nav-toggle:before { content: ""; position: absolute; width: 24px; height: 2px; background-color: #343a40; border-radius: 10px; box-shadow: 0 0.5em 0 0 #343a40, 0 1em 0 0 #343a40; } .navigation-portrait .nav-toggle { display: block; } .navigation-portrait .nav-menus-wrapper { width: 320px; height: 100%; top: 0; left: -400px; position: fixed; background-color: #fff; z-index: 20000; overflow-y: auto; -webkit-overflow-scrolling: touch; transition-duration: 0.2s; transition-timing-function: ease; } .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right { left: auto; right: -400px; } .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open { left: 0; } .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open { left: auto; right: 0; } .nav-menus-wrapper-close-button { width: 30px; height: 40px; margin: 10px 7px; display: none; float: right; color: #343a40; font-size: 26px; cursor: pointer; } .navigation-portrait .nav-menus-wrapper-close-button { display: block; } .nav-menu { margin: 0; padding: 0; list-style: none; line-height: normal; font-size: 0; } .navigation-portrait .nav-menu { width: 100%; } .navigation-landscape .nav-menu.nav-menu-centered { float: none; text-align: center; } .navigation-landscape .nav-menu.nav-menu-centered > li { float: none; } .nav-menu > li { display: inline-block; float: left; text-align: left; } .navigation-portrait .nav-menu > li { width: 100%; position: relative; border-top: solid 1px #f0f0f0; } .navigation-portrait .nav-menu > li:last-child { border-bottom: solid 1px #f0f0f0; } .nav-menu + .nav-menu > li:first-child { border-top: none; } .nav-menu > li > a { height: 70px; padding: 26px 15px; display: inline-block; text-decoration: none; font-size: 14px; color: #343a40; transition: color 0.3s, background 0.3s; } .navigation-portrait .nav-menu > li > a { width: 100%; height: auto; padding: 12px 15px 12px 26px; } .nav-menu > li:hover > a, .nav-menu > li.active > a, .nav-menu > li.focus > a { color: #ff6b00; } .nav-menu > li > a > i, .nav-menu > li > a > [class*="ion-"] { width: 18px; height: 16px; line-height: 16px; transform: scale(1.4); } .nav-menu > li > a > [class*="ion-"] { width: 16px; display: inline-block; transform: scale(1.8); } .navigation-portrait .nav-menu.nav-menu-social { width: 100%; text-align: center; } .nav-menu.nav-menu-social > li { text-align: center; float: none; border: none !important; } .navigation-portrait .nav-menu.nav-menu-social > li { width: auto; } .nav-menu.nav-menu-social > li > a > [class*="ion-"] { font-size: 12px; } .nav-menu.nav-menu-social > li > a > .fa { font-size: 14px; } .navigation-portrait .nav-menu.nav-menu-social > li > a { padding: 15px; } .submenu-indicator { margin-left: 6px; margin-top: 6px; float: right; transition: all 0.2s; } .navigation-portrait .submenu-indicator { width: 54px; height: 44px; margin-top: 0; position: absolute; top: 0; right: 0; text-align: center; z-index: 20000; } .submenu-indicator-chevron { height: 6px; width: 6px; display: block; border-style: solid; border-width: 0 1px 1px 0; border-color: transparent #70798b #70798b transparent; transform: rotate(45deg); transition: border 0.2s; } .navigation-portrait .submenu-indicator-chevron { position: absolute; top: 18px; left: 24px; } .nav-menu > li:hover > a .submenu-indicator-chevron, .nav-menu > .active > a .submenu-indicator-chevron, .nav-menu > .focus > a .submenu-indicator-chevron { border-color: transparent #967adc #967adc transparent; } .navigation-portrait .submenu-indicator.submenu-indicator-up { transform: rotate(-180deg); } .nav-overlay-panel { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: none; z-index: 19999; } .no-scroll { width: 100%; height: 100%; overflow: hidden; } .nav-search { height: 70px; float: right; z-index: 19998; } .navigation-portrait .nav-search { height: 48px; padding: 0 10px; margin-right: 52px; } .navigation-hidden .nav-search { display: none; } .nav-search-button { width: 70px; height: 70px; line-height: 70px; text-align: center; cursor: pointer; background-color: #fbfcfd; } .navigation-portrait .nav-search-button { width: 50px; height: 48px; line-height: 46px; font-size: 22px; } .nav-search-icon { width: 14px; height: 14px; margin: 2px 8px 8px 4px; display: inline-block; vertical-align: middle; position: relative; color: #343a40; text-align: left; text-indent: -9999px; border: 2px solid; border-radius: 50%; transform: rotate(-45deg); } .nav-search-icon:after, .nav-search-icon:before { content: ""; pointer-events: none; } .nav-search-icon:before { width: 2px; height: 11px; top: 11px; position: absolute; left: 50%; border-radius: 0 0 1px 1px; box-shadow: inset 0 0 0 32px; transform: translateX(-50%); } .nav-search-button:hover .nav-search-icon { color: #ff6b00; } .nav-search > form { width: 100%; height: 100%; padding: 0 auto; display: none; position: absolute; left: 0; top: 0; background-color: #fff; z-index: 99; } .nav-search-inner { width: 70%; height: 70px; margin: auto; display: table; } .navigation-portrait .nav-search-inner { height: 48px; } .nav-search-inner input[type="text"], .nav-search-inner input[type="search"] { height: 70px; width: 100%; margin: 0; padding: 0 12px; font-size: 26px; text-align: center; color: #343a40; outline: none; line-height: 70px; border: none; background-color: transparent; transition: all 0.3s; } .navigation-portrait .nav-search-inner input[type="text"], .navigation-portrait .nav-search-inner input[type="search"] { height: 48px; font-size: 18px; line-height: 48px; } .nav-search-close-button { width: 28px; height: 28px; display: block; position: absolute; right: 20px; top: 20px; line-height: normal; color: #343a40; font-size: 20px; cursor: pointer; text-align: center; } .navigation-portrait .nav-search-close-button { top: 10px; right: 14px; } .nav-button { margin: 18px 15px 0; padding: 8px 14px; display: inline-block; color: #fff; font-size: 14px; text-align: center; text-decoration: none; border-radius: 4px; } .nav-button:hover, .nav-button:focus { color: #fff; text-decoration: none; } .navigation-portrait .nav-button { width: calc(100% - 52px); margin: 17px 26px; } .nav-text { margin: 25px 15px; display: inline-block; color: #343a40; font-size: 14px; } .navigation-portrait .nav-text { width: calc(100% - 52px); margin: 12px 26px 0; } .navigation-portrait .nav-text + ul { margin-top: 15px; } .nav-dropdown { min-width: 180px; margin: 0; padding: 0; display: none; position: absolute; list-style: none; z-index: 98; white-space: nowrap; } .navigation-portrait .nav-dropdown { width: 100%; position: static; left: 0; } .nav-dropdown .nav-dropdown { left: 100%; } .nav-menu > li > .nav-dropdown { border-top: solid 1px #f0f0f0; } .nav-dropdown > li { width: 100%; float: left; clear: both; position: relative; text-align: left; } .nav-dropdown > li > a { width: 100%; padding: 16px 20px; display: inline-block; text-decoration: none; float: left; font-size: 13px; color: #343a40; background-color: #fdfdfd; } .nav-dropdown > li:hover > a, .nav-dropdown > li.focus > a { color: #ff6b00; } .nav-dropdown.nav-dropdown-left { right: 0; } .nav-dropdown > li > .nav-dropdown-left { left: auto; right: 100%; } .navigation-landscape .nav-dropdown.nav-dropdown-left > li > a { text-align: right; } .navigation-portrait .nav-dropdown > li > a { padding: 12px 20px 12px 30px; } .navigation-portrait .nav-dropdown > li > ul > li > a { padding-left: 50px; } .navigation-portrait .nav-dropdown > li > ul > li > ul > li > a { padding-left: 70px; } .navigation-portrait .nav-dropdown > li > ul > li > ul > li > ul > li > a { padding-left: 90px; } .navigation-portrait .nav-dropdown > li > ul > li > ul > li > ul > li > ul > li > a { padding-left: 110px; } .nav-dropdown .submenu-indicator { right: 15px; top: 10px; position: absolute; } .navigation-portrait .nav-dropdown .submenu-indicator { right: 0; top: 0; } .nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform: rotate(-45deg); } .navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform: rotate(45deg); } .nav-dropdown > li:hover > a .submenu-indicator-chevron, .nav-dropdown > .focus > a .submenu-indicator-chevron { border-color: transparent #ff6b00 #ff6b00 transparent; } .navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator { left: 10px; } .navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron { transform: rotate(135deg); } .nav-dropdown-horizontal { width: 100%; left: 0; background-color: #fdfdfd; border-top: solid 1px #f0f0f0; } .nav-dropdown-horizontal .nav-dropdown-horizontal { width: 100%; top: 100%; left: 0; } .navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal { border-top: none; } .nav-dropdown-horizontal > li { width: auto; clear: none; position: static; } .navigation-portrait .nav-dropdown-horizontal > li { width: 100%; } .nav-dropdown-horizontal > li > a { position: relative; } .nav-dropdown-horizontal .submenu-indicator { height: 18px; top: 11px; transform: rotate(90deg); } .navigation-portrait .nav-dropdown-horizontal .submenu-indicator { height: 42px; top: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up { transform: rotate(-180deg); } .megamenu-panel { width: 100%; padding: 15px; display: none; position: absolute; font-size: 14px; z-index: 98; text-align: left; color: inherit; border-top: solid 1px #f0f0f0; background-color: #fdfdfd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.075); } .navigation-portrait .megamenu-panel { padding: 25px; position: static; display: block; } .megamenu-panel [class*="container"] { width: 100%; } .megamenu-panel [class*="container"] [class*="col-"] { padding: 0; } .megamenu-panel-half { width: 50%; } .megamenu-panel-quarter { width: 25%; } .navigation-portrait .megamenu-panel-half, .navigation-portrait .megamenu-panel-quarter { width: 100%; } .megamenu-panel-row { width: 100%; } .megamenu-panel-row:before, .megamenu-panel-row:after { content: ""; display: table; line-height: 0; } .megamenu-panel-row:after { clear: both; } .megamenu-panel-row [class*="col-"] { display: block; min-height: 20px; float: left; margin-left: 3%; } .megamenu-panel-row [class*="col-"]:first-child { margin-left: 0; } .navigation-portrait .megamenu-panel-row [class*="col-"] { float: none; display: block; width: 100% !important; margin-left: 0; margin-top: 15px; } .navigation-portrait .megamenu-panel-row:first-child [class*="col-"]:first-child { margin-top: 0; } .megamenu-panel-row .col-1 { width: 5.583333333333%; } .megamenu-panel-row .col-2 { width: 14.166666666666%; } .megamenu-panel-row .col-3 { width: 22.75%; } .megamenu-panel-row .col-4 { width: 31.333333333333%; } .megamenu-panel-row .col-5 { width: 39.916666666667%; } .megamenu-panel-row .col-6 { width: 48.5%; } .megamenu-panel-row .col-7 { width: 57.083333333333%; } .megamenu-panel-row .col-8 { width: 65.666666666667%; } .megamenu-panel-row .col-9 { width: 74.25%; } .megamenu-panel-row .col-10 { width: 82.833333333334%; } .megamenu-panel-row .col-11 { width: 91.416666666667%; } .megamenu-panel-row .col-12 { width: 100%; } .megamenu-tabs { width: 100%; float: left; display: block; } .megamenu-tabs-nav { width: 20%; margin: 0; padding: 0; float: left; list-style: none; } .navigation-portrait .megamenu-tabs-nav { width: 100%; } .megamenu-tabs-nav > li > a { width: 100%; padding: 10px 16px; float: left; font-size: 13px; text-decoration: none; color: #343a40; border: solid 1px #eff0f2; outline: 0; background-color: #fff; } .megamenu-tabs-nav > li.active a, .megamenu-tabs-nav > li:hover a { background-color: #f5f5f5; } .megamenu-tabs-pane { width: 80%; min-height: 30px; padding: 20px; float: right; display: none; font-size: 13px; color: #343a40; border: solid 1px #eff0f2; background-color: #fff; } .megamenu-tabs-pane.active { display: block; } .navigation-portrait .megamenu-tabs-pane { width: 100%; } .megamenu-lists { width: 100%; display: table; } .megamenu-list { width: 100%; margin: 0 0 15px; padding: 0; display: inline-block; float: left; list-style: none; } .megamenu-list:last-child { margin: 0; border: none; } .navigation-landscape .megamenu-list { margin: -15px 0; padding: 20px 0; border-right: solid 1px #f0f0f0; } .navigation-landscape .megamenu-list:last-child { border: none; } .megamenu-list > li > a { width: 100%; padding: 10px 15px; display: inline-block; color: #343a40; text-decoration: none; font-size: 13px; } .megamenu-list > li > a:hover { background-color: #ff6b00; color: #fff; } .megamenu-list > li.megamenu-list-title > a { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #343a40; } .megamenu-list > li.megamenu-list-title > a:hover { background-color: transparent; } .navigation-landscape .list-col-2 { width: 50%; } .navigation-landscape .list-col-3 { width: 33%; } .navigation-landscape .list-col-4 { width: 25%; } .navigation-landscape .list-col-5 { width: 20%; } .nav-menu > li > a { color: #343a40; text-transform: uppercase; } .nav-dropdown > li > a { color: #343a40; padding: 10px 20px; border-bottom: 1px solid #f6f6f6; } .nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus { color: #ff6b00; } .main_header_area.sticky { width: 100%; position: fixed; top: 0; left: 0; background-color: #fff; z-index: 9999; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); } .transparent-menu { position: absolute; width: 100%; left: 0; top: 0; z-index: 99; } .navigation-portrait .nav-menu > li > a { width: 100%; height: auto; padding: 10px 10px 10px 30px; } @media only screen and (min-width: 320px) and (max-width: 767px) { .nav-dropdown > li > a, .megamenu-list > li > a { width: 65%; } }
!(function(n, i, e, a) { ;(n.navigation = function(t, s) { var o = { responsive: !0, mobileBreakpoint: 991, showDuration: 200, hideDuration: 200, showDelayDuration: 0, hideDelayDuration: 0, submenuTrigger: "hover", effect: "fadeIn", submenuIndicator: !0, submenuIndicatorTrigger: !1, hideSubWhenGoOut: !0, visibleSubmenusOnMobile: !1, fixed: !1, overlay: !0, overlayColor: "rgba(0, 0, 0, 0.5)", hidden: !1, hiddenOnMobile: !1, offCanvasSide: "left", offCanvasCloseButton: !0, animationOnShow: "", animationOnHide: "", onInit: function() {}, onLandscape: function() {}, onPortrait: function() {}, onShowOffCanvas: function() {}, onHideOffCanvas: function() {} }, r = this, u = Number.MAX_VALUE, d = 1, l = "click.nav touchstart.nav", f = "mouseenter focusin", c = "mouseleave focusout" r.settings = {} var t = (n(t), t) n(t).find(".nav-search").length > 0 && n(t) .find(".nav-search") .find("form") .prepend( "<span class='nav-search-close-button' tabindex='0'>✕</span>" ), (r.init = function() { ;(r.settings = n.extend({}, o, s)), r.settings.offCanvasCloseButton && n(t) .find(".nav-menus-wrapper") .prepend( "<span class='nav-menus-wrapper-close-button'>✕</span>" ), "right" == r.settings.offCanvasSide && n(t) .find(".nav-menus-wrapper") .addClass("nav-menus-wrapper-right"), r.settings.hidden && (n(t).addClass("navigation-hidden"), (r.settings.mobileBreakpoint = 99999)), v(), r.settings.fixed && n(t).addClass("navigation-fixed"), n(t) .find(".nav-toggle") .on("click touchstart", function(n) { n.stopPropagation(), n.preventDefault(), r.showOffcanvas(), s !== a && r.callback("onShowOffCanvas") }), n(t) .find(".nav-menus-wrapper-close-button") .on("click touchstart", function() { r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas") }), n(t) .find(".nav-search-button, .nav-search-close-button") .on("click touchstart keydown", function(i) { i.stopPropagation(), i.preventDefault() var e = i.keyCode || i.which "click" === i.type || "touchstart" === i.type || ("keydown" === i.type && 13 == e) ? r.toggleSearch() : 9 == e && n(i.target).blur() }), n(t).find(".megamenu-tabs").length > 0 && y(), n(i).resize(function() { r.initNavigationMode(C()), O(), r.settings.hiddenOnMobile && m() }), r.initNavigationMode(C()), r.settings.hiddenOnMobile && m(), s !== a && r.callback("onInit") }) var h = function() { n(t) .find(".nav-submenu") .hide(0), n(t) .find("li") .removeClass("focus") }, v = function() { n(t) .find("li") .each(function() { n(this).children(".nav-dropdown,.megamenu-panel").length > 0 && (n(this) .children(".nav-dropdown,.megamenu-panel") .addClass("nav-submenu"), r.settings.submenuIndicator && n(this) .children("a") .append( "<span class='submenu-indicator'><span class='submenu-indicator-chevron'></span></span>" )) }) }, m = function() { n(t).hasClass("navigation-portrait") ? n(t).addClass("navigation-hidden") : n(t).removeClass("navigation-hidden") } ;(r.showSubmenu = function(i, e) { C() > r.settings.mobileBreakpoint && n(t) .find(".nav-search") .find("form") .fadeOut(), "fade" == e ? n(i) .children(".nav-submenu") .stop(!0, !0) .delay(r.settings.showDelayDuration) .fadeIn(r.settings.showDuration) .removeClass(r.settings.animationOnHide) .addClass(r.settings.animationOnShow) : n(i) .children(".nav-submenu") .stop(!0, !0) .delay(r.settings.showDelayDuration) .slideDown(r.settings.showDuration) .removeClass(r.settings.animationOnHide) .addClass(r.settings.animationOnShow), n(i).addClass("focus") }), (r.hideSubmenu = function(i, e) { "fade" == e ? n(i) .find(".nav-submenu") .stop(!0, !0) .delay(r.settings.hideDelayDuration) .fadeOut(r.settings.hideDuration) .removeClass(r.settings.animationOnShow) .addClass(r.settings.animationOnHide) : n(i) .find(".nav-submenu") .stop(!0, !0) .delay(r.settings.hideDelayDuration) .slideUp(r.settings.hideDuration) .removeClass(r.settings.animationOnShow) .addClass(r.settings.animationOnHide), n(i) .removeClass("focus") .find(".focus") .removeClass("focus") }) var p = function() { n("body").addClass("no-scroll"), r.settings.overlay && (n(t).append("<div class='nav-overlay-panel'></div>"), n(t) .find(".nav-overlay-panel") .css("background-color", r.settings.overlayColor) .fadeIn(300) .on("click touchstart", function(n) { r.hideOffcanvas() })) }, g = function() { n("body").removeClass("no-scroll"), r.settings.overlay && n(t) .find(".nav-overlay-panel") .fadeOut(400, function() { n(this).remove() }) } ;(r.showOffcanvas = function() { p(), "left" == r.settings.offCanvasSide ? n(t) .find(".nav-menus-wrapper") .css("transition-property", "left") .addClass("nav-menus-wrapper-open") : n(t) .find(".nav-menus-wrapper") .css("transition-property", "right") .addClass("nav-menus-wrapper-open") }), (r.hideOffcanvas = function() { n(t) .find(".nav-menus-wrapper") .removeClass("nav-menus-wrapper-open") .on( "webkitTransitionEnd moztransitionend transitionend oTransitionEnd", function() { n(t) .find(".nav-menus-wrapper") .css("transition-property", "none") .off() } ), g() }), (r.toggleOffcanvas = function() { C() <= r.settings.mobileBreakpoint && (n(t) .find(".nav-menus-wrapper") .hasClass("nav-menus-wrapper-open") ? (r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas")) : (r.showOffcanvas(), s !== a && r.callback("onShowOffCanvas"))) }), (r.toggleSearch = function() { "none" == n(t) .find(".nav-search") .find("form") .css("display") ? (n(t) .find(".nav-search") .find("form") .fadeIn(200), n(t) .find(".nav-search") .find("input") .focus()) : (n(t) .find(".nav-search") .find("form") .fadeOut(200), n(t) .find(".nav-search") .find("input") .blur()) }), (r.initNavigationMode = function(i) { r.settings.responsive ? (i <= r.settings.mobileBreakpoint && u > r.settings.mobileBreakpoint && (n(t) .addClass("navigation-portrait") .removeClass("navigation-landscape"), S(), s !== a && r.callback("onPortrait")), i > r.settings.mobileBreakpoint && d <= r.settings.mobileBreakpoint && (n(t) .addClass("navigation-landscape") .removeClass("navigation-portrait"), k(), g(), r.hideOffcanvas(), s !== a && r.callback("onLandscape")), (u = i), (d = i)) : (n(t).addClass("navigation-landscape"), k(), s !== a && r.callback("onLandscape")) }) var b = function() { n("html").on("click.body touchstart.body", function(i) { 0 === n(i.target).closest(".navigation").length && (n(t) .find(".nav-submenu") .fadeOut(), n(t) .find(".focus") .removeClass("focus"), n(t) .find(".nav-search") .find("form") .fadeOut()) }) }, C = function() { return ( i.innerWidth || e.documentElement.clientWidth || e.body.clientWidth ) }, w = function() { n(t) .find(".nav-menu") .find("li, a") .off(l) .off(f) .off(c) }, O = function() { if (C() > r.settings.mobileBreakpoint) { var i = n(t).outerWidth(!0) n(t) .find(".nav-menu") .children("li") .children(".nav-submenu") .each(function() { n(this) .parent() .position().left + n(this).outerWidth() > i ? n(this).css("right", 0) : n(this).css("right", "auto") }) } }, y = function() { function i(i) { var e = n(i) .children(".megamenu-tabs-nav") .children("li"), a = n(i).children(".megamenu-tabs-pane") n(e).on("click.tabs touchstart.tabs", function(i) { i.stopPropagation(), i.preventDefault(), n(e).removeClass("active"), n(this).addClass("active"), n(a) .hide(0) .removeClass("active"), n(a[n(this).index()]) .show(0) .addClass("active") }) } if (n(t).find(".megamenu-tabs").length > 0) for (var e = n(t).find(".megamenu-tabs"), a = 0; a < e.length; a++) i(e[a]) }, k = function() { w(), h(), navigator.userAgent.match(/Mobi/i) || navigator.maxTouchPoints > 0 || "click" == r.settings.submenuTrigger ? n(t) .find(".nav-menu, .nav-dropdown") .children("li") .children("a") .on(l, function(e) { if ( (r.hideSubmenu( n(this) .parent("li") .siblings("li"), r.settings.effect ), n(this) .closest(".nav-menu") .siblings(".nav-menu") .find(".nav-submenu") .fadeOut(r.settings.hideDuration), n(this).siblings(".nav-submenu").length > 0) ) { if ( (e.stopPropagation(), e.preventDefault(), "none" == n(this) .siblings(".nav-submenu") .css("display")) ) return ( r.showSubmenu( n(this).parent("li"), r.settings.effect ), O(), !1 ) if ( (r.hideSubmenu(n(this).parent("li"), r.settings.effect), "_blank" === n(this).attr("target") || "blank" === n(this).attr("target")) ) i.open(n(this).attr("href")) else { if ( "#" === n(this).attr("href") || "" === n(this).attr("href") || "javascript:void(0)" === n(this).attr("href") ) return !1 i.location.href = n(this).attr("href") } } }) : n(t) .find(".nav-menu") .find("li") .on(f, function() { r.showSubmenu(this, r.settings.effect), O() }) .on(c, function() { r.hideSubmenu(this, r.settings.effect) }), r.settings.hideSubWhenGoOut && b() }, S = function() { w(), h(), r.settings.visibleSubmenusOnMobile ? n(t) .find(".nav-submenu") .show(0) : (n(t) .find(".submenu-indicator") .removeClass("submenu-indicator-up"), r.settings.submenuIndicator && r.settings.submenuIndicatorTrigger ? n(t) .find(".submenu-indicator") .on(l, function(i) { return ( i.stopPropagation(), i.preventDefault(), r.hideSubmenu( n(this) .parent("a") .parent("li") .siblings("li"), "slide" ), r.hideSubmenu( n(this) .closest(".nav-menu") .siblings(".nav-menu") .children("li"), "slide" ), "none" == n(this) .parent("a") .siblings(".nav-submenu") .css("display") ? (n(this).addClass("submenu-indicator-up"), n(this) .parent("a") .parent("li") .siblings("li") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), n(this) .closest(".nav-menu") .siblings(".nav-menu") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), r.showSubmenu( n(this) .parent("a") .parent("li"), "slide" ), !1) : (n(this) .parent("a") .parent("li") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), void r.hideSubmenu( n(this) .parent("a") .parent("li"), "slide" )) ) }) : n(t) .find(".nav-menu, .nav-dropdown") .children("li") .children("a") .on(l, function(e) { if ( (e.stopPropagation(), e.preventDefault(), r.hideSubmenu( n(this) .parent("li") .siblings("li"), r.settings.effect ), r.hideSubmenu( n(this) .closest(".nav-menu") .siblings(".nav-menu") .children("li"), "slide" ), "none" == n(this) .siblings(".nav-submenu") .css("display")) ) return ( n(this) .children(".submenu-indicator") .addClass("submenu-indicator-up"), n(this) .parent("li") .siblings("li") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), n(this) .closest(".nav-menu") .siblings(".nav-menu") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), r.showSubmenu(n(this).parent("li"), "slide"), !1 ) if ( (n(this) .parent("li") .find(".submenu-indicator") .removeClass("submenu-indicator-up"), r.hideSubmenu(n(this).parent("li"), "slide"), "_blank" === n(this).attr("target") || "blank" === n(this).attr("target")) ) i.open(n(this).attr("href")) else { if ( "#" === n(this).attr("href") || "" === n(this).attr("href") || "javascript:void(0)" === n(this).attr("href") ) return !1 i.location.href = n(this).attr("href") } })) } ;(r.callback = function(n) { s[n] !== a && s[n].call(t) }), r.init() }), (n.fn.navigation = function(i) { return this.each(function() { if (a === n(this).data("navigation")) { var e = new n.navigation(this, i) n(this).data("navigation", e) } }) }) })(jQuery, window, document) ;(function($) { "use strict" var $window = $(window) if ($.fn.navigation) { $("#navigation1").navigation() $("#always-hidden-nav").navigation({ hidden: true }) } $window.on("load", function() { $("#preloader").fadeOut("slow", function() { $(this).remove() }) }) })(jQuery)

Related: See More


Questions / Comments: