├── .gitignore ├── LICENSE ├── index.html ├── mega-dropdown.html ├── README.md ├── js ├── stellarnav.min.js └── stellarnav.js └── css ├── stellarnav.min.css └── stellarnav.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Vinny Moreira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | StellarNav.js - A Powerful Responsive Navigation 8 | 9 | 10 | 11 | 12 | 25 | 26 | 27 | 28 | 29 |
30 | StellarNav.js 31 |

Responsive, Lightweight, Multi-Level Dropdown Menu.

32 |
33 |
34 | 128 |
129 | 130 | 131 | 132 | 133 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /mega-dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | StellarNav.js - A Powerful Responsive Navigation 8 | 9 | 10 | 11 | 12 | 24 | 25 | 26 | 27 |
28 | StellarNav.js 29 |
30 |
31 | 164 |
165 | 166 | 167 | 168 | 169 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # StellarNav.js 2 | Responsive, lightweight, multi-level dropdown menu. Stellarnav is a great solution for long navigation menus with lots of menu items. 3 | 4 | Click here to see StellarNav.js in action. 5 | 6 | ## Installation 7 | 8 | ### CSS 9 | Include the StellarNav stylesheet. 10 | ```html 11 | 12 | ``` 13 | ### HTML 14 | Add a `stellarnav` class to your menu div. 15 | ```html 16 |
17 | 22 |
23 | ``` 24 | 25 | ### Javascript 26 | Include `stellarnav.min.js` and call `stellarNav()`. 27 | ```javascript 28 | 29 | 34 | ``` 35 | ## Options 36 | 37 | Here's a list of available settings. 38 | 39 | ```javascript 40 | jQuery('.stellarnav').stellarNav({ 41 | theme: 'plain', // adds default color to nav. (light, dark) 42 | breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly 43 | menuLabel: 'Menu', // label for the mobile nav 44 | sticky: false, // makes nav sticky on scroll (desktop only) 45 | position: 'static', // 'static', 'top', 'left', 'right' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page 46 | openingSpeed: 250, // how fast the dropdown should open in milliseconds 47 | closingDelay: 250, // controls how long the dropdowns stay open for in milliseconds 48 | showArrows: true, // shows dropdown arrows next to the items that have sub menus 49 | phoneBtn: '', // adds a click-to-call phone link to the top of menu - i.e.: "18009084500" 50 | phoneLabel: 'Call Us', // label for the phone button 51 | locationBtn: '', // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/" 52 | locationLabel: 'Location', // label for the location button 53 | closeBtn: false, // adds a close button to the end of nav 54 | closeLabel: 'Close', // label for the close button 55 | mobileMode: false, 56 | scrollbarFix: false // fixes horizontal scrollbar issue on very long navs 57 | }); 58 | ``` 59 | 60 | Attribute | Type | Default | Description 61 | --- | --- | --- | --- 62 | `theme` | *String* | `plain` | Adds default color to nav. [plain, light, dark] 63 | `breakpoint` | *Integer* | `768` | Number in pixels to determine when the nav should turn mobile friendly. 64 | `menuLabel` | *String* | `Menu` | Label (text) for the mobile nav. 65 | `sticky` | *Boolean* | `false` | Makes nav sticky on scroll. 66 | `position` | *String* | `static` | [static, top, left, right] - When set to 'top', this forces the mobile nav to be placed absolutely on the very top of page. When set to 'left' or 'right', mobile nav fades in/out from left or right, accordingly. 67 | `openingSpeed` | *Integer* | `250` | Controls how fast the dropdowns open in milliseconds. 68 | `closingDelay` | *Integer* | `250` | Controls how long the dropdowns stay open for in milliseconds. 69 | `showArrows` | *Boolean* | `true` | Shows dropdown arrows next to the items that have sub menus. 70 | `phoneBtn` | *String* | `''` | Adds a click-to-call phone link to the top of menu - i.e.: "18009084500". 71 | `phoneLabel` | *String* | `Call Us` | Label (text) for the phone button. 72 | `locationBtn` | *String* | `''` | Adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/". 73 | `locationLabel` | *String* | `Location` | Label (text) for the location button. 74 | `closeBtn` | *Boolean* | `false` | Adds a close button to the end of nav. 75 | `closeLabel` | *String* | `Close` | Label (text) for the close button. 76 | `mobileMode` | *Boolean* | `false` | Turns the menu mobile friendly by default. 77 | `scrollbarFix` | *Boolean* | `false` | Fixes horizontal scrollbar issue on very long menus. 78 | 79 | ## Mega Dropdowns 80 | 81 | The mega dropdown feature allows you to fully extend the width of the dropdown and group the sub-dropdown items by a specific number of columns. This is extremely useful when dealing large menus. 82 | 83 | You can turn any dropdown into a mega dropdown menu by simply adding a class of `mega` and an html attribute of `data-columns` to the top-level item. The number of columns for the `data-columns` attribute that can be any integer from `2 to 8`. Example: 84 | 85 | ```html 86 |
87 | 101 |
102 | ``` 103 | 104 | ***Note:** `data-columns` defaults to `4`. If you specify a number other than 2-8 or forget to add the `data-columns` attribute to the list item, the dropdown menu will automatically be divided into 4 columns. 105 | 106 | ## Extra 107 | 108 | ### Open / Close Menu 109 | 110 | You can add the css classes `stellarnav-open` or `stellarnav-close` to any html element on the page to activate opening or closing of menu on click. 111 | 112 | ### Drop Left 113 | 114 | For long dropdown menus and for some of the last navigation items, you may use the class `drop-left` to the list item so that the dropdown drops leftward. This prevents menu from breaking the grid and getting a horizontal scrollbar. 115 | 116 | ```html 117 |
118 | 135 |
136 | ``` 137 | 138 | If this is not an option and you are still getting a scrollbar, you may also set the `scrollbarFix` option to `true`. 139 | -------------------------------------------------------------------------------- /js/stellarnav.min.js: -------------------------------------------------------------------------------- 1 | !function(u){u.fn.stellarNav=function(n,r,h){nav=u(this),r=u(window).width();var f=u.extend({theme:"plain",breakpoint:768,menuLabel:"Menu",sticky:!1,position:"static",openingSpeed:250,closingDelay:250,showArrows:!0,phoneBtn:"",phoneLabel:"Call Us",locationBtn:"",locationLabel:"Location",closeBtn:!1,closeLabel:"Close",mobileMode:!1,scrollbarFix:!1},n);return this.each(function(){if("light"!=f.theme&&"dark"!=f.theme||nav.addClass(f.theme),f.breakpoint&&(h=f.breakpoint),f.menuLabel?menuLabel=f.menuLabel:menuLabel="",f.phoneLabel?phoneLabel=f.phoneLabel:phoneLabel="",f.locationLabel?locationLabel=f.locationLabel:locationLabel="",f.closeLabel?closeLabel=f.closeLabel:closeLabel="",f.phoneBtn&&f.locationBtn)var n="third";else if(f.phoneBtn||f.locationBtn)n="half";else n="full";if("right"==f.position||"left"==f.position?nav.prepend(' '+menuLabel+""):nav.prepend(' '+menuLabel+""),f.phoneBtn&&"right"!=f.position&&"left"!=f.position){var e=' '+phoneLabel+"";nav.find("a.menu-toggle").after(e)}if(f.locationBtn&&"right"!=f.position&&"left"!=f.position){e=' '+locationLabel+"";nav.find("a.menu-toggle").after(e)}if(f.sticky&&(navPos=nav.offset().top,h<=r&&u(window).on("scroll",function(){u(window).scrollTop()>navPos?nav.addClass("fixed"):nav.removeClass("fixed")})),"top"==f.position&&nav.addClass("top"),"left"==f.position||"right"==f.position){var i=''+closeLabel+"",s='',t='';nav.find("ul:first").prepend(i),f.locationBtn&&nav.find("ul:first").prepend(t),f.phoneBtn&&nav.find("ul:first").prepend(s)}"right"==f.position&&nav.addClass("right"),"left"==f.position&&nav.addClass("left"),f.showArrows||nav.addClass("hide-arrows"),f.closeBtn&&"right"!=f.position&&"left"!=f.position&&nav.find("ul:first").append('
  • '+closeLabel+"
    • "),f.scrollbarFix&&u("body").addClass("stellarnav-noscroll-x");var a=document.getElementById("icon-phone");if(a){a.setAttribute("viewBox","0 0 480 480");var l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d","M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076 c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257 c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194 C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02 C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876 c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029 C350.631,303.527,350.95,285.795,340.273,275.083z"),a.appendChild(l)}var o=document.getElementById("icon-location");if(o){o.setAttribute("viewBox","0 0 480 480");var d=document.createElementNS("http://www.w3.org/2000/svg","path");d.setAttribute("d","M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825 c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986 c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428 c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106 C365.449,105.825,351.176,71.378,322.621,42.825z M270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411 s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675 C292.355,166.352,285.217,183.575,270.942,197.855z"),o.appendChild(d)}u(".menu-toggle, .stellarnav-open").on("click",function(n){n.preventDefault(),"left"==f.position||"right"==f.position?(nav.find("ul:first").stop(!0,!0).fadeToggle(f.openingSpeed),nav.toggleClass("active"),nav.hasClass("active")&&nav.hasClass("mobile")&&u(document).on("click",function(n){nav.hasClass("mobile")&&(u(n.target).closest(nav).length||(nav.find("ul:first").stop(!0,!0).fadeOut(f.openingSpeed),nav.removeClass("active")))})):(nav.find("ul:first").stop(!0,!0).slideToggle(f.openingSpeed),nav.toggleClass("active"))}),u(".close-menu, .stellarnav-close").on("click",function(){nav.removeClass("active"),"left"==f.position||"right"==f.position?nav.find("ul:first").stop(!0,!0).fadeToggle(f.openingSpeed):nav.find("ul:first").stop(!0,!0).slideUp(f.openingSpeed).toggleClass("active")}),nav.find("li a").each(function(){0')}),nav.find("li .dd-toggle").on("click",function(n){n.preventDefault(),u(this).parent("li").children("ul").stop(!0,!0).slideToggle(f.openingSpeed),u(this).parent("li").toggleClass("open")});var c=function(){nav.find("li").off("mouseenter"),nav.find("li").off("mouseleave")};parentItems=nav.find("> ul > li");function p(){window.innerWidth<=h||f.mobileMode?(c(),nav.addClass("mobile"),nav.removeClass("desktop"),!nav.hasClass("active")&&nav.find("ul:first").is(":visible")&&nav.find("ul:first").hide(),nav.find("li.mega").each(function(){u(this).find("ul").first().removeAttr("style"),u(this).find("ul").first().children().removeAttr("style")})):(nav.addClass("desktop"),nav.removeClass("mobile"),nav.hasClass("active")&&nav.removeClass("active"),!nav.hasClass("active")&&nav.find("ul:first").is(":hidden")&&nav.find("ul:first").show(),u("li.open").removeClass("open").find("ul:visible").hide(),c(),u(parentItems).each(function(){u(this).hasClass("mega")?(u(this).on("mouseenter",function(){u(this).find("ul").first().stop(!0,!0).slideDown(f.openingSpeed)}),u(this).on("mouseleave",function(){u(this).find("ul").first().stop(!0,!0).slideUp(f.openingSpeed)})):(u(this).on("mouseenter",function(){u(this).children("ul").stop(!0,!0).slideDown(f.openingSpeed)}),u(this).on("mouseleave",function(){u(this).children("ul").stop(!0,!0).delay(f.closingDelay).slideUp(f.openingSpeed)}),u(this).find("li.has-sub").on("mouseenter",function(){u(this).children("ul").stop(!0,!0).slideDown(f.openingSpeed)}),u(this).find("li.has-sub").on("mouseleave",function(){u(this).children("ul").stop(!0,!0).delay(f.closingDelay).slideUp(f.openingSpeed)}))}),navWidth=0,u(parentItems).each(function(){navWidth+=u(this)[0].getBoundingClientRect().width,navWidth=Math.round(navWidth),u(this).hasClass("mega")&&(u(this).find("ul").first().css({left:0,right:0,margin:"0px auto"}),numCols=u(this).attr("data-columns"),2==numCols?u(this).find("li.has-sub").width("50%"):3==numCols?u(this).find("ul").first().children().width("33.33%"):4==numCols?u(this).find("ul").first().children().width("25%"):5==numCols?u(this).find("ul").first().children().width("20%"):6==numCols?u(this).find("ul").first().children().width("16.66%"):7==numCols?u(this).find("ul").first().children().width("14.28%"):8==numCols?u(this).find("ul").first().children().width("12.5%"):u(this).find("ul").first().children().width("25%"))}),parentItems.hasClass("mega")&&nav.find("li.mega > ul").css({"max-width":navWidth}))}p(),u(window).on("resize",function(){p()})})}}(jQuery); 2 | -------------------------------------------------------------------------------- /css/stellarnav.min.css: -------------------------------------------------------------------------------- 1 | .stellarnav,.stellarnav li{position:relative;line-height:normal}.stellarnav{width:100%;z-index:9900}.stellarnav a{color:#777}.stellarnav ul{margin:0;padding:0;text-align:center}.stellarnav li{list-style:none;display:block;margin:0;padding:0;vertical-align:middle}.stellarnav li a{padding:15px;display:block;text-decoration:none;color:#777;font-size:inherit;font-family:inherit;box-sizing:border-box;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out}.stellarnav.light a,.stellarnav.light li a{color:#000}.stellarnav>ul>li{display:inline-block}.stellarnav>ul>li>a{padding:20px 40px}.stellarnav ul ul{top:auto;width:220px;position:absolute;z-index:9900;text-align:left;display:none;background:#ddd}.stellarnav.light,.stellarnav.light ul ul{background:rgba(255,255,255,1)}.stellarnav li li{display:block}.stellarnav ul ul ul{top:0;left:220px}.stellarnav>ul>li:hover>ul>li:hover>ul{opacity:1;visibility:visible;top:0}.stellarnav>ul>li.drop-left>ul{right:0}.stellarnav li.drop-left ul ul{left:auto;right:220px}.stellarnav.dark,.stellarnav.dark ul ul{background:rgba(0,0,0,1)}.stellarnav.dark a,.stellarnav.dark li a{color:#FFF}.stellarnav.fixed{position:fixed;width:100%;top:0;left:0;z-index:9999}body.stellarnav-noscroll-x{overflow-x:hidden}.stellarnav li.has-sub>a:after{content:'';margin-left:10px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #FFF;display:inline-block}.stellarnav .dd-toggle,.stellarnav li.call-btn-mobile,.stellarnav li.location-btn-mobile,.stellarnav.hide-arrows li li.has-sub>a:after,.stellarnav.hide-arrows li.drop-left li.has-sub>a:after,.stellarnav.hide-arrows li.has-sub>a:after{display:none}.stellarnav li li.has-sub>a:after{margin-left:10px;float:right;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #FFF;position:relative;top:4px}.stellarnav li.drop-left li.has-sub>a:after{float:left;margin-right:10px;border-left:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #FFF}.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{display:none;text-transform:uppercase;text-decoration:none}.stellarnav .dd-toggle{position:absolute;top:0;right:0;padding:0;width:48px;height:48px;text-align:center;z-index:9999;border:0}.stellarnav.desktop li.has-sub a{padding-right:5px}.stellarnav.desktop.hide-arrows li.has-sub a{padding-right:15px}.stellarnav.mobile>ul>li>a.dd-toggle{padding:0}.stellarnav svg{fill:currentColor;width:1em;height:1em;position:relative;top:2px}.stellarnav a.dd-toggle .icon-plus{box-sizing:border-box;transition:transform .3s;width:12px;height:100%;position:relative;vertical-align:middle;display:inline-block}.stellarnav a.dd-toggle .icon-plus:after,.stellarnav a.dd-toggle .icon-plus:before{content:'';display:block;height:0;top:50%;border-bottom:solid 3px #777;position:absolute;width:12px}.stellarnav a.dd-toggle .icon-plus:before{transform:rotate(90deg);transition:width .3s}.stellarnav li.open>a.dd-toggle .icon-plus{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}.stellarnav.light a.dd-toggle .icon-plus:after,.stellarnav.light a.dd-toggle .icon-plus:before{border-color:#000}.stellarnav.dark a.dd-toggle .icon-plus:after,.stellarnav.dark a.dd-toggle .icon-plus:before{border-color:#FFF}.stellarnav .icon-close{box-sizing:border-box;width:12px;height:12px;position:relative;display:inline-block}.stellarnav .icon-close:after,.stellarnav .icon-close:before{content:'';display:block;width:12px;height:0;top:50%;border-bottom:solid 3px #777;position:absolute}.stellarnav .icon-close:before{transform:rotate(45deg)}.stellarnav .icon-close:after{transform:rotate(-45deg)}.stellarnav.light .icon-close:after,.stellarnav.light .icon-close:before{border-color:#000}.stellarnav.dark .icon-close:after,.stellarnav.dark .icon-close:before{border-color:#FFF}.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{padding:15px;box-sizing:border-box}.stellarnav .menu-toggle span.bars{display:inline-block;margin-right:7px;position:relative;top:3px}.stellarnav .menu-toggle span.bars span{display:block;width:15px;height:2px;border-radius:6px;background:#777;margin:0 0 3px}.stellarnav .full{width:100%}.stellarnav .half{width:50%}.stellarnav .third{width:33%;text-align:center}.stellarnav .location-btn-mobile.third{text-align:center}.stellarnav .location-btn-mobile.half{text-align:right}.stellarnav.light .half,.stellarnav.light .third{border-left:1px solid rgba(0,0,0,.15)}.stellarnav.light.left .half,.stellarnav.light.left .third,.stellarnav.light.right .half,.stellarnav.light.right .third{border-bottom:1px solid rgba(0,0,0,.15)}.stellarnav.light .half:first-child,.stellarnav.light .third:first-child{border-left:0}.stellarnav.dark .half,.stellarnav.dark .third{border-left:1px solid rgba(255,255,255,.15)}.stellarnav.dark.left .half,.stellarnav.dark.left .third,.stellarnav.dark.right .half,.stellarnav.dark.right .third{border-bottom:1px solid rgba(255,255,255,.15)}.stellarnav.dark.left .menu-toggle,.stellarnav.dark.right .menu-toggle,.stellarnav.light.left .menu-toggle,.stellarnav.light.right .menu-toggle{border-bottom:0}.stellarnav.dark .half:first-child,.stellarnav.dark .third:first-child{border-left:0}.stellarnav.light .menu-toggle span.bars span{background:#000}.stellarnav.dark .menu-toggle span.bars span{background:#FFF}.stellarnav.mobile,.stellarnav.mobile.fixed{position:static}.stellarnav.mobile ul{position:relative;display:none;text-align:left;background:rgba(221,221,221,1)}.stellarnav.mobile.active>ul,.stellarnav.mobile>ul>li{display:block}.stellarnav.mobile.active{padding-bottom:0}.stellarnav.mobile>ul>li>a{padding:15px}.stellarnav.mobile ul ul{position:relative;opacity:1;visibility:visible;width:auto;display:none;-moz-transition:none;-webkit-transition:none;-o-transition:color 0 ease-in;transition:none}.stellarnav.mobile ul ul ul{left:auto;top:auto}.stellarnav.mobile li.drop-left ul ul{right:auto}.stellarnav.mobile li a{border-bottom:1px solid rgba(255,255,255,.15)}.stellarnav.mobile>ul{border-top:1px solid rgba(255,255,255,.15)}.stellarnav.mobile.light li a{border-bottom:1px solid rgba(0,0,0,.15)}.stellarnav.mobile.light>ul{border-top:1px solid rgba(0,0,0,.15)}.stellarnav.mobile li a.dd-toggle,.stellarnav.mobile.light li a.dd-toggle{border:0}.stellarnav.mobile .call-btn-mobile,.stellarnav.mobile .close-menu,.stellarnav.mobile .dd-toggle,.stellarnav.mobile .location-btn-mobile,.stellarnav.mobile .menu-toggle{display:inline-block}.stellarnav.mobile li.call-btn-mobile{border-right:1px solid rgba(255,255,255,.1);box-sizing:border-box}.stellarnav.mobile li.call-btn-mobile,.stellarnav.mobile li.location-btn-mobile{display:inline-block;width:50%;text-transform:uppercase;text-align:center}.stellarnav.mobile li.call-btn-mobile.full,.stellarnav.mobile li.location-btn-mobile.full{display:block;width:100%;text-transform:uppercase;border-right:0;text-align:left}.stellarnav.mobile.light ul{background:rgba(255,255,255,1)}.stellarnav.mobile.dark ul{background:rgba(0,0,0,1)}.stellarnav.mobile.dark ul ul{background:rgba(255,255,255,.08)}.stellarnav.mobile.light li.call-btn-mobile{border-right:1px solid rgba(0,0,0,.1)}.stellarnav.mobile.top{position:absolute;width:100%;top:0;left:0;z-index:9999}.stellarnav.mobile li li.has-sub>a:after,.stellarnav.mobile li.drop-left li.has-sub>a:after,.stellarnav.mobile li.has-sub>a:after{display:none}.stellarnav.mobile.left>ul,.stellarnav.mobile.right>ul{position:fixed;top:0;bottom:0;width:100%;max-width:280px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.stellarnav.mobile.right>ul{right:0}.stellarnav.mobile.left .close-menu,.stellarnav.mobile.right .close-menu{display:inline-block;text-align:right}.stellarnav.mobile.left>ul{left:0}.stellarnav.mobile.left .call-btn-mobile.half,.stellarnav.mobile.left .call-btn-mobile.third,.stellarnav.mobile.left .close-menu.half,.stellarnav.mobile.left .close-menu.third,.stellarnav.mobile.left .location-btn-mobile.half,.stellarnav.mobile.left .location-btn-mobile.third,.stellarnav.mobile.right .call-btn-mobile.half,.stellarnav.mobile.right .call-btn-mobile.third,.stellarnav.mobile.right .close-menu.half,.stellarnav.mobile.right .close-menu.third,.stellarnav.mobile.right .location-btn-mobile.half,.stellarnav.mobile.right .location-btn-mobile.third{text-align:center}.stellarnav.mobile.left .menu-toggle.half,.stellarnav.mobile.left .menu-toggle.third,.stellarnav.mobile.right .menu-toggle.half,.stellarnav.mobile.right .menu-toggle.third{text-align:left}.stellarnav.mobile.left .close-menu.third span,.stellarnav.mobile.right .close-menu.third span{display:none}.stellarnav.desktop li.mega ul ul{background:0 0;width:auto}.stellarnav.desktop li.mega li{display:inline-block;vertical-align:top;margin-left:-4px}.stellarnav.desktop li.mega li li{display:block;position:relative;left:4px}.stellarnav.desktop>ul>li.mega{position:inherit}.stellarnav.desktop>ul>li.mega>ul{width:100%}.stellarnav.desktop>ul>li.mega>ul li.has-sub ul{display:block;position:relative;left:auto}.stellarnav.desktop>ul>li.mega>ul>li{padding-bottom:15px;box-sizing:border-box}.stellarnav.desktop li.mega li li a{padding:5px 15px}.stellarnav.desktop li.mega li.has-sub a:after{display:none}.stellarnav.desktop>ul>li.mega>ul>li>a{color:#ff0}@media only screen and (max-width :768px){.stellarnav{overflow:hidden;display:block}.stellarnav ul{position:relative;display:none}}@media only screen and (max-width :420px){.stellarnav.mobile .call-btn-mobile.third span,.stellarnav.mobile .location-btn-mobile.third span{display:none}} 2 | -------------------------------------------------------------------------------- /css/stellarnav.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Stellarnav.js 2.5.0 3 | * Responsive, lightweight, multi-level dropdown menu. 4 | * Copyright (c) 2018 Vinny Moreira - http://vinnymoreira.com 5 | * Released under the MIT license 6 | */ 7 | /* all nav */ 8 | .stellarnav { position: relative; width: 100%; z-index: 9900; line-height: normal; } 9 | .stellarnav a { color: #777; } 10 | .stellarnav ul { margin: 0; padding: 0; text-align: center; } 11 | .stellarnav li { list-style: none; display: block; margin: 0; padding: 0; position: relative; line-height: normal; vertical-align: middle; } 12 | .stellarnav li a { padding: 15px; display: block; text-decoration: none; color: #777; font-size: inherit; font-family: inherit; box-sizing: border-box; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; } 13 | 14 | /* main level */ 15 | .stellarnav > ul > li { display: inline-block; } 16 | .stellarnav > ul > li > a { padding: 20px 40px; } 17 | 18 | /* first level dd */ 19 | .stellarnav ul ul { top: auto; width: 220px; position: absolute; z-index: 9900; text-align: left; display: none; background: #ddd; } 20 | .stellarnav li li { display: block; } 21 | 22 | /* second level dd */ 23 | .stellarnav ul ul ul { top: 0; /* dd animtion - change to auto to remove */ left: 220px; } 24 | .stellarnav > ul > li:hover > ul > li:hover > ul { opacity: 1; visibility: visible; top: 0; } 25 | 26 | /* .drop-left */ 27 | .stellarnav > ul > li.drop-left > ul { right: 0; } 28 | .stellarnav li.drop-left ul ul { left: auto; right: 220px; } 29 | 30 | /* light theme */ 31 | .stellarnav.light { background: rgba(255, 255, 255, 1); } 32 | .stellarnav.light a { color: #000; } 33 | .stellarnav.light ul ul { background: rgba(255, 255, 255, 1); } 34 | .stellarnav.light li a { color: #000; } 35 | 36 | /* dark theme */ 37 | .stellarnav.dark { background: rgba(0, 0, 0, 1); } 38 | .stellarnav.dark a { color: #FFF; } 39 | .stellarnav.dark ul ul { background: rgba(0, 0, 0, 1); } 40 | .stellarnav.dark li a { color: #FFF; } 41 | /* sticky nav */ 42 | .stellarnav.fixed { position: fixed; width: 100%; top: 0; left: 0; z-index: 9999; } 43 | 44 | /* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/ 45 | body.stellarnav-noscroll-x { overflow-x: hidden; } 46 | 47 | /* general styling */ 48 | .stellarnav li.has-sub > a:after { content: ''; margin-left: 10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #FFF; display: inline-block; } 49 | .stellarnav li li.has-sub > a:after { margin-left: 10px; float: right; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #FFF; position: relative; top: 4px; } 50 | .stellarnav li.drop-left li.has-sub > a:after { float: left; margin-right: 10px; border-left: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #FFF; } 51 | .stellarnav.hide-arrows li.has-sub > a:after, .stellarnav.hide-arrows li li.has-sub > a:after, .stellarnav.hide-arrows li.drop-left li.has-sub > a:after { display: none; } 52 | .stellarnav .menu-toggle, .stellarnav .close-menu, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile { display: none; text-transform: uppercase; text-decoration: none; } 53 | .stellarnav .dd-toggle { display: none; position: absolute; top: 0; right: 0; padding: 0; width: 48px; height: 48px; text-align: center; z-index: 9999; border: 0; } 54 | .stellarnav.desktop li.has-sub a { padding-right: 5px; } 55 | .stellarnav.desktop.hide-arrows li.has-sub a { padding-right: 15px; } 56 | .stellarnav.mobile > ul > li > a.dd-toggle { padding: 0; } 57 | .stellarnav li.call-btn-mobile, .stellarnav li.location-btn-mobile { display: none; } 58 | 59 | /* svg icons */ 60 | .stellarnav svg { fill: currentColor; width: 1em; height: 1em; position: relative; top: 2px; } 61 | /* svg icons */ 62 | 63 | .stellarnav a.dd-toggle .icon-plus { box-sizing: border-box; transition: transform 0.3s; width: 12px; height: 100%; position: relative; vertical-align: middle; display: inline-block; } 64 | .stellarnav a.dd-toggle .icon-plus:before { content: ''; display: block; width: 12px; height: 0px; border-bottom: solid 3px #777; position: absolute; top: 50%; transform: rotate(90deg); transition: width 0.3s; } 65 | .stellarnav a.dd-toggle .icon-plus:after { content: ''; display: block; width: 12px; height: 0px; top: 50%; border-bottom: solid 3px #777; position: absolute; } 66 | .stellarnav li.open > a.dd-toggle .icon-plus { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 67 | .stellarnav.light a.dd-toggle .icon-plus:before { border-color: #000; } 68 | .stellarnav.light a.dd-toggle .icon-plus:after { border-color: #000; } 69 | .stellarnav.dark a.dd-toggle .icon-plus:before { border-color: #FFF; } 70 | .stellarnav.dark a.dd-toggle .icon-plus:after { border-color: #FFF; } 71 | 72 | .stellarnav .icon-close { box-sizing: border-box; width: 12px; height: 12px; position: relative; display: inline-block; } 73 | .stellarnav .icon-close:before { content: ''; display: block; width: 12px; height: 0px; border-bottom: solid 3px #777; position: absolute; top: 50%; transform: rotate(45deg); } 74 | .stellarnav .icon-close:after { content: ''; display: block; width: 12px; height: 0px; top: 50%; border-bottom: solid 3px #777; position: absolute; transform: rotate(-45deg); } 75 | .stellarnav.light .icon-close:before { border-color: #000; } 76 | .stellarnav.light .icon-close:after { border-color: #000; } 77 | .stellarnav.dark .icon-close:before { border-color: #FFF; } 78 | .stellarnav.dark .icon-close:after { border-color: #FFF; } 79 | 80 | /* mobile nav */ 81 | .stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu { padding: 15px; box-sizing: border-box; } 82 | .stellarnav .menu-toggle span.bars { display: inline-block; margin-right: 7px; position: relative; top: 3px; } 83 | .stellarnav .menu-toggle span.bars span { display: block; width: 15px; height: 2px; border-radius: 6px; background: #777; margin: 0 0 3px; } 84 | .stellarnav .full { width: 100%; } 85 | .stellarnav .half { width: 50%; } 86 | .stellarnav .third { width: 33%; text-align: center; } 87 | .stellarnav .location-btn-mobile.third { text-align: center; } 88 | .stellarnav .location-btn-mobile.half { text-align: right; } 89 | .stellarnav.light .third, .stellarnav.light .half { border-left: 1px solid rgba(0, 0, 0, .15); } 90 | .stellarnav.light.left .third, .stellarnav.light.left .half { border-bottom: 1px solid rgba(0, 0, 0, .15); } 91 | .stellarnav.light.right .third, .stellarnav.light.right .half { border-bottom: 1px solid rgba(0, 0, 0, .15); } 92 | .stellarnav.light .third:first-child, .stellarnav.light .half:first-child { border-left: 0; } 93 | .stellarnav.dark .third, .stellarnav.dark .half { border-left: 1px solid rgba(255, 255, 255, .15); } 94 | .stellarnav.dark.left .third, .stellarnav.dark.left .half { border-bottom: 1px solid rgba(255, 255, 255, .15); } 95 | .stellarnav.dark.right .third, .stellarnav.dark.right .half { border-bottom: 1px solid rgba(255, 255, 255, .15); } 96 | .stellarnav.light.left .menu-toggle, .stellarnav.light.right .menu-toggle { border-bottom: 0; } 97 | .stellarnav.dark.left .menu-toggle, .stellarnav.dark.right .menu-toggle { border-bottom: 0; } 98 | .stellarnav.dark .third:first-child, .stellarnav.dark .half:first-child { border-left: 0; } 99 | .stellarnav.light .menu-toggle span.bars span { background: #000; } 100 | .stellarnav.dark .menu-toggle span.bars span { background: #FFF; } 101 | .stellarnav.mobile { position: static; } 102 | .stellarnav.mobile.fixed { position: static; } 103 | .stellarnav.mobile ul { position: relative; display: none; } 104 | .stellarnav.mobile.active { padding-bottom: 0; } 105 | .stellarnav.mobile.active > ul { display: block; } 106 | .stellarnav.mobile ul { text-align: left; } 107 | .stellarnav.mobile > ul > li { display: block; } 108 | .stellarnav.mobile > ul > li > a { padding: 15px; } 109 | .stellarnav.mobile ul { background: rgba(221, 221, 221, 1); } 110 | .stellarnav.mobile ul ul { position: relative; opacity: 1; visibility: visible; width: auto; display: none; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none; } 111 | .stellarnav.mobile ul ul ul { left: auto; top: auto; } 112 | .stellarnav.mobile li.drop-left ul ul { right: auto; } 113 | .stellarnav.mobile li a { border-bottom: 1px solid rgba(255, 255, 255, .15); } 114 | .stellarnav.mobile > ul { border-top: 1px solid rgba(255, 255, 255, .15); } 115 | .stellarnav.mobile.light li a { border-bottom: 1px solid rgba(0, 0, 0, .15); } 116 | .stellarnav.mobile.light > ul { border-top: 1px solid rgba(0, 0, 0, .15); } 117 | .stellarnav.mobile li a.dd-toggle { border: 0; } 118 | .stellarnav.mobile.light li a.dd-toggle { border: 0; } 119 | .stellarnav.mobile .menu-toggle, .stellarnav.mobile .dd-toggle, .stellarnav.mobile .close-menu, .stellarnav.mobile .call-btn-mobile, .stellarnav.mobile .location-btn-mobile { display: inline-block; } 120 | .stellarnav.mobile li.call-btn-mobile { border-right: 1px solid rgba(255, 255, 255, .1); box-sizing: border-box; } 121 | .stellarnav.mobile li.call-btn-mobile, .stellarnav.mobile li.location-btn-mobile { display: inline-block; width: 50%; text-transform: uppercase; text-align: center; } 122 | .stellarnav.mobile li.call-btn-mobile.full, .stellarnav.mobile li.location-btn-mobile.full { display: block; width: 100%; text-transform: uppercase; border-right: 0; text-align: left; } 123 | .stellarnav.mobile.light ul { background: rgba(255, 255, 255, 1); } 124 | .stellarnav.mobile.dark ul { background: rgba(0, 0, 0, 1); } 125 | .stellarnav.mobile.dark ul ul { background: rgba(255, 255, 255, .08); } 126 | .stellarnav.mobile.light li.call-btn-mobile { border-right: 1px solid rgba(0, 0, 0, .1); } 127 | .stellarnav.mobile.top { position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; } 128 | .stellarnav.mobile li.has-sub > a:after, .stellarnav.mobile li li.has-sub > a:after, .stellarnav.mobile li.drop-left li.has-sub > a:after { display: none; } 129 | 130 | /* left and right positions */ 131 | .stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { position: fixed; top: 0; bottom: 0; width: 100%; max-width: 280px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } 132 | .stellarnav.mobile.right > ul { right: 0; } 133 | .stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { display: inline-block; text-align: right; } 134 | .stellarnav.mobile.left > ul { left: 0; } 135 | .stellarnav.mobile.right .location-btn-mobile.half, .stellarnav.mobile.right .call-btn-mobile.half, .stellarnav.mobile.right .close-menu.half { text-align: center; } 136 | .stellarnav.mobile.right .location-btn-mobile.third, .stellarnav.mobile.right .call-btn-mobile.third, .stellarnav.mobile.right .close-menu.third { text-align: center; } 137 | .stellarnav.mobile.left .location-btn-mobile.half, .stellarnav.mobile.left .call-btn-mobile.half, .stellarnav.mobile.left .close-menu.half { text-align: center; } 138 | .stellarnav.mobile.left .location-btn-mobile.third, .stellarnav.mobile.left .call-btn-mobile.third, .stellarnav.mobile.left .close-menu.third { text-align: center; } 139 | .stellarnav.mobile.left .menu-toggle.half, .stellarnav.mobile.left .menu-toggle.third, .stellarnav.mobile.right .menu-toggle.half, .stellarnav.mobile.right .menu-toggle.third { text-align: left; } 140 | .stellarnav.mobile.left .close-menu.third span, .stellarnav.mobile.right .close-menu.third span { display: none; } 141 | /* left and right positions */ 142 | 143 | /* mega dd */ 144 | .stellarnav.desktop li.mega ul ul { background: none; } 145 | .stellarnav.desktop li.mega li { display: inline-block; vertical-align: top; margin-left: -4px; } 146 | .stellarnav.desktop li.mega li li { display: block; position: relative; left: 4px; } 147 | .stellarnav.desktop li.mega ul ul { width: auto; } 148 | .stellarnav.desktop > ul > li.mega { position: inherit; } 149 | .stellarnav.desktop > ul > li.mega > ul { width: 100%; } 150 | .stellarnav.desktop > ul > li.mega > ul li.has-sub ul { display: block; position: relative; left: auto; } 151 | .stellarnav.desktop > ul > li.mega > ul > li { padding-bottom: 15px; box-sizing: border-box; } 152 | .stellarnav.desktop li.mega li li a { padding: 5px 15px; } 153 | .stellarnav.desktop li.mega li.has-sub a:after { display: none; } 154 | .stellarnav.desktop > ul > li.mega > ul > li > a { color: yellow; } 155 | /* mega dd */ 156 | 157 | 158 | /* Fallback for slow javascript load */ 159 | @media only screen and (max-width : 768px) { 160 | .stellarnav { overflow: hidden; display: block; } 161 | .stellarnav ul { position: relative; display: none; } 162 | } 163 | 164 | /* mobile nav */ 165 | @media only screen and (max-width : 420px) { 166 | .stellarnav.mobile .call-btn-mobile.third span, .stellarnav.mobile .location-btn-mobile.third span { display: none; } 167 | } 168 | -------------------------------------------------------------------------------- /js/stellarnav.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Stellarnav.js 2.6.0 3 | * Responsive, lightweight, multi-level dropdown menu. 4 | * Copyright (c) 2018 Vinny Moreira - http://vinnymoreira.com 5 | * Released under the MIT license 6 | */ 7 | (function($) { 8 | $.fn.stellarNav = function(options, width, breakpoint) { 9 | 10 | var $nav, $width, $breakpoint, $parentItems; 11 | nav = $(this); 12 | width = $(window).width(); 13 | 14 | // default settings 15 | var settings = $.extend( { 16 | theme: 'plain', // adds default color to nav. (light, dark) 17 | breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly 18 | menuLabel: 'Menu', // label for the mobile nav 19 | sticky: false, // makes nav sticky on scroll (desktop only) 20 | position: 'static', // 'static', 'top', 'left', 'right' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page 21 | openingSpeed: 250, // how fast the dropdown should open in milliseconds 22 | closingDelay: 250, // controls how long the dropdowns stay open for in milliseconds 23 | showArrows: true, // shows dropdown arrows next to the items that have sub menus 24 | phoneBtn: '', // adds a click-to-call phone link to the top of menu - i.e.: "18009084500" 25 | phoneLabel: 'Call Us', // label for the phone button 26 | locationBtn: '', // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/" 27 | locationLabel: 'Location', // label for the location button 28 | closeBtn: false, // adds a close button to the end of nav 29 | closeLabel: 'Close', // label for the close button 30 | mobileMode: false, 31 | scrollbarFix: false // fixes horizontal scrollbar issue on very long navs 32 | }, options ); 33 | 34 | return this.each( function() { 35 | 36 | // defines black or white themes 37 | if (settings.theme == 'light' || settings.theme == 'dark') { 38 | nav.addClass(settings.theme); 39 | } 40 | 41 | if (settings.breakpoint) { 42 | breakpoint = settings.breakpoint; 43 | } 44 | 45 | if (settings.menuLabel) { 46 | menuLabel = settings.menuLabel; 47 | } else { 48 | menuLabel = ''; 49 | } 50 | 51 | if (settings.phoneLabel) { 52 | phoneLabel = settings.phoneLabel; 53 | } else { 54 | phoneLabel = ''; 55 | } 56 | 57 | if (settings.locationLabel) { 58 | locationLabel = settings.locationLabel; 59 | } else { 60 | locationLabel = ''; 61 | } 62 | 63 | if (settings.closeLabel) { 64 | closeLabel = settings.closeLabel; 65 | } else { 66 | closeLabel = ''; 67 | } 68 | 69 | // css classes for main menu mobile buttons 70 | if( settings.phoneBtn && settings.locationBtn ) { 71 | var cssClass = 'third'; 72 | } else if( settings.phoneBtn || settings.locationBtn ) { 73 | var cssClass = 'half'; 74 | } else { 75 | var cssClass = 'full'; 76 | } 77 | 78 | // adds the toggle button to open and close nav 79 | if ( settings.position == 'right' || settings.position == 'left' ) { 80 | nav.prepend(' ' + menuLabel + ''); 81 | } else { 82 | nav.prepend(' ' + menuLabel + ''); 83 | } 84 | 85 | // adds a click-to-call link 86 | if (settings.phoneBtn && !(settings.position == 'right' || settings.position == 'left')) { 87 | var btn = ' ' + phoneLabel + ''; 88 | nav.find('a.menu-toggle').after(btn); 89 | } 90 | 91 | // adds a location page link to the beginning of nav 92 | if (settings.locationBtn && !(settings.position == 'right' || settings.position == 'left')) { 93 | var btn = ' ' + locationLabel + ''; 94 | nav.find('a.menu-toggle').after(btn); 95 | } 96 | 97 | // Makes nav sticky on scroll 98 | if (settings.sticky) { 99 | navPos = nav.offset().top; 100 | if(width >= breakpoint) { 101 | $(window).on('scroll', function() { 102 | if ($(window).scrollTop() > navPos) { 103 | nav.addClass('fixed'); 104 | } 105 | else { 106 | nav.removeClass('fixed'); 107 | } 108 | }); 109 | } 110 | } 111 | 112 | if (settings.position == 'top') { 113 | nav.addClass('top'); 114 | } 115 | 116 | if (settings.position == 'left' || settings.position == 'right') { 117 | var closeBtn = '' + closeLabel + ''; 118 | var phoneBtn = ''; 119 | var locationBtn = ''; 120 | 121 | nav.find('ul:first').prepend(closeBtn); 122 | 123 | if (settings.locationBtn) { 124 | nav.find('ul:first').prepend(locationBtn); 125 | } 126 | if (settings.phoneBtn) { 127 | nav.find('ul:first').prepend(phoneBtn); 128 | } 129 | } 130 | 131 | if (settings.position == 'right') { 132 | nav.addClass('right'); 133 | } 134 | 135 | if (settings.position == 'left') { 136 | nav.addClass('left'); 137 | } 138 | 139 | if (!settings.showArrows) { 140 | nav.addClass('hide-arrows'); 141 | } 142 | 143 | if (settings.closeBtn && !(settings.position == 'right' || settings.position == 'left')) { 144 | // adds a link to end of nav to close it 145 | nav.find('ul:first').append('
  • ' + closeLabel + '
    • '); 146 | } 147 | 148 | if (settings.scrollbarFix) { 149 | $('body').addClass('stellarnav-noscroll-x'); 150 | } 151 | 152 | // svg graphics 153 | // phone icon 154 | var phoneIcon = document.getElementById('icon-phone'); // Gets phone icon element 155 | if( phoneIcon ) { 156 | phoneIcon.setAttribute('viewBox','0 0 480 480'); 157 | var newPhoneIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace 158 | newPhoneIcon.setAttribute('d','M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076 c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257 c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194 C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02 C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876 c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029 C350.631,303.527,350.95,285.795,340.273,275.083z'); // Sets path's data 159 | phoneIcon.appendChild(newPhoneIcon); 160 | } 161 | 162 | // location icon 163 | var locationIcon = document.getElementById('icon-location'); //Gets phone icon element 164 | if( locationIcon ) { 165 | locationIcon.setAttribute('viewBox','0 0 480 480'); 166 | var newLocationIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace 167 | newLocationIcon.setAttribute('d','M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825 c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986 c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428 c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106 C365.449,105.825,351.176,71.378,322.621,42.825z M270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411 s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675 C292.355,166.352,285.217,183.575,270.942,197.855z'); // Sets path's data 168 | locationIcon.appendChild(newLocationIcon); 169 | } 170 | 171 | // opens and closes menu 172 | $('.menu-toggle, .stellarnav-open').on('click', function(e) { 173 | e.preventDefault(); 174 | 175 | // if nav position is left or right, uses fadeToggle instead of slideToggle 176 | if (settings.position == 'left' || settings.position == 'right') { 177 | nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed); 178 | nav.toggleClass('active'); 179 | 180 | if(nav.hasClass('active') && nav.hasClass('mobile')) { 181 | // closes the menu when clicked outside of it 182 | $(document).on('click', function(event) { 183 | // ensures menu hides only on mobile nav 184 | if(nav.hasClass('mobile')) { 185 | if (!$(event.target).closest(nav).length) { 186 | nav.find('ul:first').stop(true, true).fadeOut(settings.openingSpeed); 187 | nav.removeClass('active'); 188 | } 189 | } 190 | }); 191 | } 192 | 193 | } else { 194 | // static position - normal open and close animation 195 | nav.find('ul:first').stop(true, true).slideToggle(settings.openingSpeed); 196 | nav.toggleClass('active'); 197 | } 198 | }); 199 | 200 | // activates the close button 201 | $('.close-menu, .stellarnav-close').on('click', function() { 202 | 203 | nav.removeClass('active'); 204 | 205 | if (settings.position == 'left' || settings.position == 'right') { 206 | nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed); 207 | } else { 208 | nav.find('ul:first').stop(true, true).slideUp(settings.openingSpeed).toggleClass('active'); 209 | } 210 | }); 211 | 212 | 213 | // adds toggle button to li items that have children 214 | nav.find('li a').each(function() { 215 | if ($(this).next().length > 0) { 216 | $(this).parent('li').addClass('has-sub').append(''); 217 | } 218 | }); 219 | 220 | // expands the dropdown menu on each click 221 | nav.find('li .dd-toggle').on('click', function(e) { 222 | e.preventDefault(); 223 | $(this).parent('li').children('ul').stop(true, true).slideToggle(settings.openingSpeed); 224 | $(this).parent('li').toggleClass('open'); 225 | }); 226 | 227 | var resetTriggers = function() { 228 | nav.find('li').off('mouseenter'); 229 | nav.find('li').off('mouseleave'); 230 | } 231 | 232 | // defines top level items 233 | parentItems = nav.find('> ul > li'); 234 | 235 | var setTriggers = function() { 236 | $(parentItems).each(function() { 237 | if( $(this).hasClass('mega') ) { 238 | // mega dropdown 239 | $(this).on('mouseenter', function(){ 240 | $(this).find('ul').first().stop(true, true).slideDown(settings.openingSpeed); 241 | }); 242 | $(this).on('mouseleave', function(){ 243 | $(this).find('ul').first().stop(true, true).slideUp(settings.openingSpeed); 244 | }); 245 | } else { 246 | // normal dropdown 247 | // first-level 248 | $(this).on('mouseenter', function(){ 249 | $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed); 250 | }); 251 | $(this).on('mouseleave', function(){ 252 | $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed); 253 | }); 254 | 255 | // second level and below 256 | $(this).find('li.has-sub').on('mouseenter', function(){ 257 | $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed); 258 | }); 259 | $(this).find('li.has-sub').on('mouseleave', function(){ 260 | $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed); 261 | }); 262 | } 263 | }); 264 | } 265 | 266 | windowCheck(); 267 | 268 | // check browser width in real-time 269 | function windowCheck() { 270 | var browserWidth = window.innerWidth; 271 | 272 | if(browserWidth <= breakpoint || settings.mobileMode) { 273 | // mobile/tablet nav 274 | 275 | resetTriggers(); 276 | nav.addClass('mobile'); 277 | nav.removeClass('desktop'); 278 | 279 | // closes the menu when resizing window back to desktop 280 | if( !nav.hasClass('active') && nav.find('ul:first').is(':visible') ) { 281 | nav.find('ul:first').hide(); 282 | } 283 | 284 | // resets all the styles back to normal that are added on the desktop for the mega dropdown 285 | nav.find('li.mega').each(function() { 286 | $(this).find('ul').first().removeAttr('style'); 287 | $(this).find('ul').first().children().removeAttr('style'); 288 | }); 289 | 290 | } else { 291 | // desktop nav 292 | nav.addClass('desktop'); 293 | nav.removeClass('mobile'); 294 | 295 | if(nav.hasClass('active')) { 296 | nav.removeClass('active'); 297 | } 298 | 299 | // ensures stellarnav is visible after resizing window 300 | if( !nav.hasClass('active') && nav.find('ul:first').is(':hidden') ) { 301 | nav.find('ul:first').show(); 302 | } 303 | 304 | // hides items that were open on mobile 305 | $('li.open').removeClass('open').find('ul:visible').hide(); 306 | 307 | resetTriggers(); 308 | setTriggers(); 309 | 310 | // mega dropdown 311 | navWidth = 0; 312 | 313 | $(parentItems).each(function() { 314 | // calculates the nav width based on the sum of all top-level items 315 | navWidth += $(this)[0].getBoundingClientRect().width; 316 | navWidth = Math.round(navWidth); 317 | 318 | if($(this).hasClass('mega')) { 319 | // left aligns mega dropdown with nav 320 | $(this).find('ul').first().css({'left': 0, 'right': 0, 'margin': '0px auto'}); 321 | 322 | // gets the data-column attribute and divides the columns equally 323 | numCols = $(this).attr('data-columns'); 324 | if(numCols==2) { 325 | $(this).find('li.has-sub').width('50%'); 326 | } else if (numCols==3) { 327 | $(this).find('ul').first().children().width('33.33%'); 328 | } else if (numCols==4) { 329 | $(this).find('ul').first().children().width('25%'); 330 | } else if (numCols==5) { 331 | $(this).find('ul').first().children().width('20%'); 332 | } else if (numCols==6) { 333 | $(this).find('ul').first().children().width('16.66%'); 334 | } else if (numCols==7) { 335 | $(this).find('ul').first().children().width('14.28%'); 336 | } else if (numCols==8) { 337 | $(this).find('ul').first().children().width('12.5%'); 338 | } else { 339 | // defaults to 4 column 340 | $(this).find('ul').first().children().width('25%'); 341 | } 342 | } 343 | 344 | }); 345 | 346 | // defines the mega dropdown width to be the same as nav width 347 | if(parentItems.hasClass('mega')) { 348 | nav.find('li.mega > ul').css({'max-width':navWidth}); 349 | } 350 | // end mega dropdown 351 | 352 | } // end desktop nav 353 | } // windowCheck() 354 | 355 | $(window).on('resize', function() { 356 | windowCheck(); 357 | }); 358 | }); 359 | } 360 | }(jQuery)); 361 | --------------------------------------------------------------------------------