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 $(".navbar-collapse").removeClass("animated"); 242 243 // Enable click event 244 $("nav.navbar.bootsnav ul.nav").each(function(){ 245 $(".dropdown-menu", this).addClass("animated"); 246 $(".dropdown-menu", this).removeClass(getOut); 247 248 // Dropdown Fade Toggle 249 $("a.dropdown-toggle", this).off('click'); 250 $("a.dropdown-toggle", this).on('click', function (e) { 251 e.stopPropagation(); 252 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle().toggleClass(getIn); 253 $(this).closest("li.dropdown").first().toggleClass("on"); 254 return false; 255 }); 256 257 // Hidden dropdown action 258 $('li.dropdown', this).each(function () { 259 $(this).find(".dropdown-menu").stop().fadeOut(); 260 $(this).on('hidden.bs.dropdown', function () { 261 $(this).find(".dropdown-menu").stop().fadeOut(); 262 }); 263 return false; 264 }); 265 266 // Megamenu style 267 $(".megamenu-fw", this).each(function(){ 268 $(".col-menu", this).each(function(){ 269 $(".content", this).addClass("animated"); 270 $(".content", this).stop().fadeOut(); 271 $(".title", this).off("click"); 272 $(".title", this).on("click", function(){ 273 $(this).closest(".col-menu").find(".content").stop().fadeToggle().addClass(getIn); 274 $(this).closest(".col-menu").toggleClass("on"); 275 return false;
276 }); 277 278 $(".content", this).on("click", function(e){ 279 e.stopPropagation(); 280 }); 281 }); 282 }); 283 }); 284 285 // Hidden dropdown 286 var cleanOpen = function(){ 287 $('li.dropdown', this).removeClass("on"); 288 $(".dropdown-menu", this).stop().fadeOut(); 289 $(".dropdown-menu", this).removeClass(getIn); 290 $(".col-menu", this).removeClass("on"); 291 $(".col-menu .content", this).stop().fadeOut(); 292 $(".col-menu .content", this).removeClass(getIn); 293 } 294 295 // Hidden om mouse leave 296 $("nav.navbar.bootsnav").on("mouseleave", function(){ 297 cleanOpen(); 298 }); 299 300 // Enable click atribute navigation 301 $("nav.navbar.bootsnav .attr-nav").each(function(){ 302 $(".dropdown-menu", this).removeClass("animated"); 303 $("li.dropdown", this).off("mouseenter"); 304 $("li.dropdown", this).off("mouseleave"); 305 $("a.dropdown-toggle", this).off('click'); 306 $("a.dropdown-toggle", this).on('click', function (e) { 307 e.stopPropagation(); 308 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle(); 309 $(".navbar-toggle").each(function(){ 310 $(".fa", this).removeClass("fa-times"); 311 $(".fa", this).addClass("fa-bars"); 312 $(".navbar-collapse").removeClass("in"); 313 $(".navbar-collapse").removeClass("on"); 314 }); 315 }); 316 317 $(this).on("mouseleave", function(){ 318 $(".dropdown-menu", this).stop().fadeOut(); 319 $("li.dropdown", this).removeClass("on"); 320 return false; 321 }); 322 }); 323 324 // Toggle Bars 325 $(".navbar-toggle").each(function(){ 326 $(this).off("click"); 327 $(this).on("click", function(){ 328 $(".fa", this).toggleClass("fa-bars"); 329 $(".fa", this).toggleClass("fa-times"); 330 cleanOpen(); 331 }); 332 }); 333 334 }else if( getWindow > 991 ){ 335 // Height of scroll navigation sidebar 336 $(".scroller").css("height", getHeight + "px"); 337 338 // Navbar Sidebar 339 if( getNav.hasClass("navbar-sidebar")){ 340 // Hover effect Sidebar Menu 341 $("nav.navbar.bootsnav ul.nav").each(function(){ 342 $("a.dropdown-toggle", this).off('click'); 343 $("a.dropdown-toggle", this).on('click', function (e) { 344 e.stopPropagation(); 345 }); 346 347 $(".dropdown-menu", this).addClass("animated"); 348 $("li.dropdown", this).on("mouseenter", function(){ 349 $(".dropdown-menu", this).eq(0).removeClass(getOut); 350 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 351 $(this).addClass("on"); 352 return false; 353 }); 354 355 $(".col-menu").each(function(){ 356 $(".content", this).addClass("animated"); 357 $(".title", this).on("mouseenter", function(){ 358 $(this).closest(".col-menu").find(".content").stop().fadeIn().addClass(getIn); 359 $(this).closest(".col-menu").addClass("on"); 360 return false;
361 }); 362 }); 363 364 $(this).on("mouseleave", function(){ 365 $(".dropdown-menu", this).stop().removeClass(getIn); 366 $(".dropdown-menu", this).stop().addClass(getOut).fadeOut(); 367 $(".col-menu", this).find(".content").stop().fadeOut().removeClass(getIn); 368 $(".col-menu", this).removeClass("on"); 369 $("li.dropdown", this).removeClass("on"); 370 return false; 371 }); 372 }); 373 }else{ 374 // Hover effect Default Menu 375 $("nav.navbar.bootsnav ul.nav").each(function(){ 376 $("a.dropdown-toggle", this).off('click'); 377 $("a.dropdown-toggle", this).on('click', function (e) { 378 e.stopPropagation(); 379 }); 380 381 $(".megamenu-fw", this).each(function(){ 382 $(".title", this).off("click"); 383 $("a.dropdown-toggle", this).off("click"); 384 $(".content").removeClass("animated"); 385 }); 386 387 $(".dropdown-menu", this).addClass("animated"); 388 $("li.dropdown", this).on("mouseenter", function(){ 389 $(".dropdown-menu", this).eq(0).removeClass(getOut); 390 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 391 $(this).addClass("on"); 392 return false; 393 }); 394 395 $("li.dropdown", this).on("mouseleave", function(){ 396 $(".dropdown-menu", this).eq(0).removeClass(getIn); 397 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 398 $(this).removeClass("on"); 399 }); 400 401 $(this).on("mouseleave", function(){ 402 $(".dropdown-menu", this).removeClass(getIn); 403 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 404 $("li.dropdown", this).removeClass("on"); 405 return false; 406 }); 407 }); 408 } 409 410 // ------------------------------------------------------------------------------ // 411 // Hover effect Atribute Navigation 412 // ------------------------------------------------------------------------------ // 413 $("nav.navbar.bootsnav .attr-nav").each(function(){ 414 $("a.dropdown-toggle", this).off('click'); 415 $("a.dropdown-toggle", this).on('click', function (e) { 416 e.stopPropagation(); 417 }); 418 419 $(".dropdown-menu", this).addClass("animated"); 420 $("li.dropdown", this).on("mouseenter", function(){ 421 $(".dropdown-menu", this).eq(0).removeClass(getOut); 422 $(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn); 423 $(this).addClass("on"); 424 return false; 425 }); 426 427 $("li.dropdown", this).on("mouseleave", function(){ 428 $(".dropdown-menu", this).eq(0).removeClass(getIn); 429 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 430 $(this).removeClass("on"); 431 }); 432 433 $(this).on("mouseleave", function(){ 434 $(".dropdown-menu", this).removeClass(getIn); 435 $(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut); 436 $("li.dropdown", this).removeClass("on"); 437 return false;
438 }); 439 }); 440 } 441 442 // ------------------------------------------------------------------------------ // 443 // Menu Fullscreen 444 // ------------------------------------------------------------------------------ // 445 if( getNav.hasClass("navbar-full")){ 446 var windowHeight = $(window).height(), 447 windowWidth = $(window).width(); 448 449 $(".nav-full").css("height", windowHeight + "px"); 450 $(".wrap-full-menu").css("height", windowHeight + "px"); 451 $(".wrap-full-menu").css("width", windowWidth + "px"); 452 453 $(".navbar-collapse").addClass("animated"); 454 $(".navbar-toggle").each(function(){ 455 var getId = $(this).data("target"); 456 $(this).off("click"); 457 $(this).on("click", function(e){ 458 e.preventDefault(); 459 $(getId).removeClass(getOut); 460 $(getId).addClass("in"); 461 $(getId).addClass(getIn); 462 return false; 463 }); 464 465 $("li.close-full-menu").on("click", function(e){ 466 e.preventDefault(); 467 $(getId).addClass(getOut); 468 setTimeout(function(){ 469 $(getId).removeClass("in"); 470 $(getId).removeClass(getIn); 471 }, 500); 472 return false; 473 }); 474 }); 475 } 476 }, 477 478 // ------------------------------------------------------------------------------ // 479 // Navbar Sticky 480 // ------------------------------------------------------------------------------ // 481 navbarSticky : function(){ 482 var getNav = $("nav.navbar.bootsnav"), 483 navSticky = getNav.hasClass("navbar-sticky"); 484 485 if( navSticky ){ 486 487 // Set Height Navigation 488 var getHeight = getNav.height(); 489 $(".wrap-sticky").height(getHeight); 490
491 // Windown on scroll 492 var getOffset = $(".wrap-sticky").offset().top; 493 $(window).on("scroll", function(){ 494 var scrollTop = $(window).scrollTop(); 495 if(scrollTop > getOffset){ 496 getNav.addClass("sticked"); 497 }else { 498 getNav.removeClass("sticked"); 499 } 500 }); 501 } 502 }, 503 504 // ------------------------------------------------------------------------------ // 505 // Navbar Scrollspy 506 // ------------------------------------------------------------------------------ // 507 navbarScrollspy : function(){ 508 var navScrollSpy = $(".navbar-scrollspy"), 509 $body = $('body'), 510 getNav = $('nav.navbar.bootsnav'), 511 offset = getNav.outerHeight(); 512 513 if( navScrollSpy.length ){ 514 $body.scrollspy({target: '.navbar', offset: offset }); 515 516 // Animation Scrollspy 517 $('.scroll').on('click', function(event) { 518 event.preventDefault(); 519 520 // Active link 521 $('.scroll').removeClass("active"); 522 $(this).addClass("active"); 523 524 // Remove navbar collapse 525 $(".navbar-collapse").removeClass("in"); 526 527 // Toggle Bars 528 $(".navbar-toggle").each(function(){ 529 $(".fa", this).removeClass("fa-times"); 530 $(".fa", this).addClass("fa-bars"); 531 }); 532 533 // Scroll 534 var scrollTop = $(window).scrollTop(), 535 $anchor = $(this).find('a'), 536 $section = $($anchor.attr('href')).offset().top, 537 $window = $(window).width(), 538 $minusDesktop = getNav.data("minus-value-desktop"), 539 $minusMobile = getNav.data("minus-value-mobile"), 540 $speed = getNav.data("speed"); 541 542 if( $window > 992 ){ 543 var $position = $section - $minusDesktop; 544 }else{ 545 var $position = $section - $minusMobile; 546 } 547 548 $('html, body').stop().animate({ 549 scrollTop: $position 550 }, $speed); 551 }); 552 553 // Activate Navigation 554 var fixSpy = function() { 555 var data = $body.data('bs.scrollspy'); 556 if (data) { 557 offset = getNav.outerHeight(); 558 data.options.offset = offset; 559 $body.data('bs.scrollspy', data); 560 $body.scrollspy('refresh'); 561 } 562 } 563 564 // Activate Navigation on resize 565 var resizeTimer; 566 $(window).on('resize', function() { 567 clearTimeout(resizeTimer); 568 var resizeTimer = setTimeout(fixSpy, 200); 569 }); 570 } 571 } 572 }; 573 574 // Initialize 575 $(document).ready(function(){ 576 bootsnav.initialize(); 577 }); 578 579 // Reset on resize 580 $(window).on("resize", function(){ 581 bootsnav.hoverDropdown(); 582 setTimeout(function(){
583 bootsnav.navbarSticky(); 584 }, 500); 585 586 // Toggle Bars 587 $(".navbar-toggle").each(function(){ 588 $(".fa", this).removeClass("fa-times"); 589 $(".fa", this).addClass("fa-bars"); 590 $(this).removeClass("fixed"); 591 }); 592 $(".navbar-collapse").removeClass("in"); 593 $(".navbar-collapse").removeClass("on"); 594 $(".navbar-collapse").removeClass("bounceIn"); 595 }); 596 597}(jQuery)); 598
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.