1// ------------------------------------------------------------------------------ // 2// 3// Template name : Bootsnav - Multi Purpose Header 4// Categorie : Bootstrap Menu in CSS 5// Author : adamnurdin01 6// Version : v.1.2 7// Created : 2016-06-02 8// Last update : 2016-10-19 9// 10// ------------------------------------------------------------------------------ // 11 12(function ($) { 13 "use strict"; 14 15 var bootsnav = { 16 initialize: function() { 17 this.event(); 18 this.hoverDropdown(); 19 this.navbarSticky(); 20 this.navbarScrollspy(); 21 }, 22 event : function(){ 23 24 // ------------------------------------------------------------------------------ // 25 // Variable 26 // ------------------------------------------------------------------------------ // 27 var getNav = $("nav.navbar.bootsnav"); 28 29 // ------------------------------------------------------------------------------ // 30 // Navbar Sticky 31 // ------------------------------------------------------------------------------ // 32 var navSticky = getNav.hasClass("navbar-sticky"); 33 if( navSticky ){ 34 // Wraped navigation 35 getNav.wrap("<div class='wrap-sticky'></div>"); 36 } 37 38 // ------------------------------------------------------------------------------ // 39 // Navbar Center 40 // ------------------------------------------------------------------------------ // 41 if( getNav.hasClass("brand-center")){ 42 var postsArr = new Array(), 43 index = $("nav.brand-center"), 44 $postsList = index.find('ul.navbar-nav'); 45 46 index.prepend("<span class='storage-name' style='display:none;'></span>"); 47 48 //Create array of all posts in lists 49 index.find('ul.navbar-nav > li').each(function(){ 50 if( $(this).hasClass("active") ){ 51 var getElement = $("a", this).eq(0).text(); 52 $(".storage-name").html(getElement); 53 } 54 postsArr.push($(this).html()); 55 }); 56 57 //Split the array at this point. The original array is altered. 58 var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)), 59 secondList = postsArr, 60 ListHTML = ''; 61 62 var createHTML = function(list){ 63 ListHTML = ''; 64 for (var i = 0; i < list.length; i++) { 65 ListHTML += '<li>' + list[i] + '</li>' 66 } 67 } 68 69 //Generate HTML for first list 70 createHTML(firstList); 71 $postsList.html(ListHTML); 72 index.find("ul.nav").first().addClass("navbar-left"); 73 74 //Generate HTML for second list 75 createHTML(secondList); 76 //Create new list after original one 77 $postsList.after('<ul class="nav navbar-nav"></ul>').next().html(ListHTML); 78 index.find("ul.nav").last().addClass("navbar-right"); 79 80 //Wrap navigation menu 81 index.find("ul.nav.navbar-left").wrap("<div class='col-half left'></div>"); 82 index.find("ul.nav.navbar-right").wrap("<div class='col-half right'></div>"); 83 84 //Selection Class 85 index.find('ul.navbar-nav > li').each(function(){ 86 var dropDown = $("ul.dropdown-menu", this), 87 megaMenu = $("ul.megamenu-content", this); 88 dropDown.closest("li").addClass("dropdown"); 89 megaMenu.closest("li").addClass("megamenu-fw"); 90 }); 91 92 var getName = $(".storage-name").html(); 93 if( !getName == "" ){ 94 $( "ul.navbar-nav > li:contains('" + getName + "')" ).addClass("active"); 95 } 96 } 97 98 99 // ------------------------------------------------------------------------------ // 100 // Navbar Sidebar 101 // ------------------------------------------------------------------------------ // 102 if( getNav.hasClass("navbar-sidebar")){ 103 // Add Class to body 104 $("body").addClass("wrap-nav-sidebar"); 105 getNav.wrapInner("<div class='scroller'></div>"); 106 }else{ 107 $(".bootsnav").addClass("on"); 108 } 109 110 // ------------------------------------------------------------------------------ // 111 // Menu Center 112 // ------------------------------------------------------------------------------ // 113 if( getNav.find("ul.nav").hasClass("navbar-center")){ 114 getNav.addClass("menu-center"); 115 } 116 117 // ------------------------------------------------------------------------------ // 118 // Navbar Full 119 // ------------------------------------------------------------------------------ // 120 if( getNav.hasClass("navbar-full")){ 121 // Add Class to body 122 $("nav.navbar.bootsnav").find("ul.nav").wrap("<div class='wrap-full-menu'></div>"); 123 $(".wrap-full-menu").wrap("<div class='nav-full'></div>"); 124 $("ul.nav.navbar-nav").prepend("<li class='close-full-menu'><a href='#'><i class='fa fa-times'></i></a></li>"); 125 }else if( getNav.hasClass("navbar-mobile")){ 126 getNav.removeClass("no-full"); 127 }else{ 128 getNav.addClass("no-full"); 129 } 130 131 // ------------------------------------------------------------------------------ // 132 // Navbar Mobile 133 // ------------------------------------------------------------------------------ // 134 if( getNav.hasClass("navbar-mobile")){ 135 // Add Class to body 136 $('.navbar-collapse').on('shown.bs.collapse', function() { 137 $("body").addClass("side-right"); 138 }); 139 $('.navbar-collapse').on('hide.bs.collapse', function() { 140 $("body").removeClass("side-right"); 141 }); 142 143 $(window).on("resize", function(){ 144 $("body").removeClass("side-right"); 145 }); 146 } 147 148 // ------------------------------------------------------------------------------ // 149 // Navbar Fixed 150 // ------------------------------------------------------------------------------ // 151 if( getNav.hasClass("no-background")){ 152 $(window).on("scroll", function(){ 153 var scrollTop = $(window).scrollTop(); 154 if(scrollTop >34){ 155 $(".navbar-fixed").removeClass("no-background"); 156 }else { 157 $(".navbar-fixed").addClass("no-background"); 158 } 159 }); 160 } 161 162 // ------------------------------------------------------------------------------ // 163 // Navbar Fixed 164 // ------------------------------------------------------------------------------ // 165 if( getNav.hasClass("navbar-transparent")){ 166 $(window).on("scroll", function(){ 167 var scrollTop = $(window).scrollTop(); 168 if(scrollTop >34){ 169 $(".navbar-fixed").removeClass("navbar-transparent"); 170 }else { 171 $(".navbar-fixed").addClass("navbar-transparent"); 172 } 173 }); 174 } 175 176 // ------------------------------------------------------------------------------ // 177 // Button Cart 178 // ------------------------------------------------------------------------------ // 179 $(".btn-cart").on("click", function(e){ 180 e.stopPropagation(); 181 }); 182 183 // ------------------------------------------------------------------------------ // 184 // Toggle Search 185 // ------------------------------------------------------------------------------ // 186 $("nav.navbar.bootsnav .attr-nav").each(function(){ 187 $("li.search > a", this).on("click", function(e){ 188 e.preventDefault(); 189 $(".top-search").slideToggle(); 190 }); 191 }); 192 $(".input-group-addon.close-search").on("click", function(){
193 $(".top-search").slideUp(); 194 }); 195 196 // ------------------------------------------------------------------------------ // 197 // Toggle Side Menu 198 // ------------------------------------------------------------------------------ // 199 $("nav.navbar.bootsnav .attr-nav").each(function(){ 200 $("li.side-menu > a", this).on("click", function(e){ 201 e.preventDefault(); 202 $("nav.navbar.bootsnav > .side").toggleClass("on"); 203 $("body").toggleClass("on-side"); 204 }); 205 }); 206 $(".side .close-side").on("click", function(e){ 207 e.preventDefault(); 208 $("nav.navbar.bootsnav > .side").removeClass("on"); 209 $("body").removeClass("on-side"); 210 }); 211 212 213 214 // ------------------------------------------------------------------------------ // 215 // Wrapper 216 // ------------------------------------------------------------------------------ // 217 $("body").wrapInner( "<div class='wrapper'></div>"); 218 }, 219 220 221 // ------------------------------------------------------------------------------ // 222 // Change dropdown to hover on dekstop 223 // ------------------------------------------------------------------------------ // 224 hoverDropdown : function(){ 225 var getNav = $("nav.navbar.bootsnav"), 226 getWindow = $(window).width(), 227 getHeight = $(window).height(), 228 getIn = getNav.find("ul.nav").data("in"), 229 getOut = getNav.find("ul.nav").data("out"); 230 231 if( getWindow < 991 ){ 232 233 // Height of scroll navigation sidebar 234 $(".scroller").css("height", "auto"); 235 236 // Disable mouseenter event 237 $("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseenter"); 238 $("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseleave"); 239 $("nav.navbar.bootsnav ul.nav").find(".title").off("mouseenter"); 240 $("nav.navbar.bootsnav ul.nav").off("mouseleave"); 241 242 // Enable click event 243 $("nav.navbar.bootsnav ul.nav").each(function(){ 244 $(".dropdown-menu", this).removeClass(getOut); 245 246 // Dropdown Fade Toggle 247 $("a.dropdown-toggle", this).off('click'); 248 $("a.dropdown-toggle", this).on('click', function (e) { 249 e.stopPropagation(); 250 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle().toggleClass(getIn); 251 $(this).closest("li.dropdown").first().toggleClass("on"); 252 return false; 253 }); 254 255 // Hidden dropdown action 256 $('li.dropdown', this).each(function () { 257 $(this).find(".dropdown-menu").stop().fadeOut(); 258 $(this).on('hidden.bs.dropdown', function () { 259 $(this).find(".dropdown-menu").stop().fadeOut(); 260 }); 261 return false; 262 }); 263 264 // Megamenu style 265 $(".megamenu-fw", this).each(function(){ 266 $(".col-menu", this).each(function(){ 267 $(".content", this).stop().fadeOut(); 268 $(".title", this).off("click"); 269 $(".title", this).on("click", function(){ 270 $(this).closest(".col-menu").find(".content").stop().fadeToggle().addClass(getIn); 271 $(this).closest(".col-menu").toggleClass("on"); 272 return false; 273 }); 274 275 $(".content", this).on("click", function(e){ 276 e.stopPropagation(); 277 }); 278 }); 279 }); 280 }); 281 282 // Hidden dropdown 283 var cleanOpen = function(){ 284 $('li.dropdown', this).removeClass("on"); 285 $(".dropdown-menu", this).stop().fadeOut(); 286 $(".dropdown-menu", this).removeClass(getIn); 287 $(".col-menu", this).removeClass("on"); 288 $(".col-menu .content", this).stop().fadeOut(); 289 $(".col-menu .content", this).removeClass(getIn); 290 } 291 292 // Hidden om mouse leave 293 $("nav.navbar.bootsnav").on("mouseleave", function(){ 294 cleanOpen(); 295 }); 296 297 // Enable click atribute navigation 298 $("nav.navbar.bootsnav .attr-nav").each(function(){ 299 $("li.dropdown", this).off("mouseenter"); 300 $("li.dropdown", this).off("mouseleave"); 301 $("a.dropdown-toggle", this).off('click'); 302 $("a.dropdown-toggle", this).on('click', function (e) { 303 e.stopPropagation(); 304 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle(); 305 $(".navbar-toggle").each(function(){ 306 $(".fa", this).removeClass("fa-times"); 307 $(".fa", this).addClass("fa-bars"); 308 $(".navbar-collapse").removeClass("in"); 309 $(".navbar-collapse").removeClass("on"); 310 }); 311 }); 312 313 $(this).on("mouseleave", function(){ 314 $(".dropdown-menu", this).stop().fadeOut(); 315 $("li.dropdown", this).removeClass("on"); 316 return false;
317 }); 318 }); 319 320 // Toggle Bars 321 $(".navbar-toggle").each(function(){ 322 $(this).off("click"); 323 $(this).on("click", function(){ 324 $(".fa", this).toggleClass("fa-bars"); 325 $(".fa", this).toggleClass("fa-times"); 326 cleanOpen(); 327 }); 328 }); 329 330 }else if( getWindow > 991 ){ 331 // Height of scroll navigation sidebar 332 $(".scroller").css("height", getHeight + "px"); 333 334 // Navbar Sidebar 335 if( getNav.hasClass("navbar-sidebar")){ 336 // Hover effect Sidebar Menu 337 $("nav.navbar.bootsnav ul.nav").each(function(){ 338 $("a.dropdown-toggle", this).off('click'); 339 $("a.dropdown-toggle", this).on('click', function (e) { 340 e.stopPropagation(); 341 }); 342 343 $("li.dropdown", this).on("mouseenter", function(){ 344 $(".dropdown-menu", this).eq(0).removeClass(getOut); 345 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 346 $(this).addClass("on"); 347 return false; 348 }); 349 350 $(".col-menu").each(function(){ 351 $(".title", this).on("mouseenter", function(){ 352 $(this).closest(".col-menu").find(".content").stop().fadeIn().addClass(getIn); 353 $(this).closest(".col-menu").addClass("on"); 354 return false; 355 }); 356 }); 357 358 $(this).on("mouseleave", function(){ 359 $(".dropdown-menu", this).stop().removeClass(getIn); 360 $(".dropdown-menu", this).stop().addClass(getOut).fadeOut(); 361 $(".col-menu", this).find(".content").stop().fadeOut().removeClass(getIn); 362 $(".col-menu", this).removeClass("on"); 363 $("li.dropdown", this).removeClass("on"); 364 return false; 365 }); 366 }); 367 }else{ 368 // Hover effect Default Menu 369 $("nav.navbar.bootsnav ul.nav").each(function(){ 370 $("a.dropdown-toggle", this).off('click'); 371 $("a.dropdown-toggle", this).on('click', function (e) { 372 e.stopPropagation(); 373 }); 374 375 $(".megamenu-fw", this).each(function(){ 376 $(".title", this).off("click"); 377 $("a.dropdown-toggle", this).off("click"); 378 }); 379 380 $("li.dropdown", this).on("mouseenter", function(){ 381 $(".dropdown-menu", this).eq(0).removeClass(getOut); 382 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 383 $(this).addClass("on"); 384 return false; 385 }); 386 387 $("li.dropdown", this).on("mouseleave", function(){ 388 $(".dropdown-menu", this).eq(0).removeClass(getIn); 389 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 390 $(this).removeClass("on"); 391 }); 392 393 $(this).on("mouseleave", function(){ 394 $(".dropdown-menu", this).removeClass(getIn); 395 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 396 $("li.dropdown", this).removeClass("on"); 397 return false;
398 }); 399 }); 400 } 401 402 // ------------------------------------------------------------------------------ // 403 // Hover effect Atribute Navigation 404 // ------------------------------------------------------------------------------ // 405 $("nav.navbar.bootsnav .attr-nav").each(function(){ 406 $("a.dropdown-toggle", this).off('click'); 407 $("a.dropdown-toggle", this).on('click', function (e) { 408 e.stopPropagation(); 409 }); 410 411 $("li.dropdown", this).on("mouseenter", function(){ 412 $(".dropdown-menu", this).eq(0).removeClass(getOut); 413 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 414 $(this).addClass("on"); 415 return false; 416 }); 417 418 $("li.dropdown", this).on("mouseleave", function(){ 419 $(".dropdown-menu", this).eq(0).removeClass(getIn); 420 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 421 $(this).removeClass("on"); 422 }); 423 424 $(this).on("mouseleave", function(){ 425 $(".dropdown-menu", this).removeClass(getIn); 426 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 427 $("li.dropdown", this).removeClass("on"); 428 return false; 429 }); 430 }); 431 } 432 433 // ------------------------------------------------------------------------------ // 434 // Menu Fullscreen 435 // ------------------------------------------------------------------------------ // 436 if( getNav.hasClass("navbar-full")){ 437 var windowHeight = $(window).height(), 438 windowWidth = $(window).width(); 439 440 $(".nav-full").css("height", windowHeight + "px"); 441 $(".wrap-full-menu").css("height", windowHeight + "px"); 442 $(".wrap-full-menu").css("width", windowWidth + "px"); 443 444 $(".navbar-toggle").each(function(){ 445 var getId = $(this).data("target"); 446 $(this).off("click"); 447 $(this).on("click", function(e){ 448 e.preventDefault(); 449 $(getId).removeClass(getOut); 450 $(getId).addClass("in"); 451 $(getId).addClass(getIn); 452 return false; 453 }); 454 455 $("li.close-full-menu").on("click", function(e){ 456 e.preventDefault(); 457 $(getId).addClass(getOut); 458 setTimeout(function(){ 459 $(getId).removeClass("in"); 460 $(getId).removeClass(getIn); 461 }, 500); 462 return false; 463 }); 464 }); 465 } 466 }, 467 468 // ------------------------------------------------------------------------------ // 469 // Navbar Sticky 470 // ------------------------------------------------------------------------------ // 471 navbarSticky : function(){ 472 var getNav = $("nav.navbar.bootsnav"), 473 navSticky = getNav.hasClass("navbar-sticky"); 474 475 if( navSticky ){ 476 477 // Set Height Navigation 478 var getHeight = getNav.height(); 479 $(".wrap-sticky").height(getHeight); 480
481 // Windown on scroll 482 var getOffset = $(".wrap-sticky").offset().top; 483 $(window).on("scroll", function(){ 484 var scrollTop = $(window).scrollTop(); 485 if(scrollTop > getOffset){ 486 getNav.addClass("sticked"); 487 }else { 488 getNav.removeClass("sticked"); 489 } 490 }); 491 } 492 }, 493 494 // ------------------------------------------------------------------------------ // 495 // Navbar Scrollspy 496 // ------------------------------------------------------------------------------ // 497 navbarScrollspy : function(){ 498 var navScrollSpy = $(".navbar-scrollspy"), 499 $body = $('body'), 500 getNav = $('nav.navbar.bootsnav'), 501 offset = getNav.outerHeight(); 502 503 if( navScrollSpy.length ){ 504 $body.scrollspy({target: '.navbar', offset: offset }); 505 506 // Animation Scrollspy 507 $('.scroll').on('click', function(event) { 508 event.preventDefault(); 509 510 // Active link 511 $('.scroll').removeClass("active"); 512 $(this).addClass("active"); 513 514 // Remove navbar collapse 515 $(".navbar-collapse").removeClass("in"); 516 517 // Toggle Bars 518 $(".navbar-toggle").each(function(){ 519 $(".fa", this).removeClass("fa-times"); 520 $(".fa", this).addClass("fa-bars"); 521 }); 522 523 // Scroll 524 var scrollTop = $(window).scrollTop(), 525 $anchor = $(this).find('a'), 526 $section = $($anchor.attr('href')).offset().top, 527 $window = $(window).width(), 528 $minusDesktop = getNav.data("minus-value-desktop"), 529 $minusMobile = getNav.data("minus-value-mobile"), 530 $speed = getNav.data("speed"); 531 532 if( $window > 992 ){ 533 var $position = $section - $minusDesktop; 534 }else{ 535 var $position = $section - $minusMobile; 536 } 537 538 $('html, body').stop().animate({ 539 scrollTop: $position 540 }, $speed); 541 }); 542 543 // Activate Navigation 544 var fixSpy = function() { 545 var data = $body.data('bs.scrollspy'); 546 if (data) { 547 offset = getNav.outerHeight(); 548 data.options.offset = offset; 549 $body.data('bs.scrollspy', data); 550 $body.scrollspy('refresh'); 551 } 552 } 553 554 // Activate Navigation on resize 555 var resizeTimer; 556 $(window).on('resize', function() { 557 clearTimeout(resizeTimer); 558 var resizeTimer = setTimeout(fixSpy, 200); 559 }); 560 } 561 } 562 }; 563 564 // Initialize 565 $(document).ready(function(){ 566 bootsnav.initialize(); 567 }); 568 569 // Reset on resize 570 $(window).on("resize", function(){ 571 bootsnav.hoverDropdown(); 572 setTimeout(function(){
573 bootsnav.navbarSticky(); 574 }, 500); 575 576 // Toggle Bars 577 $(".navbar-toggle").each(function(){ 578 $(".fa", this).removeClass("fa-times"); 579 $(".fa", this).addClass("fa-bars"); 580 $(this).removeClass("fixed"); 581 }); 582 $(".navbar-collapse").removeClass("in"); 583 $(".navbar-collapse").removeClass("on"); 584 $(".navbar-collapse").removeClass("bounceIn"); 585 }); 586 587}(jQuery)); 588
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.