1/* 2 * Stellarnav.js 1.0.0 3 * jQuery responsive multi-level dropdown menu designed to do most of the heavy CSS work for you. 4 * 5 * Copyright (c) 2016 Vinny Moreira - http://vinnymoreira.com 6 * 7 * Released under the MIT license 8 */ 9(function($) { 10 $.fn.stellarNav = function(options, width, breakpoint) { 11 12 var $nav, $width, $breakpoint; 13 nav = $(this); 14 width = $(window).width(); 15 16 // default settings 17 var settings = $.extend( { 18 theme : 'plain', // adds default color to nav. (light, dark) 19 breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly 20 phoneBtn: false, // adds a click-to-call phone link to the top of menu - i.e.: "18009084500" 21 locationBtn: false, // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/" 22 sticky : false, // makes nav sticky on scroll (desktop only) 23 position: 'static', // 'static' or 'top' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page 24 showArrows: true, // shows dropdown arrows next to the items that have sub menus 25 closeBtn : false, // adds a close button to the end of nav 26 scrollbarFix: false // fixes horizontal scrollbar issue on very long navs 27 }, options ); 28 29 return this.each( function() { 30 31 // defines black or white themes 32 if (settings.theme == 'light' || settings.theme == 'dark') { 33 nav.addClass(settings.theme); 34 } 35 36 if (settings.breakpoint) { 37 breakpoint = settings.breakpoint; 38 } 39 40 // css classes for main menu mobile buttons 41 if( settings.phoneBtn && settings.locationBtn ) { 42 var cssClass = 'third'; 43 } else if( settings.phoneBtn || settings.locationBtn ) { 44 var cssClass = 'half'; 45 } else { 46 var cssClass = 'full'; 47 } 48 49 // adds the toggle button to open and close nav 50 nav.prepend('<a href="#" class="menu-toggle ' + cssClass + '" style="text-align: center;"><i class="fa fa-bars" style="border: 1px solid; border-radius: 4px; padding: 8px;"></i></a>'); 51 52 // adds a click-to-call link 53 if (settings.phoneBtn) { 54 55 var btn = '<a href="tel:'+ settings.phoneBtn +'" class="call-btn-mobile ' + cssClass + '"><i class="fa fa-phone"></i> <span>Call us</span></a>'; 56 57 nav.find('a.menu-toggle').after(btn); 58 59 } 60 61 // adds a location page link to the beginning of nav 62 if (settings.locationBtn) { 63 64 var btn = '<a href="'+ settings.locationBtn +'" class="location-btn-mobile ' + cssClass + '" target="_blank"><i class="fa fa-map-marker"></i> <span>Location</span></a>'; 65 66 nav.find('a.menu-toggle').after(btn); 67 68 } 69 70 // Makes nav sticky on scroll 71 if (settings.sticky) { 72 navPos = nav.offset().top; 73 if(width >= breakpoint) { 74 $(window).bind('scroll', function() { 75 if ($(window).scrollTop() > navPos) { 76 nav.addClass('fixed'); 77 } 78 else { 79 nav.removeClass('fixed'); 80 } 81 }); 82 } 83 } 84 85 if (settings.position == 'top') { 86 nav.addClass('top'); 87 } 88 89 if (!settings.showArrows) { 90 nav.addClass('hide-arrows'); 91 } 92 93 if (settings.closeBtn) { 94 // adds a link to end of nav to close it 95 nav.find('ul:first').append('<li><a href="#" class="close-menu"><i class="fa fa-close"></i> Close Menu</a></li>'); 96 } 97 98 if (settings.scrollbarFix) { 99 $('body').addClass('stellarnav-noscroll-x'); 100 } 101 102 // opens and closes menu 103 $('.menu-toggle').on('click', function(e) { 104 e.preventDefault(); 105 nav.find('ul:first').stop(true, true).slideToggle(250); 106 nav.toggleClass('active'); 107 }); 108 109 // actives the close button 110 $('.close-menu').click(function() { 111 nav.find('ul:first').stop(true, true).slideUp(250).toggleClass('active'); 112 nav.removeClass('active'); 113 }); 114 115 116 // adds toggle button to li items that have children 117 nav.find('li a').each(function() { 118 if ($(this).next().length > 0) { 119 $(this).parent('li').addClass('has-sub').append('<a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a>'); 120 } 121 }); 122 123 // expands the dropdown menu on each click 124 nav.find('li .dd-toggle').on('click', function(e) { 125 e.preventDefault(); 126 //$(this).parent('li').toggleClass('hover'); 127 $(this).parent('li').children('ul').stop(true, true).slideToggle(250); 128 $(this).parent('li').toggleClass('open'); 129 }); 130 131 var resetTriggers = function() { 132 nav.find('li').unbind('mouseenter'); 133 nav.find('li').unbind('mouseleave'); 134 } 135 136 var setTriggers = function() { 137 nav.find('li').on('mouseenter', function(){ 138 $(this).addClass('hover'); 139 $(this).children('ul').stop(true, true).slideDown(250); 140 }); 141 nav.find('li').on('mouseleave', function(){ 142 $(this).removeClass('hover');
143 $(this).children('ul').stop(true, true).slideUp(250); 144 }); 145 } 146 windowCheck(); 147 148 // check browser width in real-time 149 function windowCheck() { 150 var browserWidth = window.outerWidth; 151 152 if(browserWidth <= breakpoint) { 153 // mobile/tablet nav 154 155 resetTriggers(); 156 nav.addClass('mobile'); 157 nav.removeClass('desktop'); 158 159 // closes the menu when resizing window back to desktop 160 if( !nav.hasClass('active') && nav.find('ul:first').is(':visible') ) { 161 //nav.addClass('active'); 162 nav.find('ul:first').hide(); 163 } 164 165 } else { 166 // desktop nav 167 nav.addClass('desktop'); 168 nav.removeClass('mobile'); 169 170 if(nav.hasClass('active')) { 171 nav.removeClass('active'); 172 } 173 174 // ensures stellarnav is visible after resizing window 175 if( !nav.hasClass('active') && nav.find('ul:first').is(':hidden') ) { 176 nav.find('ul:first').show(); 177 } 178 179 // hides items that were open on mobile 180 $('li.open').removeClass('open').find('ul:visible').hide(); 181 182 resetTriggers(); 183 setTriggers(); 184 } 185 } 186 187 $(window).on('resize', function() { 188 windowCheck(); 189 }); 190 }); 191 } 192}(jQuery));
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.