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 //added for center logo header 88 simpleMenu = $("ul.simple-dropdown", this), 89 megaMenu = $("ul.megamenu-content", this); 90 dropDown.closest("li").addClass("dropdown"); 91 simpleMenu.closest("li").addClass("simple-dropdown"); 92 megaMenu.closest("li").addClass("megamenu-fw"); 93 }); 94 95 var getName = $(".storage-name").html(); 96 if (!getName == "") { 97 $("ul.navbar-nav > li:contains('" + getName + "')").addClass("active"); 98 } 99 } 100 101 102 // ------------------------------------------------------------------------------ // 103 // Navbar Sidebar 104 // ------------------------------------------------------------------------------ // 105 if (getNav.hasClass("navbar-sidebar")) { 106 // Add Class to body 107 $("body").addClass("wrap-nav-sidebar"); 108 getNav.wrapInner("<div class='scroller'></div>"); 109 } else { 110 $(".bootsnav").addClass("on"); 111 } 112 113 // ------------------------------------------------------------------------------ // 114 // Menu Center 115 // ------------------------------------------------------------------------------ // 116 if (getNav.find("ul.nav").hasClass("navbar-center")) { 117 getNav.addClass("menu-center"); 118 } 119 120 // ------------------------------------------------------------------------------ // 121 // Navbar Full 122 // ------------------------------------------------------------------------------ // 123 if (getNav.hasClass("navbar-full")) { 124 // Add Class to body 125 $("nav.navbar.bootsnav").find("ul.nav").wrap("<div class='wrap-full-menu'></div>"); 126 $(".wrap-full-menu").wrap("<div class='nav-full'></div>"); 127 $("ul.nav.navbar-nav").prepend("<li class='close-full-menu'><a href='#'><i class='fa fa-times'></i></a></li>"); 128 } else if (getNav.hasClass("navbar-mobile")) { 129 getNav.removeClass("no-full"); 130 } else { 131 getNav.addClass("no-full"); 132 } 133 134 // ------------------------------------------------------------------------------ // 135 // Navbar Mobile 136 // ------------------------------------------------------------------------------ // 137 if (getNav.hasClass("navbar-mobile")) { 138 // Add Class to body 139 $('.navbar-collapse').on('shown.bs.collapse', function () { 140 $("body").addClass("side-right"); 141 }); 142 $('.navbar-collapse').on('hide.bs.collapse', function () { 143 $("body").removeClass("side-right"); 144 }); 145 146 $(window).on("resize", function () { 147 $("body").removeClass("side-right"); 148 }); 149 } 150 151 // ------------------------------------------------------------------------------ // 152 // Navbar Fixed 153 // ------------------------------------------------------------------------------ // 154 if (getNav.hasClass("no-background")) { 155 $(window).on("scroll", function () { 156 var scrollTop = $(window).scrollTop(); 157 if (scrollTop > 34) { 158 $(".navbar-fixed").removeClass("no-background"); 159 } else { 160 $(".navbar-fixed").addClass("no-background"); 161 } 162 }); 163 } 164 165 // ------------------------------------------------------------------------------ // 166 // Navbar Fixed 167 // ------------------------------------------------------------------------------ // 168 if (getNav.hasClass("navbar-transparent")) { 169 $(window).on("scroll", function () { 170 var scrollTop = $(window).scrollTop(); 171 if (scrollTop > 34) { 172 $(".navbar-fixed").removeClass("navbar-transparent"); 173 } else { 174 $(".navbar-fixed").addClass("navbar-transparent"); 175 } 176 }); 177 } 178 179 // ------------------------------------------------------------------------------ // 180 // Button Cart 181 // ------------------------------------------------------------------------------ // 182 $(".btn-cart").on("click", function (e) { 183 e.stopPropagation(); 184 }); 185 186 // ------------------------------------------------------------------------------ // 187 // Toggle Search 188 // ------------------------------------------------------------------------------ // 189 $("nav.navbar.bootsnav .attr-nav").each(function () { 190 $("li.search > a", this).on("click", function (e) { 191 e.preventDefault(); 192 $(".top-search").slideToggle(); 193 }); 194 }); 195 $(".input-group-addon.close-search").on("click", function () {
196 $(".top-search").slideUp(); 197 }); 198 199 // ------------------------------------------------------------------------------ // 200 // Toggle Side Menu 201 // ------------------------------------------------------------------------------ // 202 $("nav.navbar.bootsnav .attr-nav").each(function () { 203 $("li.side-menu > a", this).on("click", function (e) { 204 e.preventDefault(); 205 $("nav.navbar.bootsnav > .side").toggleClass("on"); 206 $("body").toggleClass("on-side"); 207 }); 208 }); 209 $(".side .close-side").on("click", function (e) { 210 e.preventDefault(); 211 $("nav.navbar.bootsnav > .side").removeClass("on"); 212 $("body").removeClass("on-side"); 213 }); 214 215 216 217 // ------------------------------------------------------------------------------ // 218 // Wrapper 219 // ------------------------------------------------------------------------------ // 220 //$("body").wrapInner("<div class='wrapper'></div>"); 221 }, 222 // ------------------------------------------------------------------------------ // 223 // Change dropdown to hover on dekstop 224 // ------------------------------------------------------------------------------ // 225 hoverDropdown: function () { 226 var getNav = $("nav.navbar.bootsnav"), 227 getWindow = $(window).width(), 228 getHeight = $(window).height(), 229 getIn = getNav.find("ul.nav").data("in"), 230 getOut = getNav.find("ul.nav").data("out"); 231 232 if (getWindow < 991) { 233 234 // Height of scroll navigation sidebar 235 $(".scroller").css("height", "auto"); 236 237 // Disable mouseenter event 238 $("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseenter"); 239 $("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseleave"); 240 $("nav.navbar.bootsnav ul.nav").find(".title").off("mouseenter"); 241 $("nav.navbar.bootsnav ul.nav").off("mouseleave"); 242 $(".navbar-collapse").removeClass("animated"); 243 244 // Enable click event 245 $("nav.navbar.bootsnav ul.nav").each(function () { 246 $(".dropdown-menu", this).addClass("animated"); 247 $(".dropdown-menu", this).removeClass(getOut); 248 249 // Dropdown Fade Toggle 250 $("a.dropdown-toggle", this).off('click'); 251 $("a.dropdown-toggle", this).on('click', function (e) { 252 e.stopPropagation(); 253 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle().toggleClass(getIn); 254 $(this).closest("li.dropdown").first().toggleClass("on"); 255 return false; 256 }); 257 258 // Hidden dropdown action 259 $('li.dropdown', this).each(function () { 260 $(this).find(".dropdown-menu").stop().fadeOut('fast'); 261 $(this).on('hidden.bs.dropdown', function () { 262 $(this).find(".dropdown-menu").stop().fadeOut('fast'); 263 }); 264 return false; 265 }); 266 267 // Megamenu style 268 $(".megamenu-fw", this).each(function () { 269 $(".col-menu", this).each(function () { 270 $(".content", this).addClass("animated"); 271 $(".content", this).stop().fadeOut(); 272 $(".title", this).off("click"); 273 $(".title", this).on("click", function () { 274 $(this).closest(".col-menu").find(".content").stop().fadeToggle('fast').addClass(getIn); 275 $(this).closest(".col-menu").toggleClass("on"); 276 return false; 277 }); 278 279 $(".content", this).on("click", function (e) { 280 e.stopPropagation(); 281 }); 282 }); 283 }); 284 }); 285 286 // Hidden dropdown 287 var cleanOpen = function () { 288 $('li.dropdown', this).removeClass("on"); 289 $(".dropdown-menu", this).stop().fadeOut('fast'); 290 $(".dropdown-menu", this).removeClass(getIn); 291 $(".col-menu", this).removeClass("on"); 292 $(".col-menu .content", this).stop().fadeOut('fast'); 293 $(".col-menu .content", this).removeClass(getIn); 294 } 295 296 // Hidden om mouse leave 297 $("nav.navbar.bootsnav").on("mouseleave", function () { 298 cleanOpen(); 299 }); 300 301 302 // Enable click atribute navigation 303 $("nav.navbar.bootsnav .attr-nav").each(function () { 304 $(".dropdown-menu", this).removeClass("animated"); 305 $("li.dropdown", this).off("mouseenter"); 306 $("li.dropdown", this).off("mouseleave"); 307 $("a.dropdown-toggle", this).off('click'); 308 $("a.dropdown-toggle", this).on('click', function (e) { 309 e.stopPropagation(); 310 $(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle(); 311 $(".navbar-toggle").each(function () { 312 $(".fa", this).removeClass("fa-times"); 313 $(".fa", this).addClass("fa-bars"); 314 $(".navbar-collapse").removeClass("in"); 315 $(".navbar-collapse").removeClass("on"); 316 }); 317 }); 318 319 $(this).on("mouseleave", function () { 320 $(".dropdown-menu", this).stop().fadeOut(); 321 $("li.dropdown", this).removeClass("on"); 322 return false; 323 }); 324 }); 325 326 // Toggle Bars 327 $(".navbar-toggle").each(function () { 328 $(this).off("click"); 329 $(this).on("click", function () { 330 $(".fa", this).toggleClass("fa-bars"); 331 $(".fa", this).toggleClass("fa-times"); 332 cleanOpen(); 333 }); 334 }); 335 336 } else if (getWindow > 991) { 337 // Height of scroll navigation sidebar 338 $(".scroller").css("height", getHeight + "px"); 339 340 // Navbar Sidebar 341 if (getNav.hasClass("navbar-sidebar")) { 342 // Hover effect Sidebar Menu 343 $("nav.navbar.bootsnav ul.nav").each(function () { 344 $("a.dropdown-toggle", this).off('click'); 345 $("a.dropdown-toggle", this).on('click', function (e) { 346 e.stopPropagation(); 347 }); 348 349 $(".dropdown-menu", this).addClass("animated"); 350 $("li.dropdown", this).on("mouseenter", function () { 351 $(".dropdown-menu", this).eq(0).removeClass(getOut); 352 $(".dropdown-menu", this).eq(0).stop().fadeIn('fast').addClass(getIn); 353 $(this).addClass("on"); 354 return false; 355 }); 356 357 $(".col-menu").each(function () { 358 $(".content", this).addClass("animated"); 359 $(".title", this).on("mouseenter", function () { 360 $(this).closest(".col-menu").find(".content").stop().fadeIn('fast').addClass(getIn); 361 $(this).closest(".col-menu").addClass("on"); 362 return false; 363 }); 364 }); 365 366 $(this).on("mouseleave", function () { 367 $(".dropdown-menu", this).stop().removeClass(getIn); 368 $(".dropdown-menu", this).stop().addClass(getOut).fadeOut('fast'); 369 $(".col-menu", this).find(".content").stop().fadeOut('fast').removeClass(getIn); 370 $(".col-menu", this).removeClass("on"); 371 $("li.dropdown", this).removeClass("on"); 372 return false; 373 }); 374 }); 375 } else { 376 var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/); 377 378 // Hover effect Default Menu 379 $("nav.navbar.bootsnav ul.nav").each(function () { 380 $("a.dropdown-toggle", this).off('click'); 381 $("a.dropdown-toggle", this).on('click', function (e) { 382 e.stopPropagation(); 383 }); 384 385 $(".megamenu-fw", this).each(function () { 386 $(".title", this).off("click"); 387 $("a.dropdown-toggle", this).off("click"); 388 $(".content").removeClass("animated"); 389 }); 390 391 $(".dropdown-menu", this).addClass("animated"); 392 $("li.dropdown", this).on("mouseenter", function () { 393 var _this = this; 394 $(".dropdown-menu", this).eq(0).removeClass(getOut); 395 if(isSafari) 396 $(".dropdown-menu", _this).eq(0).stop().fadeIn('fast').addClass(getIn); 397 else 398 $(".dropdown-menu", _this).eq(0).stop().fadeIn('fast').addClass(getIn); 399 $(this).addClass("on"); 400 return false; 401 }); 402 403 $("li.dropdown", this).on("mouseleave", function () { 404 $(".dropdown-menu", this).eq(0).removeClass(getIn); 405 if(isSafari) 406 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 407 else 408 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 409 $(this).removeClass("on"); 410 }); 411 412 $(this).on("mouseleave", function () { 413 $(".dropdown-menu", this).removeClass(getIn); 414 if(isSafari) 415 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 416 else 417 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 418 $("li.dropdown", this).removeClass("on"); 419 return false; 420 }); 421 }); 422 } 423 424 // ------------------------------------------------------------------------------ // 425 // Hover effect Atribute Navigation 426 // ------------------------------------------------------------------------------ // 427 $("nav.navbar.bootsnav .attr-nav").each(function () { 428 $("a.dropdown-toggle", this).off('click'); 429 $("a.dropdown-toggle", this).on('click', function (e) { 430 e.stopPropagation(); 431 }); 432 433 $(".dropdown-menu", this).addClass("animated"); 434 $("li.dropdown", this).on("mouseenter", function () { 435 $(".dropdown-menu", this).eq(0).removeClass(getOut); 436 $(".dropdown-menu", this).eq(0).stop().fadeIn('fast').addClass(getIn); 437 $(this).addClass("on"); 438 return false; 439 }); 440 441 $("li.dropdown", this).on("mouseleave", function () { 442 $(".dropdown-menu", this).eq(0).removeClass(getIn); 443 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 444 $(this).removeClass("on"); 445 }); 446 447 $(this).on("mouseleave", function () { 448 $(".dropdown-menu", this).removeClass(getIn); 449 $(".dropdown-menu", this).eq(0).stop().fadeOut('fast').addClass(getOut); 450 $("li.dropdown", this).removeClass("on"); 451 return false; 452 }); 453 }); 454 } 455 456 // ------------------------------------------------------------------------------ // 457 // Menu Fullscreen 458 // ------------------------------------------------------------------------------ // 459 if (getNav.hasClass("navbar-full")) { 460 var windowHeight = $(window).height(), 461 windowWidth = $(window).width(); 462 463 $(".nav-full").css("height", windowHeight + "px"); 464 $(".wrap-full-menu").css("height", windowHeight + "px"); 465 $(".wrap-full-menu").css("width", windowWidth + "px"); 466 467 $(".navbar-collapse").addClass("animated"); 468 $(".navbar-toggle").each(function () { 469 var getId = $(this).data("target"); 470 $(this).off("click"); 471 $(this).on("click", function (e) { 472 e.preventDefault(); 473 $(getId).removeClass(getOut); 474 $(getId).addClass("in"); 475 $(getId).addClass(getIn); 476 return false; 477 }); 478 479 $("li.close-full-menu").on("click", function (e) { 480 e.preventDefault(); 481 $(getId).addClass(getOut); 482 setTimeout(function () { 483 $(getId).removeClass("in"); 484 $(getId).removeClass(getIn); 485 }, 500); 486 return false; 487 }); 488 }); 489 } 490 }, 491 // ------------------------------------------------------------------------------ // 492 // Navbar Sticky 493 // ------------------------------------------------------------------------------ // 494 navbarSticky: function () { 495 var getNav = $("nav.navbar.bootsnav"),
496 navSticky = getNav.hasClass("navbar-sticky"); 497 498 if (navSticky) { 499 500 // Set Height Navigation 501 var getHeight = getNav.height(); 502 $(".wrap-sticky").height(getHeight); 503 504 // Windown on scroll 505 var getOffset = $(".wrap-sticky").offset().top; 506 $(window).on("scroll", function () { 507 var scrollTop = $(window).scrollTop(); 508 if (scrollTop > getOffset) { 509 getNav.addClass("sticked"); 510 } else { 511 getNav.removeClass("sticked"); 512 } 513 }); 514 } 515 }, 516 // ------------------------------------------------------------------------------ // 517 // Navbar Scrollspy 518 // ------------------------------------------------------------------------------ // 519 navbarScrollspy: function () { 520 var navScrollSpy = $(".navbar-scrollspy"), 521 $body = $('body'), 522 getNav = $('nav.navbar.bootsnav'), 523 offset = getNav.outerHeight(); 524 525 if (navScrollSpy.length) { 526 $body.scrollspy({target: '.navbar', offset: offset}); 527 528 // Animation Scrollspy 529 $('.scroll').on('click', function (event) { 530 event.preventDefault(); 531 532 // Active link 533 $('.scroll').removeClass("active"); 534 $(this).addClass("active"); 535 536 // Remove navbar collapse 537 $(".navbar-collapse").removeClass("in"); 538 539 // Toggle Bars 540 $(".navbar-toggle").each(function () { 541 $(".fa", this).removeClass("fa-times"); 542 $(".fa", this).addClass("fa-bars"); 543 }); 544 545 // Scroll 546 var scrollTop = $(window).scrollTop(), 547 $anchor = $(this).find('a'), 548 $section = $($anchor.attr('href')).offset().top, 549 $window = $(window).width(), 550 $minusDesktop = getNav.data("minus-value-desktop"), 551 $minusMobile = getNav.data("minus-value-mobile"), 552 $speed = getNav.data("speed"); 553 554 if ($window > 992) { 555 var $position = $section - $minusDesktop; 556 } else { 557 var $position = $section - $minusMobile; 558 } 559 560 $('html, body').stop().animate({ 561 scrollTop: $position 562 }, $speed); 563 }); 564 565 // Activate Navigation 566 var fixSpy = function () { 567 var data = $body.data('bs.scrollspy'); 568 if (data) { 569 offset = getNav.outerHeight(); 570 data.options.offset = offset; 571 $body.data('bs.scrollspy', data); 572 $body.scrollspy('refresh'); 573 } 574 } 575 576 // Activate Navigation on resize 577 var resizeTimer; 578 $(window).on('resize', function () { 579 clearTimeout(resizeTimer); 580 var resizeTimer = setTimeout(fixSpy, 200); 581 }); 582 } 583 } 584 }; 585 586 // Initialize 587 $(document).ready(function () { 588 bootsnav.initialize(); 589 }); 590 591 // Reset on resize 592 $(window).on("resize", function () { 593 bootsnav.hoverDropdown(); 594 setTimeout(function () {
595 bootsnav.navbarSticky(); 596 }, 500); 597 598 // Toggle Bars 599 $(".navbar-toggle").each(function () { 600 $(".fa", this).removeClass("fa-times"); 601 $(".fa", this).addClass("fa-bars"); 602 $(this).removeClass("fixed"); 603 }); 604 $(".navbar-collapse").removeClass("in"); 605 $(".navbar-collapse").removeClass("on"); 606 $(".navbar-collapse").removeClass("bounceIn"); 607 }); 608 609}(jQuery)); 610
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.