├── images ├── card-image.jpg └── favicons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── mstile-150x150.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── browserconfig.xml │ ├── manifest.json │ └── safari-pinned-tab.svg ├── bower.json ├── LICENSE ├── index-page.html ├── README.md ├── js ├── ma5-menu.min.js └── ma5-menu.js ├── index.html ├── css ├── ma5-menu.min.css └── ma5-menu.css └── scss └── ma5-menu.scss /images/card-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/card-image.jpg -------------------------------------------------------------------------------- /images/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/favicon.ico -------------------------------------------------------------------------------- /images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /images/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /images/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /images/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /images/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ma-5/ma5-mobile-menu/HEAD/images/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /images/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #006abc 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ma5-mobile-menu", 3 | "description": "", 4 | "version": "v4.0.0", 5 | "main": [ 6 | "./scss/ma5-menu.scss", 7 | "./css/ma5-menu.css", 8 | "./js/ma5-menu.js" 9 | ], 10 | "authors": [ 11 | "ma-5 " 12 | ], 13 | "license": "MIT", 14 | "ignore": [ 15 | "**/.*", 16 | "node_modules", 17 | "bower_components", 18 | "test", 19 | "tests" 20 | ] 21 | } -------------------------------------------------------------------------------- /images/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ma-5", 3 | "icons": [ 4 | { 5 | "src": "android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#006abc", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 ma-5 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 | -------------------------------------------------------------------------------- /images/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MA5 mobile menu 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 63 | 64 | 65 | 66 |
79 |

Example Active for Shop - Sets - Example 4

80 | 81 | 82 | 85 | 86 |
87 | 88 | 89 | 159 | 160 | 161 | 162 |
163 | footer content here 164 |
165 | 166 |
167 |
168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MA5 mobile menu 2 | jQuery mobile menu with panels. 3 | 4 | ### Features: 5 | * Minified script only 9kB 6 | * Good for very large phone menu 7 | * IE 11 compatybility 8 | * it's jQuery.js script 9 | * Left and right side option 10 | * HTML5 11 | * SCSS 12 | * BEM notation 13 | 14 | ### Example 15 | * [See example](https://ma-5.github.io/ma5-mobile-menu/) 16 | 17 | ### How to use 18 | The script copies the desktop menu and converts it to the mobile menu. 19 | 20 | Select the desktop menu with the menu parameter to be transformed into the mobile menu. The HTML structure in the desktop menu can be any. The condition is to keep the structure of the unordered list in the desktop menu. Parameter should indicate the main <ul> desktop menu. 21 | 22 | In the next step, enter the name of the active class in the desktop menu using the activeClass parameter. 23 | 24 | You can add the footer of the mobile menu using the footer parameter, which should indicate the container <div id="ma5menu-tools" class="ma5menu__tools">...</div> containing the content for the footer. 25 | 26 | By using the position parameter ('left' / 'right'), you can set the left or right position for the mobile menu. 27 | 28 | The closeOnBodyClick parameter (true / false) automatically closes the menu after clicking outside the menu area. 29 | ```html 30 | 41 | ``` 42 | In last step add to page menu toggle button. 43 | ```html 44 | 47 | ``` 48 | 49 | ### Example 50 | 51 | ```html 52 | 53 | 54 | 55 | 56 | MA5 mobile menu 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 161 | 162 | 163 | 164 |
165 | footer content here 166 |
167 | 168 | 169 | 170 | 171 | ``` 172 | 173 | ### History 174 | >v.1.0 Initial 175 | 176 | >v.1.1 Add animation options 177 | 178 | >v2.1.0 Changes for some CMS compatibility, transfer order css class attributes to data-ma5-order 179 | 180 | >v2.1.1 Clear js, add bower.json 181 | 182 | >v2.1.2 Modify toogle on action, add example 183 | 184 | >v3.0.0 Rewrite code for BEM standard, panel position options left and right, menu footer and more changes 185 | 186 | >v3.0.1 Example, smal changes CSS 187 | 188 | >v3.0.2 Add category, option `closeOnBodyClick` and close by `ESC` key. From now is possible enter to next panel menu by `category` or `enter button` 189 | 190 | >v3.0.3 Fix space after animation in tablet mediaqueries 191 | 192 | >v4.0.0 Menu with builder 193 | 194 | -------------------------------------------------------------------------------- /js/ma5-menu.min.js: -------------------------------------------------------------------------------- 1 | function ma5menu(e){var a=".site-menu";void 0!==e.menu&&(a=e.menu);var n="active";void 0!==e.activeClass&&(n=e.activeClass);var t="#ma5menu-tools";if(void 0!==e.footer&&(t=e.footer),$(a).length>0){$(a).after('\n\x3c!-- ma5-mobile-menu generated by js start --\x3e\n\n\x3c!-- ma5-mobile-menu generated by js end --\x3e'),$(a).clone().attr("id","js-ma5menu-list").appendTo("#js-ma5menu");var r=$("#js-ma5menu-list");ma5menuBuilder_clearHTML(r),ma5menuBuilder_clearAttributes(r,n),ma5menuBuilder_buildActive(r,n),ma5menuBuilder_buildLevels($(r),0,"ma5-ul")}if($(".ma5menu").length>0){var l="left";"right"===e.position&&(l=e.position),!0===e.closeOnBodyClick&&$("html").on("click touch",function(e){$(".ma5menu__container").is(e.target)||0!==$(".ma5menu__container").has(e.target).length||$(".ma5menu__toggle").is(e.target)||0!==$(".ma5menu__toggle").has(e.target).length||$("html").removeClass("ma5menu--active")}),$("html").addClass("ma5menu--"+l),$("body").append('
'),$(".ma5menu__header").clone().appendTo(".ma5menu__head"),$(".ma5menu").find("ul").clone().addClass("ma5menu__panel").appendTo(".ma5menu__container").find("ul").remove(),$(".ma5menu__panel").each(function(){$(this).wrap("
"),$(this).parent().addClass($(this).attr("class")).attr("data-ma5order",$(this).attr("data-ma5order")),$(this).removeAttr("class").removeAttr("data-ma5order")}),$(t).length>0&&$(".ma5menu__panel").append('
'+$(t).html()+"
"),$(".ma5menu__toggle").on("click touch",function(){$("html").addClass("ma5menu--ready").toggleClass("ma5menu--active").addClass("ma5menu--overflow"),$(".ma5menu__panel").removeClass("ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter"),setTimeout(function(){ma5menuCheckScroll()},500)}),$(".ma5menu__btn--enter").on("click touch",function(){$(".ma5menu__panel").removeClass("ma5menu__panel--active"),$(".ma5menu__panel li").removeClass("ma5menu__li--current");var e=$(this).parent().attr("data-ma5order").replace("li","ul"),a=$(this).parent().attr("data-ma5order").replace("li","ul").split("-");a.splice(-1,1);a=a.join("-"),$(".ma5menu__panel").removeClass("ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter"),$('[data-ma5order="'+a+'"]').addClass("ma5menu__panel--parent-enter"),$('[data-ma5order="'+e+'"]').addClass("ma5menu__panel--active-enter ma5menu__panel--active"),setTimeout(function(){ma5menuCheckScroll()},500)}),$(".ma5menu__leave").on("click touch",function(){$(".ma5menu__panel").removeClass("ma5menu__panel--active");var e=$(this).parent().attr("data-ma5order").replace("li","ul").split("-");e.splice(-1,1);e.splice(-1,1),e=e.join("-");var a=$(this).parent().attr("data-ma5order").replace("li","ul").split("-");a.splice(-1,1);a=a.join("-"),$(".ma5menu__panel").removeClass("ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter"),$('[data-ma5order="'+e+'"]').addClass("ma5menu__panel--parent-leave ma5menu__panel--active"),$('[data-ma5order="'+a+'"]').addClass("ma5menu__panel--active-leave"),setTimeout(function(){ma5menuCheckScroll()},500)});var i=!1;$(window).on("resize",function(){i=!0}),setInterval(function(){i&&(i=!1,ma5menuCheckScroll())},300)}}function ma5menuCheckScroll(){$("html").removeClass("ma5menu--overflow"),$(".ma5menu__container").removeClass("ma5menu__container--scroll"),$(".ma5menu__panel.ma5menu__panel--active").detectElementScrollbar()?($(".ma5menu__container").addClass("ma5menu__container--scroll"),$(".ma5menu__panel.ma5menu__panel--active").bind("scroll",function(){$(this).scrollTop()+$(this).innerHeight()+1>=$(this)[0].scrollHeight?$(".ma5menu__container").removeClass("ma5menu__container--scroll"):$(".ma5menu__container").addClass("ma5menu__container--scroll")})):$(".ma5menu__panel.ma5menu__panel--active").unbind("scroll")}function ma5menuBuilder_clearAttributes(e,a){var n=["src","alt","href"],t=$(e).find("*"),r=$(e);$(r).each(function(){for(var e=this.attributes,a=e.length;a--;){var t=e[a];-1===$.inArray(t.name,n)&&this.removeAttributeNode(t)}}),$(t).each(function(){for(var e=$(this).is("."+a),t=this.attributes,r=t.length;r--;){var l=t[r];-1===$.inArray(l.name,n)&&this.removeAttributeNode(l)}e&&$(this).addClass(a)})}function ma5menuBuilder_clearHTML(e){$(e).find("ul").each(function(){$(this).unwrapUntil("li")});var a=$(e).find("a");a.each(function(){$(this).unwrapUntil("li"),a.find("> b, > strong, > span, > div, > i").replaceWith(function(){return $(this).contents()})}),$(e).find("a > img").each(function(){if(void 0!==$(this).parent().attr("title")){var e=$(this).parent().attr("title");$(this).parent().append(e).find("img").remove()}else{var a=$(this).attr("alt");$(this).parent().append(a).find("img").remove()}}),$(e).find("div:not([attr_all])").remove()}function ma5menuBuilder_buildActive(e,a){var n=$(e).find("."+a);if(0===n.length)$(e).attr("data-ma5order","ma5-ul").addClass("ma5menu__panel--active");else{$(e).attr("data-ma5order","ma5-ul").removeClass("ma5menu__panel--active");var t=n.parentsUntil("#js-ma5menu").length;n.each(function(){var e=$(this).parent();if("A"===this.tagName)for($(this).parent().addClass("ma5menu__li--current").parent().addClass("ma5menu__panel--active"),$(this).addClass("ma5menu__path");t--;)e=e.parent().parent(),e.find("> a").addClass("ma5menu__path");if("LI"===this.tagName)for($(this).addClass("ma5menu__li--current").parent().addClass("ma5menu__panel--active"),$(this).find("> a").addClass("ma5menu__path");t--;)e=e.parent(),e.find("> a").addClass("ma5menu__path")})}$("#js-ma5menu").find("."+a).removeClass(a)}function ma5menuBuilder_buildLevels(e,a,n){e.addClass("lvl-"+a);var t=n.replace("ul","li"),r=e.children("li");r.attr("data-ma5order",function(e){return t+"-"+(e+1)}),r.each(function(){var e=$(this).attr("data-ma5order").replace("li","ul");$(this).find("> ul").attr("data-ma5order",e);var n=$(this).children("ul");if(n.length>0){var t=$(this).find("> a").text();$(this).find("> ul > li:first-child").prepend('
'+t+"
"),$('').insertBefore($(this).find("> a"));var r=$(this).attr("data-ma5order");ma5menuBuilder_buildLevels(n,a+1,r)}})}function isIE(){return"Microsoft Internet Explorer"==navigator.appName||"Netscape"==navigator.appName&&null!==new RegExp("Trident/.*rv:([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)}function detectSafari(){var e=navigator.userAgent.toLowerCase();if(-1!=e.indexOf("safari"))return!(e.indexOf("chrome")>-1)}function detectElementScrollbar(){$("[data-detect-scrollbar]").each(function(){$(this).get(0).scrollHeight>$(this).get(0).clientHeight?$(this).addClass("has-scrollbar").removeClass("hasnt-scrollbar"):$(this).addClass("hasnt-scrollbar").removeClass("has-scrollbar")})}!function(e){e.fn.unwrapUntil=function(){var a=arguments[0],n=typeof arguments[0];return"number"===n?e.each(this,function(){for(var n=e(this),t=0;t0)for(;0===n.parent(a).length;)n.unwrap()}):"object"===n&&e.each(this,function(){var n=e(this);if(n.closest(a).length>0)for(;n.parent()[0]!==a[0];)n.unwrap()}),this}}(jQuery);var htmlRootForDetectBrowser=document.getElementsByTagName("html")[0];isIE()?htmlRootForDetectBrowser.className+=" ie":htmlRootForDetectBrowser.className+=" noie",detectSafari()&&(htmlRootForDetectBrowser.className+=" safari"),$(document).ready(function(){$("body").keydown(function(e){27==e.keyCode&&$("html").removeClass("ma5menu--active")})}),$.fn.detectElementScrollbar=function(){return $(this).get(0).scrollHeight>$(this).get(0).clientHeight?($(this).addClass("has-scrollbar").removeClass("hasnt-scrollbar"),!0):($(this).addClass("hasnt-scrollbar").removeClass("has-scrollbar"),!1)},$(document).ready(function(){detectElementScrollbar()}),$(window).on("resize",function(){detectElementScrollbar()}),$(window).on("load",function(){detectElementScrollbar()}),$(window).on("load",function(){$("body").outerHeight()>$(window).height()?$("html").addClass("has-body-scrollbar"):$("html").addClass("hasnt-body-scrollbar")}); -------------------------------------------------------------------------------- /js/ma5-menu.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MA5 jquery mobile menu 3 | * v4.0.0 4 | * GitHub: https://github.com/ma-5/ma5-mobile-menu 5 | */ 6 | function ma5menu(atributes) { 7 | // menuDesktop = string, target to desktop menu which will be used for build menu mobile. For example '.site-menu' 8 | var menuDesktop = '.site-menu'; 9 | if (atributes.menu !== undefined) { 10 | menuDesktop = atributes.menu; 11 | } 12 | // activeClass = string, active class name without dot from active desktop menu
  • or . For example 'active' 13 | var activeClass = 'active'; 14 | if (atributes.activeClass !== undefined) { 15 | activeClass = atributes.activeClass; 16 | } 17 | // menuTools = string, target to menu tools container which will be used for build menu mobile footer. For example '#sma5menu-tools' 18 | var menuFooter = '#ma5menu-tools'; 19 | if (atributes.footer !== undefined) { 20 | menuFooter = atributes.footer; 21 | } 22 | if ($(menuDesktop).length > 0) { 23 | var ma5menuHtml = '\n' + 24 | '\n' + 25 | '\n' + 35 | ''; 36 | $(menuDesktop).after(ma5menuHtml); 37 | $(menuDesktop).clone().attr('id', 'js-ma5menu-list').appendTo('#js-ma5menu'); 38 | var menuMobile = $('#js-ma5menu-list'); 39 | ma5menuBuilder_clearHTML(menuMobile); 40 | ma5menuBuilder_clearAttributes(menuMobile, activeClass); 41 | ma5menuBuilder_buildActive(menuMobile, activeClass); 42 | ma5menuBuilder_buildLevels($(menuMobile), 0, 'ma5-ul'); 43 | } 44 | if ($('.ma5menu').length > 0) { 45 | var position = 'left'; 46 | if (atributes.position === 'right') { 47 | position = atributes.position; 48 | } 49 | if (atributes.closeOnBodyClick === true) { 50 | $('html').on('click touch', function (e) { 51 | if (!$('.ma5menu__container').is(e.target) && $('.ma5menu__container').has(e.target).length === 0 && !$('.ma5menu__toggle').is(e.target) && $('.ma5menu__toggle').has(e.target).length === 0) { 52 | $('html').removeClass('ma5menu--active'); 53 | } 54 | }); 55 | } 56 | $('html').addClass('ma5menu--' + position); 57 | $('body').append('
    '); 58 | 59 | 60 | $('.ma5menu__header').clone().appendTo('.ma5menu__head'); 61 | $('.ma5menu').find('ul').clone().addClass('ma5menu__panel').appendTo('.ma5menu__container').find('ul').remove(); 62 | $('.ma5menu__panel').each(function () { 63 | $(this).wrap('
    '); 64 | $(this).parent().addClass($(this).attr('class')).attr('data-ma5order', $(this).attr('data-ma5order')); 65 | $(this).removeAttr('class').removeAttr('data-ma5order'); 66 | }); 67 | if($(menuFooter).length > 0) { 68 | $('.ma5menu__panel').append('
    ' + $(menuFooter).html() + '
    '); 69 | } 70 | $('.ma5menu__toggle').on('click touch', function () { 71 | $('html').addClass('ma5menu--ready').toggleClass('ma5menu--active').addClass('ma5menu--overflow'); 72 | $('.ma5menu__panel').removeClass('ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter'); 73 | setTimeout(function () { 74 | ma5menuCheckScroll(); 75 | }, 500); 76 | }); 77 | $('.ma5menu__btn--enter').on('click touch', function () { 78 | $('.ma5menu__panel').removeClass('ma5menu__panel--active'); 79 | $('.ma5menu__panel li').removeClass('ma5menu__li--current'); 80 | var itemPath = $(this).parent().attr('data-ma5order').replace("li", "ul"); 81 | var itemParent = $(this).parent().attr('data-ma5order').replace("li", "ul").split('-'); 82 | var spliced = itemParent.splice(-1, 1); 83 | itemParent = itemParent.join("-"); 84 | $('.ma5menu__panel').removeClass('ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter'); 85 | $('[data-ma5order="' + itemParent + '"]').addClass('ma5menu__panel--parent-enter'); 86 | $('[data-ma5order="' + itemPath + '"]').addClass('ma5menu__panel--active-enter ma5menu__panel--active'); 87 | setTimeout(function () { 88 | ma5menuCheckScroll(); 89 | }, 500); 90 | }); 91 | $('.ma5menu__leave').on('click touch', function () { 92 | $('.ma5menu__panel').removeClass('ma5menu__panel--active'); 93 | var itemParent = $(this).parent().attr('data-ma5order').replace("li", "ul").split('-'); 94 | var splicedParent = itemParent.splice(-1, 1); 95 | splicedParent = itemParent.splice(-1, 1); 96 | itemParent = itemParent.join("-"); 97 | var itemPath = $(this).parent().attr('data-ma5order').replace("li", "ul").split('-'); 98 | var spliced = itemPath.splice(-1, 1); 99 | itemPath = itemPath.join("-"); 100 | $('.ma5menu__panel').removeClass('ma5menu__panel--active-leave ma5menu__panel--parent-leave ma5menu__panel--active-enter ma5menu__panel--parent-enter'); 101 | $('[data-ma5order="' + itemParent + '"]').addClass('ma5menu__panel--parent-leave ma5menu__panel--active'); 102 | $('[data-ma5order="' + itemPath + '"]').addClass('ma5menu__panel--active-leave'); 103 | setTimeout(function () { 104 | ma5menuCheckScroll(); 105 | }, 500); 106 | }); 107 | var didResize = false; 108 | $(window).on('resize', function () { 109 | didResize = true; 110 | }); 111 | setInterval(function () { 112 | if (didResize) { 113 | didResize = false; 114 | ma5menuCheckScroll(); 115 | } 116 | }, 300); 117 | } 118 | } 119 | 120 | // scroll menu content alert 121 | function ma5menuCheckScroll() { 122 | $('html').removeClass('ma5menu--overflow'); 123 | $('.ma5menu__container').removeClass('ma5menu__container--scroll'); 124 | if ($('.ma5menu__panel.ma5menu__panel--active').detectElementScrollbar()) { 125 | $('.ma5menu__container').addClass('ma5menu__container--scroll'); 126 | $('.ma5menu__panel.ma5menu__panel--active').bind('scroll', function () { 127 | if (($(this).scrollTop() + $(this).innerHeight() + 1) >= $(this)[0].scrollHeight) { 128 | $('.ma5menu__container').removeClass('ma5menu__container--scroll'); 129 | } else { 130 | $('.ma5menu__container').addClass('ma5menu__container--scroll'); 131 | } 132 | }); 133 | } else { 134 | $('.ma5menu__panel.ma5menu__panel--active').unbind("scroll"); 135 | } 136 | } 137 | 138 | // builder functions 139 | function ma5menuBuilder_clearAttributes(menu, activeClass) { 140 | var whitelist = ["src", "alt", "href"]; 141 | var menuChildrens = $(menu).find('*'); 142 | var menuRoot = $(menu); 143 | $(menuRoot).each(function () { 144 | var attributes = this.attributes; 145 | var i = attributes.length; 146 | while (i--) { 147 | var attr = attributes[i]; 148 | if ($.inArray(attr.name, whitelist) === -1) { 149 | this.removeAttributeNode(attr); 150 | } 151 | } 152 | }); 153 | $(menuChildrens).each(function () { 154 | var isException = $(this).is('.' + activeClass); 155 | var attributes = this.attributes; 156 | var i = attributes.length; 157 | while (i--) { 158 | var attr = attributes[i]; 159 | if ($.inArray(attr.name, whitelist) === -1) { 160 | this.removeAttributeNode(attr); 161 | } 162 | } 163 | if (isException) { 164 | $(this).addClass(activeClass); 165 | } 166 | }); 167 | } 168 | 169 | function ma5menuBuilder_clearHTML(menu) { 170 | var list = $(menu).find('ul'); 171 | list.each(function () { 172 | $(this).unwrapUntil("li"); 173 | }); 174 | var link = $(menu).find('a'); 175 | link.each(function () { 176 | $(this).unwrapUntil("li"); 177 | link.find('> b, > strong, > span, > div, > i').replaceWith(function () { 178 | return $(this).contents(); 179 | }); 180 | }); 181 | var images = $(menu).find('a > img'); 182 | images.each(function () { 183 | if ($(this).parent().attr('title') !== undefined) { 184 | var title = $(this).parent().attr('title'); 185 | $(this).parent().append(title).find('img').remove(); 186 | } else { 187 | var alt = $(this).attr('alt'); 188 | $(this).parent().append(alt).find('img').remove(); 189 | } 190 | }); 191 | $(menu).find('div:not([attr_all])').remove(); 192 | } 193 | 194 | function ma5menuBuilder_buildActive(menu, activeClass) { 195 | var active = $(menu).find('.' + activeClass); 196 | if (active.length === 0) { 197 | $(menu).attr('data-ma5order', 'ma5-ul').addClass('ma5menu__panel--active'); 198 | } else { 199 | $(menu).attr('data-ma5order', 'ma5-ul').removeClass('ma5menu__panel--active'); 200 | var lvl = active.parentsUntil('#js-ma5menu').length; 201 | active.each(function () { 202 | var thisParent = $(this).parent(); 203 | if (this.tagName === 'A') { 204 | $(this).parent().addClass('ma5menu__li--current').parent().addClass('ma5menu__panel--active'); 205 | $(this).addClass('ma5menu__path'); 206 | while (lvl--) { 207 | thisParent = thisParent.parent().parent(); 208 | thisParent.find('> a').addClass('ma5menu__path'); 209 | } 210 | } 211 | if (this.tagName === 'LI') { 212 | $(this).addClass('ma5menu__li--current').parent().addClass('ma5menu__panel--active'); 213 | $(this).find('> a').addClass('ma5menu__path'); 214 | while (lvl--) { 215 | thisParent = thisParent.parent(); 216 | thisParent.find('> a').addClass('ma5menu__path'); 217 | } 218 | } 219 | }); 220 | } 221 | $('#js-ma5menu').find('.' + activeClass).removeClass(activeClass); 222 | } 223 | 224 | function ma5menuBuilder_buildLevels(parent, level, order) { 225 | parent.addClass('lvl-' + level); 226 | var orderLi = order.replace('ul', 'li'); 227 | var children = parent.children('li'); 228 | children.attr('data-ma5order', function (i) { 229 | return orderLi + '-' + (i + 1); 230 | }); 231 | children.each(function () { 232 | var n = 0; 233 | var thisOrder = $(this).attr('data-ma5order').replace('li', 'ul'); 234 | $(this).find('> ul').attr('data-ma5order', thisOrder); 235 | var sublist = $(this).children('ul'); 236 | if (sublist.length > 0) { 237 | var thisText = $(this).find('> a').text(); 238 | $(this).find('> ul > li:first-child').prepend('
    ' + thisText + '
    '); 239 | $('').insertBefore($(this).find('> a')); 240 | var orderBuild = $(this).attr('data-ma5order'); 241 | ma5menuBuilder_buildLevels(sublist, level + 1, orderBuild); 242 | } 243 | }); 244 | } 245 | 246 | // ADDITIONAL FUNCTIONS 247 | 248 | // https://github.com/jamesallardice/jquery.unwrapuntil 249 | (function ($) { 250 | $.fn.unwrapUntil = function () { 251 | var arg = arguments[0], 252 | type = typeof arguments[0]; 253 | if (type === "number") { 254 | $.each(this, function () { 255 | var $this = $(this); 256 | for (var i = 0; i < arg; i++) { 257 | $this.unwrap(); 258 | } 259 | }); 260 | } else if (type === "string") { 261 | $.each(this, function () { 262 | var $this = $(this); 263 | if ($this.closest(arg).length > 0) { 264 | while ($this.parent(arg).length === 0) { 265 | $this.unwrap(); 266 | } 267 | } 268 | }); 269 | } else if (type === "object") { 270 | $.each(this, function () { 271 | var $this = $(this); 272 | if ($this.closest(arg).length > 0) { 273 | while ($this.parent()[0] !== arg[0]) { 274 | $this.unwrap(); 275 | } 276 | } 277 | }); 278 | } 279 | return this; 280 | }; 281 | })(jQuery); 282 | // 283 | 284 | // detect IE 285 | var htmlRootForDetectBrowser = document.getElementsByTagName('html')[0]; 286 | 287 | function isIE() { 288 | return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null))); 289 | } 290 | 291 | if (isIE()) { 292 | htmlRootForDetectBrowser.className += " ie"; 293 | } else { 294 | htmlRootForDetectBrowser.className += " noie"; 295 | } 296 | // 297 | 298 | // detect Safari 299 | function detectSafari() { 300 | var ua = navigator.userAgent.toLowerCase(); 301 | if (ua.indexOf('safari') != -1) { 302 | if (ua.indexOf('chrome') > -1) { 303 | return false; 304 | } else { 305 | return true; 306 | } 307 | } 308 | 309 | } 310 | 311 | if (detectSafari()) { 312 | htmlRootForDetectBrowser.className += " safari"; 313 | } 314 | // 315 | 316 | // ESC close 317 | $(document).ready(function () { 318 | $("body").keydown(function (e) { 319 | if (e.keyCode == 27) { 320 | $('html').removeClass('ma5menu--active'); 321 | } 322 | }); 323 | }); 324 | // 325 | 326 | // detect-element-scrollbar module 327 | function detectElementScrollbar() { 328 | $('[data-detect-scrollbar]').each(function () { 329 | if ($(this).get(0).scrollHeight > $(this).get(0).clientHeight) { 330 | $(this).addClass('has-scrollbar').removeClass('hasnt-scrollbar'); 331 | } else { 332 | $(this).addClass('hasnt-scrollbar').removeClass('has-scrollbar'); 333 | } 334 | }); 335 | } 336 | 337 | $.fn.detectElementScrollbar = function () { 338 | if ($(this).get(0).scrollHeight > $(this).get(0).clientHeight) { 339 | $(this).addClass('has-scrollbar').removeClass('hasnt-scrollbar'); 340 | return true; 341 | } else { 342 | $(this).addClass('hasnt-scrollbar').removeClass('has-scrollbar'); 343 | return false; 344 | } 345 | }; 346 | $(document).ready(function () { 347 | detectElementScrollbar(); 348 | }); 349 | $(window).on('resize', function () { 350 | detectElementScrollbar(); 351 | }); 352 | $(window).on('load', function () { 353 | detectElementScrollbar(); 354 | }); 355 | // 356 | 357 | // detect-body-scrollbar 358 | $(window).on('load', function () { 359 | if ($('body').outerHeight() > $(window).height()) { 360 | $('html').addClass('has-body-scrollbar'); 361 | } else { 362 | $('html').addClass('hasnt-body-scrollbar'); 363 | } 364 | }); 365 | // 366 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MA5 mobile menu 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 63 | 64 | 65 | 66 | 79 |
    80 |
    81 |

    MA5 mobile menu

    82 |

    jQuery mobile menu with panels.

    83 |
    84 | 85 |
    86 |
    87 | 88 |
    89 |
    90 | 91 |
    92 |
    93 | 94 | 95 | 96 | 97 | 100 | 101 |
    102 | 103 | 104 | 174 | 175 | 176 | 177 |
    178 | footer content here 179 |
    180 | 181 |
    182 | 183 | 184 |

    How to use

    185 |

    The script copies the desktop menu and converts it to the mobile menu. Sources: GitHub

    186 | 187 |
      188 | 189 |
    1. Select the desktop menu with the menu parameter to be transformed into the mobile menu. The HTML structure in the desktop menu can be any. The condition is to keep the structure of the unordered list in the desktop menu. Parameter should indicate the main <ul> desktop menu.
      2. 190 | 191 |
    2. In the next step, enter the name of the active class in the desktop menu using the activeClass parameter.
      3. 192 | 193 |
    3. You can add the footer of the mobile menu using the footer parameter, which should indicate the container <div id="ma5menu-tools" class="ma5menu__tools">...</div> containing the content for the footer.
      4. 194 | 195 |
    4. By using the position parameter ('left' / 'right'), you can set the left or right position for the mobile menu.
      5. 196 | 197 |
    5. The closeOnBodyClick parameter (true / false) automatically closes the menu after clicking outside the menu area.
      6. 198 |
    199 | 
    <script>
200 | $(document).ready(function () {
201 |     ma5menu({
202 |         menu: '.site-menu',
203 |         activeClass: 'active',
204 |         footer: '#ma5menu-tools',
205 |         position: 'left',
206 |         closeOnBodyClick: true
207 |     });
208 | });
209 | </script>
    210 |

    In last step add to page menu toggle button.

    211 | 
    <button class="ma5menu__toggle" type="button">
212 |     <span class="ma5menu__icon-toggle"></span><span class="ma5menu__sr-only">Menu</span>
213 | </button>
    214 | 215 |

    Example

    216 | 
    <!DOCTYPE html>
217 | <html lang='en'>
218 |     <head>
219 |         <meta charset="utf-8">
220 |         <title>MA5 mobile menu</title>
221 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
222 |         <meta name="MobileOptimized" content="width">
223 |         <meta name="HandheldFriendly" content="true">
224 |         <meta http-equiv="x-ua-compatible" content="IE=edge">
225 | 
226 |         <!-- jQuery -->
227 |         <script src="./js/jquery.js"></script>
228 | 
229 |         <!-- ma5menu -->
230 |         <link href="./css/ma5-menu.min.css" rel="stylesheet" type="text/css">
231 |         <script src="./js/ma5-menu.min.js"></script>
232 | 
233 |         <!-- Call the script -->
234 |         <script>
235 |             $(document).ready(function () {
236 |                 ma5menu({
237 |                     menu: '.site-menu',
238 |                     activeClass: 'active',
239 |                     footer: '#ma5menu-tools',
240 |                     position: 'left',
241 |                     closeOnBodyClick: true
242 |                 });
243 |             });
244 |         </script>
245 |     </head>
246 |     <body>
247 | 
248 |         <!-- mobile menu toggle button start -->
249 |         <button class="ma5menu__toggle" type="button">
250 |             <span class="ma5menu__icon-toggle"></span><span class="ma5menu__sr-only">Menu</span>
251 |         </button>
252 |         <!-- mobile menu toggle button end -->
253 | 
254 |         <!-- source for mobile menu start -->
255 |         <ul class="site-menu">
256 |             <li>
257 |                 <a href="index-page.html">Shop</a>
258 |                 <ul>
259 |                     <li><a href="index-page.html">Products</a></li>
260 |                     <li>
261 |                         <a href="index-page.html">Collections</a>
262 |                         <ul>
263 |                             <li><a href="index-page.html">Premium</a></li>
264 |                             <li><a href="index-page.html">Common</a></li>
265 |                             <li>
266 |                                 <a href="index-page.html">Exclusive</a>
267 |                                 <ul>
268 |                                     <li><a href="index-page.html">First</a></li>
269 |                                     <li><a href="index-page.html">Secound</a></li>
270 |                                 </ul>
271 |                             </li>
272 |                             <li><a href="index-page.html">Other</a></li>
273 |                         </ul>
274 |                     </li>
275 |                     <li>
276 |                         <a href="index-page.html">Accesories</a>
277 |                         <ul>
278 |                             <li><a href="index-page.html">Small</a></li>
279 |                             <li><a href="index-page.html">Medium</a></li>
280 |                             <li><a href="index-page.html">Large</a></li>
281 |                         </ul>
282 |                     </li>
283 |                     <li><a href="index-page.html">Cards</a></li>
284 |                     <li>
285 |                         <a href="index-page.html">Sets</a>
286 |                         <ul>
287 |                             <li><a href="index-page.html">Example 1</a></li>
288 |                             <li><a href="index-page.html">Example 2</a></li>
289 |                             <li><a href="index-page.html">Example 3</a></li>
290 |                             <li class="active"><a href="index-page.html"><b>Example 4</b></a></li>
291 |                             <li><a href="index-page.html">Example 5</a></li>
292 |                         </ul>
293 |                     </li>
294 |                 </ul>
295 |             </li>
296 |             <li>
297 |                 <a href="index-page.html">Lookbook</a>
298 |                 <ul>
299 |                     <li><a href="index-page.html">For business</a></li>
300 |                     <li><a href="index-page.html">Premium Area</a></li>
301 |                 </ul>
302 |             </li>
303 |             <li>
304 |                 <a href="index-page.html">Campaigns</a>
305 |                 <ul>
306 |                     <li>
307 |                         <a href="index-page.html">Summer 2019</a>
308 |                         <ul>
309 |                             <li><a href="index-page.html">Winter 2018</a></li>
310 |                             <li><a href="index-page.html">Spring 2017</a></li>
311 |                         </ul>
312 | 
313 |                     </li>
314 |                 </ul>
315 |             </li>
316 |             <li>
317 |                 <a href="index-page.html">Brand</a>
318 |                 <ul>
319 |                     <li><a href="index-page.html">About us</a></li>
320 |                     <li><a href="index-page.html">Press</a></li>
321 |                 </ul>
322 |             </li>
323 |             <li><a href="index-page.html">Contact</a></li>
324 |         </ul>
325 |         <!-- source for mobile menu end -->
326 | 
327 |         <!-- source for mobile menu footer start -->
328 |         <div id="ma5menu-tools" class="ma5menu__tools">
329 |             footer <a href="index-page.html">content</a> here
330 |         </div>
331 |         <!-- source for mobile menu footer end -->
332 |     </body>
333 | </html>
    334 | 335 |
    336 | 337 | 338 | 339 | 340 | -------------------------------------------------------------------------------- /css/ma5-menu.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * MA5-mobile-menu 3 | * v 4.0.0 4 | * Copyright (c) 2016 Tomasz Kalinowski 5 | * GitHub: https://github.com/ma-5/ma5-mobile-menu 6 | */.ma5menu{display:none;box-sizing:border-box}.ma5menu *,.ma5menu *:after,.ma5menu *:before{box-sizing:border-box}.ma5menu--active .ma5menu__page{margin-right:-17px;height:100%;overflow:hidden;-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0);transition:-webkit-transform 0.3s ease-out 0s;-o-transition:transform 0.3s ease-out 0s;transition:transform 0.3s ease-out 0s;transition:transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s}@media (min-width: 768px){.ma5menu--active .ma5menu__page{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}}.ma5menu>ul{display:none}.ma5menu__head{padding:0 5px;border-bottom:1px solid #0c589e;height:60px;text-align:center;color:#fff;background-color:transparent;position:relative}.ma5menu__header{line-height:35px;color:#fff;background-color:transparent}.ma5menu__header a{color:#ffc107}.ma5menu__header a:hover{color:#ffc107}.ma5menu__close{position:absolute;top:50%;left:50%;width:24px;height:24px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#fff;background-color:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E");background-size:24px 24px;background-position:50% 50%}.ma5menu__toggle:hover .ma5menu__close{color:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E");background-color:transparent}.ma5menu__logo{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#fff;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%206l-3.75%205%202.85%203.8-1.6%201.2C9.81%2013.75%207%2010%207%2010l-6%208h22L14%206z%22/%3E%3C/svg%3E");background-size:40px 40px;background-position:50% 50%}.ma5menu__home:hover .ma5menu__logo{color:#ffc107}.ma5menu__home{font-weight:700;color:inherit}.ma5menu__tools{display:none}.ma5menu__footer .ma5menu__tools{display:block}.ma5menu__footer{padding:20px 20px 30px 20px;text-align:center;color:rgba(255,255,255,0.6);background-color:transparent;text-transform:none}.ma5menu__footer a{color:#ffc107}.ma5menu__footer a:hover{color:#ffc107}.ma5menu__toggle{cursor:pointer;color:#fff;background-color:#0e65b6;-ms-touch-action:manipulation;touch-action:manipulation;width:52px;height:38px;position:relative;display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;font-weight:400;padding:8px 12px;border-radius:4px;-o-transition:box-shadow .15s ease-in-out;transition:box-shadow .15s ease-in-out}.ma5menu__toggle:hover{color:#fff;background-color:#ef6c00}.ma5menu__header .ma5menu__toggle{position:absolute;top:0;width:60px;height:60px;color:#fff;background-color:transparent}.ma5menu__header .ma5menu__toggle:hover{color:#ffc107;background-color:transparent}.ma5menu--left .ma5menu__header .ma5menu__toggle{right:0}.ma5menu--right .ma5menu__header .ma5menu__toggle{left:0}.ma5menu__icon-toggle{display:inline-block;position:absolute;margin:auto;top:-100%;bottom:-100%;left:-100%;right:-100%;vertical-align:top;width:24px;height:24px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22/%3E%3C/svg%3E");background-position:50% 50%;background-size:100% 100%;background-repeat:no-repeat}.ma5menu__icon-up{margin:0;width:44px;height:44px;display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);background-repeat:no-repeat;background-position:50% 50%;background-size:24px 24px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22/%3E%3C/svg%3E")}.ma5menu__alert{display:block;text-align:center;width:280px;height:50px;bottom:0;left:0;position:absolute;overflow:hidden;z-index:500;-webkit-transform:translateZ(0);transform:translateZ(0);background-image:-o-linear-gradient(top, rgba(14,101,182,0) 0%, #0e65b6 50%);background-image:linear-gradient(to bottom, rgba(14,101,182,0) 0%, #0e65b6 50%);background-repeat:no-repeat;background-size:100% 100%;background-position:0 50px;-o-transition:background-position .4s ease-in .3s;transition:background-position .4s ease-in .3s;will-change:auto;pointer-events:none}@media (min-width: 768px){.ma5menu__alert{width:360px}}.ma5menu__container--scroll .ma5menu__alert{background-position:0 0;-o-transition:background-position .4s ease-out;transition:background-position .4s ease-out;pointer-events:auto}.ma5menu__alert-content{width:150px;height:40px;position:absolute;bottom:-40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-o-transition:bottom .4s ease-in;transition:bottom .4s ease-in}.ma5menu__container--scroll .ma5menu__alert-content{bottom:0;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-duration:0.6s;animation-duration:0.6s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ma5-arrowDown;animation-name:ma5-arrowDown;-o-transition:bottom .4s ease-out .4s;transition:bottom .4s ease-out .4s}.ma5menu__container{-o-transition:none !important;transition:none !important;position:fixed;background-color:#0e65b6;height:100%;top:0;line-height:19px;overflow:hidden;border:none;z-index:10000;box-shadow:0 0 12px rgba(0,0,0,0.14)}@media (max-width: 767px){.ma5menu__container{width:280px}}@media (min-width: 768px){.ma5menu__container{width:360px}}.ma5menu--left .ma5menu__container{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0);left:0}.ma5menu--right .ma5menu__container{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0);right:-280px}.ma5menu--ready.ma5menu--left .ma5menu__container{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie.ma5menu--ready.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOut;animation-name:ma5menuOut}.ie.ma5menu--ready.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOutIEphone;animation-name:ma5menuOutIEphone}@media (min-width: 768px){.ie.ma5menu--ready.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOutIEtablet;animation-name:ma5menuOutIEtablet}}.ma5menu--ready.ma5menu--right .ma5menu__container{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie.ma5menu--ready.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuOutB;animation-name:ma5menuOutB}.ie.ma5menu--ready.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuOutBIEphone;animation-name:ma5menuOutBIEphone}@media (min-width: 768px){.ie.ma5menu--ready.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuOutBIEtablet;animation-name:ma5menuOutBIEtablet}}.ma5menu--active.ma5menu--left .ma5menu__container{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie.ma5menu--active.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOutB;animation-name:ma5menuOutB}.ie.ma5menu--active.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOutBIEphone;animation-name:ma5menuOutBIEphone}@media (min-width: 768px){.ie.ma5menu--active.ma5menu--left .ma5menu__container{-webkit-animation-name:ma5menuOutBIEtablet;animation-name:ma5menuOutBIEtablet}}.ma5menu--active.ma5menu--right .ma5menu__container{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie.ma5menu--active.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuIn;animation-name:ma5menuIn}.ie.ma5menu--active.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuInIEphone;animation-name:ma5menuInIEphone}@media (min-width: 768px){.ie.ma5menu--active.ma5menu--right .ma5menu__container{-webkit-animation-name:ma5menuInIEtablet;animation-name:ma5menuInIEtablet}}@media (min-width: 768px){.ma5menu--left .ma5menu__container{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0);padding:0;left:0}}@media (min-width: 768px){.ma5menu--right .ma5menu__container{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0);right:-360px}}.safari .ma5menu__container{height:100%}.preload .ma5menu__container{opacity:0;z-index:-1}.ma5menu__panel{display:none;width:280px;height:80%;height:calc(100% - 60px);position:absolute;overflow:hidden;overflow-y:auto;top:60px;left:0;margin:0;padding:0;list-style-type:none;z-index:100;color:rgba(255,255,255,0.1);background-color:#0e65b6;scrollbar-color:#0a4b87 #0e65b6;scrollbar-width:thin}@media (min-width: 768px){.ma5menu__panel{width:360px}}.ma5menu__panel.has-scrollbar{overflow:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.ma5menu__panel:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.4)}.ma5menu__panel::-webkit-scrollbar{width:9px;background-color:#0d60ad}.ma5menu__panel::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.15);outline:none;border-right:3px solid #0d60ad}.ma5menu__panel:first-of-type{z-index:160}.ma5menu__panel--parent-leave,.ma5menu__panel--parent-enter{z-index:180;display:block}.ma5menu__panel--active-leave,.ma5menu__panel--active-enter{z-index:190;display:block}.ma5menu__panel--active-enter{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie .ma5menu__panel--active-enter{-webkit-animation-name:ma5-panelIn;animation-name:ma5-panelIn}.ie .ma5menu__panel--active-enter{-webkit-animation-name:ma5-panelInIEphone;animation-name:ma5-panelInIEphone}@media (min-width: 768px){.ie .ma5menu__panel--active-enter{-webkit-animation-name:ma5-panelInIEtablet;animation-name:ma5-panelInIEtablet}}.ma5menu__panel--active-leave{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie .ma5menu__panel--active-leave{-webkit-animation-name:ma5-panelOut;animation-name:ma5-panelOut}.ie .ma5menu__panel--active-leave{-webkit-animation-name:ma5-panelOutIEphone;animation-name:ma5-panelOutIEphone}@media (min-width: 768px){.ie .ma5menu__panel--active-leave{-webkit-animation-name:ma5-panelOutIEtablet;animation-name:ma5-panelOutIEtablet}}.ma5menu__panel--parent-enter{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie .ma5menu__panel--parent-enter{-webkit-animation-name:ma5menuOut;animation-name:ma5menuOut}.ie .ma5menu__panel--parent-enter{-webkit-animation-name:ma5menuOutIEphone;animation-name:ma5menuOutIEphone}@media (min-width: 768px){.ie .ma5menu__panel--parent-enter{-webkit-animation-name:ma5menuOutIEtablet;animation-name:ma5menuOutIEtablet}}.ma5menu__panel--parent-leave{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.noie .ma5menu__panel--parent-leave{-webkit-animation-name:ma5menuOutB;animation-name:ma5menuOutB}.ie .ma5menu__panel--parent-leave{-webkit-animation-name:ma5menuOutBIEphone;animation-name:ma5menuOutBIEphone}@media (min-width: 768px){.ie .ma5menu__panel--parent-leave{-webkit-animation-name:ma5menuOutBIEtablet;animation-name:ma5menuOutBIEtablet}}.ma5menu__panel.lvl-0{text-transform:uppercase}.ma5menu__panel.lvl-1{text-transform:none}.ma5menu__panel>ul{margin:0;padding:0}.ma5menu__panel>ul li{position:relative;font-size:0;padding-right:0;margin-bottom:0;line-height:0}.ma5menu__panel>ul li:first-of-type{border-top:1px solid rgba(255,255,255,0.3)}.ma5menu__panel>ul li a,.ma5menu__panel>ul li .ma5menu__category{display:inline-block;vertical-align:top;text-decoration:none !important;width:100%;outline:none !important;border-bottom:1px solid rgba(255,255,255,0.3);pointer-events:none;letter-spacing:.3px;-o-transition:color .3s ease-out, background-color .3s ease-out;transition:color .3s ease-out, background-color .3s ease-out;padding:15px 20px 15px 20px;font-size:15px;line-height:19px;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation;min-height:50px}.ma5menu__panel>ul li a{color:#fff;background-color:transparent}.ma5menu__panel>ul li a:hover{color:#ffc107;background-color:transparent;-o-transition:none;transition:none}.ma5menu__panel>ul li .ma5menu__category{position:relative;text-align:left;background-position:calc(100% - 13px) 50%;color:#fff;background-color:transparent}.ma5menu__panel>ul li .ma5menu__category:hover{color:#ffc107;background-color:transparent;-o-transition:none;transition:none}.ma5menu__panel>ul li .ma5menu__category.ma5menu__path{color:#ffc107 !important;background-color:transparent !important}.ma5menu__panel>ul li .ma5menu__category.ma5menu__path:hover{color:#ffc107 !important;background-color:transparent !important;-o-transition:none;transition:none}.ma5menu__panel>ul li>.ma5menu__btn--enter+a{padding-right:60px;margin-right:-50px}.ma5menu__panel--active{z-index:170;display:block}.ma5menu__panel--active>ul li a,.ma5menu__panel--active>ul li .ma5menu__category{pointer-events:auto}.ma5menu__btn--enter,.ma5menu__btn--leave{font-size:13px;cursor:pointer;display:block;position:absolute;padding:0;top:0;height:100%;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;background-repeat:no-repeat;background-position:50% 50%;background-size:24px 24px;-o-transition:background-color 0.3s ease-out;transition:background-color 0.3s ease-out}.ma5menu__btn--enter:hover,.ma5menu__btn--leave:hover{-o-transition:none;transition:none}.ma5menu__btn--enter{z-index:0;left:auto;right:0;color:#fff;background-color:rgba(255,255,255,0.1);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E");width:50px}.ma5menu__btn--enter:hover{color:#ffc107;background-color:rgba(255,255,255,0.3);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E")}.ma5menu__btn--enter:before{content:"";display:block;width:1px;position:absolute;top:3px;bottom:3px;left:-2px;background-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}.ma5menu__btn--leave{left:0;right:auto;color:#fff;background-color:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E");width:50px}.ma5menu__btn--leave:hover{color:#ffc107;background-color:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E")}.ma5menu__leave:hover .ma5menu__btn--leave{color:#ffc107;background-color:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E")}.ma5menu__btn--leave:before{content:"";display:block;width:1px;position:absolute;top:0;bottom:0;right:-2px;background-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}.ma5menu__leave{font-size:15px;color:#fff;background-color:rgba(255,255,255,0.1);cursor:pointer;display:block;position:relative;padding:0 44px 0 44px;text-align:center;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;width:100%;border-bottom:1px solid rgba(255,255,255,0.3);height:50px;line-height:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:-44px}.ma5menu__leave:hover{color:#ffc107;background-color:rgba(255,255,255,0.1)}.ma5menu__leave+.ma5menu__btn--enter{bottom:0;height:calc(100% - 50px);top:auto}.ma5menu__path{color:#ffc107 !important;background-color:transparent !important}.ma5menu--overflow{overflow-x:hidden !important}.ma5menu--left:before,.ma5menu--right:before{content:"";display:block;height:100%;position:fixed;top:0;background-color:rgba(255,255,255,0.01);z-index:-1;-o-transition:background-color 0.4s ease-out 0.5s, z-index 0.8s linear;transition:background-color 0.4s ease-out 0.5s, z-index 0.8s linear;width:100%}.ma5menu--active:before{background-color:rgba(255,255,255,0.6);-o-transition:background-color 0.4s ease-in;transition:background-color 0.4s ease-in;z-index:9000}.ma5menu--active>body .container *{-ms-touch-action:none;touch-action:none;pointer-events:none}@media (max-width: 767px){.ma5menu--active>body *{pointer-events:none}.ma5menu--active>body .ma5menu__toggle{pointer-events:auto}.ma5menu--active>body .ma5menu__toggle *{pointer-events:auto}.ma5menu--active>body .ma5menu__container{pointer-events:auto}.ma5menu--active>body .ma5menu__container *{pointer-events:auto}.ma5menu--active>body .ma5menu__container .ma5menu__alert{pointer-events:none}.ma5menu--active>body .ma5menu__container--scroll{pointer-events:auto}}@media (max-width: 1199px){.ma5menu--active.has-body-scrollbar{overflow:hidden;overflow-y:scroll;height:auto;min-height:100%;-webkit-overflow-scrolling:touch}}.ma5menu--active.ma5menu--left:before{right:0}.ma5menu--active.ma5menu--right:before{left:0}.ma5menu--swipe{position:relative;overflow-x:hidden !important}.ma5menu--swipe body{position:relative}.ma5menu--swipe.ma5menu--left body{-o-transition:left 0.5s ease-out;transition:left 0.5s ease-out;left:0}.ma5menu--swipe.ma5menu--right body{-o-transition:right 0.5s ease-out;transition:right 0.5s ease-out;right:0}.ma5menu--swipe.ma5menu--active.ma5menu--left body{left:280px}@media (min-width: 768px){.ma5menu--swipe.ma5menu--active.ma5menu--left body{left:360px}}.ma5menu--swipe.ma5menu--active.ma5menu--right body{right:280px}@media (min-width: 768px){.ma5menu--swipe.ma5menu--active.ma5menu--right body{right:360px}}.ma5menu__sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0}@-webkit-keyframes ma5-panelIn{0%{-webkit-transform:translate3d(280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@keyframes ma5-panelIn{0%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-panelOut{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(280px, 0, 0)}}@keyframes ma5-panelOut{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}}@-webkit-keyframes ma5menuIn{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0)}}@keyframes ma5menuIn{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@-webkit-keyframes ma5menuOut{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0)}}@keyframes ma5menuOut{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@-webkit-keyframes ma5menuOutB{0%{-webkit-transform:translate3d(-280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@keyframes ma5menuOutB{0%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (min-width: 768px){@-webkit-keyframes ma5-panelIn{0%{-webkit-transform:translate3d(360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@keyframes ma5-panelIn{0%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-panelOut{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(360px, 0, 0)}}@keyframes ma5-panelOut{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}}@-webkit-keyframes ma5menuIn{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0)}}@keyframes ma5menuIn{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}}@-webkit-keyframes ma5menuOut{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0)}}@keyframes ma5menuOut{0%{-webkit-transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0)}}@-webkit-keyframes ma5menuOutB{0%{-webkit-transform:translate3d(-360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0)}}@keyframes ma5menuOutB{0%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}}@-webkit-keyframes ma5-panelInIEphone{0%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes ma5-panelInIEphone{0%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-panelOutIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}}@keyframes ma5-panelOutIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(280px, 0, 0);transform:translate3d(280px, 0, 0)}}@-webkit-keyframes ma5menuInIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@keyframes ma5menuInIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@-webkit-keyframes ma5menuOutIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@keyframes ma5menuOutIEphone{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}}@-webkit-keyframes ma5menuOutBIEphone{0%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes ma5menuOutBIEphone{0%{-webkit-transform:translate3d(-280px, 0, 0);transform:translate3d(-280px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-panelInIEtablet{0%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes ma5-panelInIEtablet{0%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-panelOutIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}}@keyframes ma5-panelOutIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(360px, 0, 0);transform:translate3d(360px, 0, 0)}}@-webkit-keyframes ma5menuInIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}}@keyframes ma5menuInIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}}@-webkit-keyframes ma5menuOutIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}}@keyframes ma5menuOutIEtablet{0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}100%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}}@-webkit-keyframes ma5menuOutBIEtablet{0%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes ma5menuOutBIEtablet{0%{-webkit-transform:translate3d(-360px, 0, 0);transform:translate3d(-360px, 0, 0)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes ma5-arrowDown{0%{opacity:1}40%{opacity:0}60%{opacity:0.5}100%{opacity:1}}@keyframes ma5-arrowDown{0%{opacity:1}40%{opacity:0}60%{opacity:0.5}100%{opacity:1}} 7 | -------------------------------------------------------------------------------- /css/ma5-menu.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * MA5-mobile-menu 3 | * v 4.0.0 4 | * Copyright (c) 2016 Tomasz Kalinowski 5 | * GitHub: https://github.com/ma-5/ma5-mobile-menu 6 | */ 7 | .ma5menu { 8 | display: none; 9 | box-sizing: border-box; 10 | } 11 | 12 | .ma5menu *, .ma5menu *:after, .ma5menu *:before { 13 | box-sizing: border-box; 14 | } 15 | 16 | .ma5menu--active .ma5menu__page { 17 | margin-right: -17px; 18 | height: 100%; 19 | overflow: hidden; 20 | -webkit-transform: translate3d(280px, 0, 0); 21 | transform: translate3d(280px, 0, 0); 22 | transition: -webkit-transform 0.3s ease-out 0s; 23 | -o-transition: transform 0.3s ease-out 0s; 24 | transition: transform 0.3s ease-out 0s; 25 | transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; 26 | } 27 | 28 | @media (min-width: 768px) { 29 | .ma5menu--active .ma5menu__page { 30 | -webkit-transform: translate3d(360px, 0, 0); 31 | transform: translate3d(360px, 0, 0); 32 | } 33 | } 34 | 35 | .ma5menu > ul { 36 | display: none; 37 | } 38 | 39 | .ma5menu__head { 40 | padding: 0 5px; 41 | border-bottom: 1px solid #0c589e; 42 | height: 60px; 43 | text-align: center; 44 | color: #ffffff; 45 | background-color: transparent; 46 | position: relative; 47 | } 48 | 49 | .ma5menu__header { 50 | line-height: 35px; 51 | color: #ffffff; 52 | background-color: transparent; 53 | } 54 | 55 | .ma5menu__header a { 56 | color: #ffc107; 57 | } 58 | 59 | .ma5menu__header a:hover { 60 | color: #ffc107; 61 | } 62 | 63 | .ma5menu__close { 64 | position: absolute; 65 | top: 50%; 66 | left: 50%; 67 | width: 24px; 68 | height: 24px; 69 | -webkit-transform: translate(-50%, -50%); 70 | transform: translate(-50%, -50%); 71 | color: #ffffff; 72 | background-color: transparent; 73 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E"); 74 | background-size: 24px 24px; 75 | background-position: 50% 50%; 76 | } 77 | 78 | .ma5menu__toggle:hover .ma5menu__close { 79 | color: transparent; 80 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E"); 81 | background-color: transparent; 82 | } 83 | 84 | .ma5menu__logo { 85 | position: absolute; 86 | top: 50%; 87 | left: 50%; 88 | -webkit-transform: translate(-50%, -50%); 89 | transform: translate(-50%, -50%); 90 | color: #ffffff; 91 | width: 40px; 92 | height: 40px; 93 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%206l-3.75%205%202.85%203.8-1.6%201.2C9.81%2013.75%207%2010%207%2010l-6%208h22L14%206z%22/%3E%3C/svg%3E"); 94 | background-size: 40px 40px; 95 | background-position: 50% 50%; 96 | } 97 | 98 | .ma5menu__home:hover .ma5menu__logo { 99 | color: #ffc107; 100 | } 101 | 102 | .ma5menu__home { 103 | font-weight: 700; 104 | color: inherit; 105 | } 106 | 107 | .ma5menu__tools { 108 | display: none; 109 | } 110 | 111 | .ma5menu__footer .ma5menu__tools { 112 | display: block; 113 | } 114 | 115 | .ma5menu__footer { 116 | padding: 20px 20px 30px 20px; 117 | text-align: center; 118 | color: rgba(255, 255, 255, 0.6); 119 | background-color: transparent; 120 | text-transform: none; 121 | } 122 | 123 | .ma5menu__footer a { 124 | color: #ffc107; 125 | } 126 | 127 | .ma5menu__footer a:hover { 128 | color: #ffc107; 129 | } 130 | 131 | .ma5menu__toggle { 132 | cursor: pointer; 133 | color: #ffffff; 134 | background-color: #0e65b6; 135 | -ms-touch-action: manipulation; 136 | touch-action: manipulation; 137 | width: 52px; 138 | height: 38px; 139 | position: relative; 140 | display: inline-block; 141 | text-align: center; 142 | white-space: nowrap; 143 | vertical-align: middle; 144 | -webkit-user-select: none; 145 | -moz-user-select: none; 146 | -ms-user-select: none; 147 | user-select: none; 148 | border: none; 149 | font-weight: 400; 150 | padding: 8px 12px; 151 | border-radius: 4px; 152 | -o-transition: box-shadow .15s ease-in-out; 153 | transition: box-shadow .15s ease-in-out; 154 | } 155 | 156 | .ma5menu__toggle:hover { 157 | color: #ffffff; 158 | background-color: #ef6c00; 159 | } 160 | 161 | .ma5menu__header .ma5menu__toggle { 162 | position: absolute; 163 | top: 0; 164 | width: 60px; 165 | height: 60px; 166 | color: #ffffff; 167 | background-color: transparent; 168 | } 169 | 170 | .ma5menu__header .ma5menu__toggle:hover { 171 | color: #ffc107; 172 | background-color: transparent; 173 | } 174 | 175 | .ma5menu--left .ma5menu__header .ma5menu__toggle { 176 | right: 0; 177 | } 178 | 179 | .ma5menu--right .ma5menu__header .ma5menu__toggle { 180 | left: 0; 181 | } 182 | 183 | .ma5menu__icon-toggle { 184 | display: inline-block; 185 | position: absolute; 186 | margin: auto; 187 | top: -100%; 188 | bottom: -100%; 189 | left: -100%; 190 | right: -100%; 191 | vertical-align: top; 192 | width: 24px; 193 | height: 24px; 194 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22/%3E%3C/svg%3E"); 195 | background-position: 50% 50%; 196 | background-size: 100% 100%; 197 | background-repeat: no-repeat; 198 | } 199 | 200 | .ma5menu__icon-up { 201 | margin: 0; 202 | width: 44px; 203 | height: 44px; 204 | display: inline-block; 205 | -webkit-transform: translateZ(0); 206 | transform: translateZ(0); 207 | background-repeat: no-repeat; 208 | background-position: 50% 50%; 209 | background-size: 24px 24px; 210 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22/%3E%3C/svg%3E"); 211 | } 212 | 213 | .ma5menu__alert { 214 | display: block; 215 | text-align: center; 216 | width: 280px; 217 | height: 50px; 218 | bottom: 0; 219 | left: 0; 220 | position: absolute; 221 | overflow: hidden; 222 | z-index: 500; 223 | -webkit-transform: translateZ(0); 224 | transform: translateZ(0); 225 | background-image: -o-linear-gradient(top, rgba(14, 101, 182, 0) 0%, #0e65b6 50%); 226 | background-image: linear-gradient(to bottom, rgba(14, 101, 182, 0) 0%, #0e65b6 50%); 227 | background-repeat: no-repeat; 228 | background-size: 100% 100%; 229 | background-position: 0 50px; 230 | -o-transition: background-position .4s ease-in .3s; 231 | transition: background-position .4s ease-in .3s; 232 | will-change: auto; 233 | pointer-events: none; 234 | } 235 | 236 | @media (min-width: 768px) { 237 | .ma5menu__alert { 238 | width: 360px; 239 | } 240 | } 241 | 242 | .ma5menu__container--scroll .ma5menu__alert { 243 | background-position: 0 0; 244 | -o-transition: background-position .4s ease-out; 245 | transition: background-position .4s ease-out; 246 | pointer-events: auto; 247 | } 248 | 249 | .ma5menu__alert-content { 250 | width: 150px; 251 | height: 40px; 252 | position: absolute; 253 | bottom: -40px; 254 | left: 50%; 255 | -webkit-transform: translateX(-50%); 256 | transform: translateX(-50%); 257 | -o-transition: bottom .4s ease-in; 258 | transition: bottom .4s ease-in; 259 | } 260 | 261 | .ma5menu__container--scroll .ma5menu__alert-content { 262 | bottom: 0; 263 | -webkit-animation-timing-function: linear; 264 | animation-timing-function: linear; 265 | -webkit-animation-iteration-count: 3; 266 | animation-iteration-count: 3; 267 | -webkit-animation-duration: 0.6s; 268 | animation-duration: 0.6s; 269 | -webkit-animation-delay: 1s; 270 | animation-delay: 1s; 271 | -webkit-animation-fill-mode: both; 272 | animation-fill-mode: both; 273 | -webkit-animation-name: ma5-arrowDown; 274 | animation-name: ma5-arrowDown; 275 | -o-transition: bottom .4s ease-out .4s; 276 | transition: bottom .4s ease-out .4s; 277 | } 278 | 279 | .ma5menu__container { 280 | -o-transition: none !important; 281 | transition: none !important; 282 | position: fixed; 283 | background-color: #0e65b6; 284 | height: 100%; 285 | top: 0; 286 | line-height: 19px; 287 | overflow: hidden; 288 | border: none; 289 | z-index: 10000; 290 | box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); 291 | } 292 | 293 | @media (max-width: 767px) { 294 | .ma5menu__container { 295 | width: 280px; 296 | } 297 | } 298 | 299 | @media (min-width: 768px) { 300 | .ma5menu__container { 301 | width: 360px; 302 | } 303 | } 304 | 305 | .ma5menu--left .ma5menu__container { 306 | -webkit-transform: translate3d(-280px, 0, 0); 307 | transform: translate3d(-280px, 0, 0); 308 | left: 0; 309 | } 310 | 311 | .ma5menu--right .ma5menu__container { 312 | -webkit-transform: translate3d(280px, 0, 0); 313 | transform: translate3d(280px, 0, 0); 314 | right: -280px; 315 | } 316 | 317 | .ma5menu--ready.ma5menu--left .ma5menu__container { 318 | -webkit-animation-timing-function: ease-out; 319 | animation-timing-function: ease-out; 320 | -webkit-animation-duration: 0.5s; 321 | animation-duration: 0.5s; 322 | -webkit-animation-delay: 0s; 323 | animation-delay: 0s; 324 | -webkit-animation-fill-mode: both; 325 | animation-fill-mode: both; 326 | } 327 | 328 | .noie.ma5menu--ready.ma5menu--left .ma5menu__container { 329 | -webkit-animation-name: ma5menuOut; 330 | animation-name: ma5menuOut; 331 | } 332 | 333 | .ie.ma5menu--ready.ma5menu--left .ma5menu__container { 334 | -webkit-animation-name: ma5menuOutIEphone; 335 | animation-name: ma5menuOutIEphone; 336 | } 337 | 338 | @media (min-width: 768px) { 339 | .ie.ma5menu--ready.ma5menu--left .ma5menu__container { 340 | -webkit-animation-name: ma5menuOutIEtablet; 341 | animation-name: ma5menuOutIEtablet; 342 | } 343 | } 344 | 345 | .ma5menu--ready.ma5menu--right .ma5menu__container { 346 | -webkit-animation-timing-function: ease-out; 347 | animation-timing-function: ease-out; 348 | -webkit-animation-duration: 0.5s; 349 | animation-duration: 0.5s; 350 | -webkit-animation-delay: 0s; 351 | animation-delay: 0s; 352 | -webkit-animation-fill-mode: both; 353 | animation-fill-mode: both; 354 | } 355 | 356 | .noie.ma5menu--ready.ma5menu--right .ma5menu__container { 357 | -webkit-animation-name: ma5menuOutB; 358 | animation-name: ma5menuOutB; 359 | } 360 | 361 | .ie.ma5menu--ready.ma5menu--right .ma5menu__container { 362 | -webkit-animation-name: ma5menuOutBIEphone; 363 | animation-name: ma5menuOutBIEphone; 364 | } 365 | 366 | @media (min-width: 768px) { 367 | .ie.ma5menu--ready.ma5menu--right .ma5menu__container { 368 | -webkit-animation-name: ma5menuOutBIEtablet; 369 | animation-name: ma5menuOutBIEtablet; 370 | } 371 | } 372 | 373 | .ma5menu--active.ma5menu--left .ma5menu__container { 374 | -webkit-animation-timing-function: ease-out; 375 | animation-timing-function: ease-out; 376 | -webkit-animation-duration: 0.5s; 377 | animation-duration: 0.5s; 378 | -webkit-animation-delay: 0s; 379 | animation-delay: 0s; 380 | -webkit-animation-fill-mode: both; 381 | animation-fill-mode: both; 382 | } 383 | 384 | .noie.ma5menu--active.ma5menu--left .ma5menu__container { 385 | -webkit-animation-name: ma5menuOutB; 386 | animation-name: ma5menuOutB; 387 | } 388 | 389 | .ie.ma5menu--active.ma5menu--left .ma5menu__container { 390 | -webkit-animation-name: ma5menuOutBIEphone; 391 | animation-name: ma5menuOutBIEphone; 392 | } 393 | 394 | @media (min-width: 768px) { 395 | .ie.ma5menu--active.ma5menu--left .ma5menu__container { 396 | -webkit-animation-name: ma5menuOutBIEtablet; 397 | animation-name: ma5menuOutBIEtablet; 398 | } 399 | } 400 | 401 | .ma5menu--active.ma5menu--right .ma5menu__container { 402 | -webkit-animation-timing-function: ease-out; 403 | animation-timing-function: ease-out; 404 | -webkit-animation-duration: 0.5s; 405 | animation-duration: 0.5s; 406 | -webkit-animation-delay: 0s; 407 | animation-delay: 0s; 408 | -webkit-animation-fill-mode: both; 409 | animation-fill-mode: both; 410 | } 411 | 412 | .noie.ma5menu--active.ma5menu--right .ma5menu__container { 413 | -webkit-animation-name: ma5menuIn; 414 | animation-name: ma5menuIn; 415 | } 416 | 417 | .ie.ma5menu--active.ma5menu--right .ma5menu__container { 418 | -webkit-animation-name: ma5menuInIEphone; 419 | animation-name: ma5menuInIEphone; 420 | } 421 | 422 | @media (min-width: 768px) { 423 | .ie.ma5menu--active.ma5menu--right .ma5menu__container { 424 | -webkit-animation-name: ma5menuInIEtablet; 425 | animation-name: ma5menuInIEtablet; 426 | } 427 | } 428 | 429 | @media (min-width: 768px) { 430 | .ma5menu--left .ma5menu__container { 431 | -webkit-transform: translate3d(-360px, 0, 0); 432 | transform: translate3d(-360px, 0, 0); 433 | padding: 0; 434 | left: 0; 435 | } 436 | } 437 | 438 | @media (min-width: 768px) { 439 | .ma5menu--right .ma5menu__container { 440 | -webkit-transform: translate3d(360px, 0, 0); 441 | transform: translate3d(360px, 0, 0); 442 | right: -360px; 443 | } 444 | } 445 | 446 | .safari .ma5menu__container { 447 | height: 100%; 448 | } 449 | 450 | .preload .ma5menu__container { 451 | opacity: 0; 452 | z-index: -1; 453 | } 454 | 455 | .ma5menu__panel { 456 | display: none; 457 | width: 280px; 458 | height: 80%; 459 | height: calc(100% - 60px); 460 | position: absolute; 461 | overflow: hidden; 462 | overflow-y: auto; 463 | top: 60px; 464 | left: 0; 465 | margin: 0; 466 | padding: 0; 467 | list-style-type: none; 468 | z-index: 100; 469 | color: rgba(255, 255, 255, 0.1); 470 | background-color: #0e65b6; 471 | scrollbar-color: #0a4b87 #0e65b6; 472 | scrollbar-width: thin; 473 | } 474 | 475 | @media (min-width: 768px) { 476 | .ma5menu__panel { 477 | width: 360px; 478 | } 479 | } 480 | 481 | .ma5menu__panel.has-scrollbar { 482 | overflow: hidden; 483 | overflow-y: scroll; 484 | -webkit-overflow-scrolling: touch; 485 | } 486 | 487 | .ma5menu__panel:hover::-webkit-scrollbar-thumb { 488 | background-color: rgba(255, 255, 255, 0.4); 489 | } 490 | 491 | .ma5menu__panel::-webkit-scrollbar { 492 | width: 9px; 493 | background-color: #0d60ad; 494 | } 495 | 496 | .ma5menu__panel::-webkit-scrollbar-thumb { 497 | background-color: rgba(255, 255, 255, 0.15); 498 | outline: none; 499 | border-right: 3px solid #0d60ad; 500 | } 501 | 502 | .ma5menu__panel:first-of-type { 503 | z-index: 160; 504 | } 505 | 506 | .ma5menu__panel--parent-leave, .ma5menu__panel--parent-enter { 507 | z-index: 180; 508 | display: block; 509 | } 510 | 511 | .ma5menu__panel--active-leave, .ma5menu__panel--active-enter { 512 | z-index: 190; 513 | display: block; 514 | } 515 | 516 | .ma5menu__panel--active-enter { 517 | -webkit-animation-timing-function: ease-out; 518 | animation-timing-function: ease-out; 519 | -webkit-animation-duration: 0.5s; 520 | animation-duration: 0.5s; 521 | -webkit-animation-delay: 0s; 522 | animation-delay: 0s; 523 | -webkit-animation-fill-mode: both; 524 | animation-fill-mode: both; 525 | } 526 | 527 | .noie .ma5menu__panel--active-enter { 528 | -webkit-animation-name: ma5-panelIn; 529 | animation-name: ma5-panelIn; 530 | } 531 | 532 | .ie .ma5menu__panel--active-enter { 533 | -webkit-animation-name: ma5-panelInIEphone; 534 | animation-name: ma5-panelInIEphone; 535 | } 536 | 537 | @media (min-width: 768px) { 538 | .ie .ma5menu__panel--active-enter { 539 | -webkit-animation-name: ma5-panelInIEtablet; 540 | animation-name: ma5-panelInIEtablet; 541 | } 542 | } 543 | 544 | .ma5menu__panel--active-leave { 545 | -webkit-animation-timing-function: ease-out; 546 | animation-timing-function: ease-out; 547 | -webkit-animation-duration: 0.5s; 548 | animation-duration: 0.5s; 549 | -webkit-animation-delay: 0s; 550 | animation-delay: 0s; 551 | -webkit-animation-fill-mode: both; 552 | animation-fill-mode: both; 553 | } 554 | 555 | .noie .ma5menu__panel--active-leave { 556 | -webkit-animation-name: ma5-panelOut; 557 | animation-name: ma5-panelOut; 558 | } 559 | 560 | .ie .ma5menu__panel--active-leave { 561 | -webkit-animation-name: ma5-panelOutIEphone; 562 | animation-name: ma5-panelOutIEphone; 563 | } 564 | 565 | @media (min-width: 768px) { 566 | .ie .ma5menu__panel--active-leave { 567 | -webkit-animation-name: ma5-panelOutIEtablet; 568 | animation-name: ma5-panelOutIEtablet; 569 | } 570 | } 571 | 572 | .ma5menu__panel--parent-enter { 573 | -webkit-animation-timing-function: ease-out; 574 | animation-timing-function: ease-out; 575 | -webkit-animation-duration: 0.5s; 576 | animation-duration: 0.5s; 577 | -webkit-animation-delay: 0s; 578 | animation-delay: 0s; 579 | -webkit-animation-fill-mode: both; 580 | animation-fill-mode: both; 581 | } 582 | 583 | .noie .ma5menu__panel--parent-enter { 584 | -webkit-animation-name: ma5menuOut; 585 | animation-name: ma5menuOut; 586 | } 587 | 588 | .ie .ma5menu__panel--parent-enter { 589 | -webkit-animation-name: ma5menuOutIEphone; 590 | animation-name: ma5menuOutIEphone; 591 | } 592 | 593 | @media (min-width: 768px) { 594 | .ie .ma5menu__panel--parent-enter { 595 | -webkit-animation-name: ma5menuOutIEtablet; 596 | animation-name: ma5menuOutIEtablet; 597 | } 598 | } 599 | 600 | .ma5menu__panel--parent-leave { 601 | -webkit-animation-timing-function: ease-out; 602 | animation-timing-function: ease-out; 603 | -webkit-animation-duration: 0.5s; 604 | animation-duration: 0.5s; 605 | -webkit-animation-delay: 0s; 606 | animation-delay: 0s; 607 | -webkit-animation-fill-mode: both; 608 | animation-fill-mode: both; 609 | } 610 | 611 | .noie .ma5menu__panel--parent-leave { 612 | -webkit-animation-name: ma5menuOutB; 613 | animation-name: ma5menuOutB; 614 | } 615 | 616 | .ie .ma5menu__panel--parent-leave { 617 | -webkit-animation-name: ma5menuOutBIEphone; 618 | animation-name: ma5menuOutBIEphone; 619 | } 620 | 621 | @media (min-width: 768px) { 622 | .ie .ma5menu__panel--parent-leave { 623 | -webkit-animation-name: ma5menuOutBIEtablet; 624 | animation-name: ma5menuOutBIEtablet; 625 | } 626 | } 627 | 628 | .ma5menu__panel.lvl-0 { 629 | text-transform: uppercase; 630 | } 631 | 632 | .ma5menu__panel.lvl-1 { 633 | text-transform: none; 634 | } 635 | 636 | .ma5menu__panel > ul { 637 | margin: 0; 638 | padding: 0; 639 | } 640 | 641 | .ma5menu__panel > ul li { 642 | position: relative; 643 | font-size: 0; 644 | padding-right: 0; 645 | margin-bottom: 0; 646 | line-height: 0; 647 | } 648 | 649 | .ma5menu__panel > ul li:first-of-type { 650 | border-top: 1px solid rgba(255, 255, 255, 0.3); 651 | } 652 | 653 | .ma5menu__panel > ul li a, 654 | .ma5menu__panel > ul li .ma5menu__category { 655 | display: inline-block; 656 | vertical-align: top; 657 | text-decoration: none !important; 658 | width: 100%; 659 | outline: none !important; 660 | border-bottom: 1px solid rgba(255, 255, 255, 0.3); 661 | pointer-events: none; 662 | letter-spacing: .3px; 663 | -o-transition: color .3s ease-out, background-color .3s ease-out; 664 | transition: color .3s ease-out, background-color .3s ease-out; 665 | padding: 15px 20px 15px 20px; 666 | font-size: 15px; 667 | line-height: 19px; 668 | overflow: hidden; 669 | -ms-touch-action: manipulation; 670 | touch-action: manipulation; 671 | min-height: 50px; 672 | } 673 | 674 | .ma5menu__panel > ul li a { 675 | color: #ffffff; 676 | background-color: transparent; 677 | } 678 | 679 | .ma5menu__panel > ul li a:hover { 680 | color: #ffc107; 681 | background-color: transparent; 682 | -o-transition: none; 683 | transition: none; 684 | } 685 | 686 | .ma5menu__panel > ul li .ma5menu__category { 687 | position: relative; 688 | text-align: left; 689 | background-position: calc(100% - 13px) 50%; 690 | color: #ffffff; 691 | background-color: transparent; 692 | } 693 | 694 | .ma5menu__panel > ul li .ma5menu__category:hover { 695 | color: #ffc107; 696 | background-color: transparent; 697 | -o-transition: none; 698 | transition: none; 699 | } 700 | 701 | .ma5menu__panel > ul li .ma5menu__category.ma5menu__path { 702 | color: #ffc107 !important; 703 | background-color: transparent !important; 704 | } 705 | 706 | .ma5menu__panel > ul li .ma5menu__category.ma5menu__path:hover { 707 | color: #ffc107 !important; 708 | background-color: transparent !important; 709 | -o-transition: none; 710 | transition: none; 711 | } 712 | 713 | .ma5menu__panel > ul li > .ma5menu__btn--enter + a { 714 | padding-right: 60px; 715 | margin-right: -50px; 716 | } 717 | 718 | .ma5menu__panel--active { 719 | z-index: 170; 720 | display: block; 721 | } 722 | 723 | .ma5menu__panel--active > ul li a, 724 | .ma5menu__panel--active > ul li .ma5menu__category { 725 | pointer-events: auto; 726 | } 727 | 728 | .ma5menu__btn--enter, .ma5menu__btn--leave { 729 | font-size: 13px; 730 | cursor: pointer; 731 | display: block; 732 | position: absolute; 733 | padding: 0; 734 | top: 0; 735 | height: 100%; 736 | text-align: center; 737 | -ms-touch-action: manipulation; 738 | touch-action: manipulation; 739 | background-repeat: no-repeat; 740 | background-position: 50% 50%; 741 | background-size: 24px 24px; 742 | -o-transition: background-color 0.3s ease-out; 743 | transition: background-color 0.3s ease-out; 744 | } 745 | 746 | .ma5menu__btn--enter:hover, .ma5menu__btn--leave:hover { 747 | -o-transition: none; 748 | transition: none; 749 | } 750 | 751 | .ma5menu__btn--enter { 752 | z-index: 0; 753 | left: auto; 754 | right: 0; 755 | color: #ffffff; 756 | background-color: rgba(255, 255, 255, 0.1); 757 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E"); 758 | width: 50px; 759 | } 760 | 761 | .ma5menu__btn--enter:hover { 762 | color: #ffc107; 763 | background-color: rgba(255, 255, 255, 0.3); 764 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E"); 765 | } 766 | 767 | .ma5menu__btn--enter:before { 768 | content: ""; 769 | display: block; 770 | width: 1px; 771 | position: absolute; 772 | top: 3px; 773 | bottom: 3px; 774 | left: -2px; 775 | background-color: transparent; 776 | -webkit-transform: translateZ(0); 777 | transform: translateZ(0); 778 | } 779 | 780 | .ma5menu__btn--leave { 781 | left: 0; 782 | right: auto; 783 | color: #ffffff; 784 | background-color: transparent; 785 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E"); 786 | width: 50px; 787 | } 788 | 789 | .ma5menu__btn--leave:hover { 790 | color: #ffc107; 791 | background-color: transparent; 792 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E"); 793 | } 794 | 795 | .ma5menu__leave:hover .ma5menu__btn--leave { 796 | color: #ffc107; 797 | background-color: transparent; 798 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E"); 799 | } 800 | 801 | .ma5menu__btn--leave:before { 802 | content: ""; 803 | display: block; 804 | width: 1px; 805 | position: absolute; 806 | top: 0; 807 | bottom: 0; 808 | right: -2px; 809 | background-color: transparent; 810 | -webkit-transform: translateZ(0); 811 | transform: translateZ(0); 812 | } 813 | 814 | .ma5menu__leave { 815 | font-size: 15px; 816 | color: #ffffff; 817 | background-color: rgba(255, 255, 255, 0.1); 818 | cursor: pointer; 819 | display: block; 820 | position: relative; 821 | padding: 0 44px 0 44px; 822 | text-align: center; 823 | overflow: hidden; 824 | white-space: nowrap; 825 | -o-text-overflow: ellipsis; 826 | text-overflow: ellipsis; 827 | width: 100%; 828 | border-bottom: 1px solid rgba(255, 255, 255, 0.3); 829 | height: 50px; 830 | line-height: 50px; 831 | -webkit-user-select: none; 832 | -moz-user-select: none; 833 | -ms-user-select: none; 834 | user-select: none; 835 | margin-right: -44px; 836 | } 837 | 838 | .ma5menu__leave:hover { 839 | color: #ffc107; 840 | background-color: rgba(255, 255, 255, 0.1); 841 | } 842 | 843 | .ma5menu__leave + .ma5menu__btn--enter { 844 | bottom: 0; 845 | height: calc(100% - 50px); 846 | top: auto; 847 | } 848 | 849 | .ma5menu__path { 850 | color: #ffc107 !important; 851 | background-color: transparent !important; 852 | } 853 | 854 | .ma5menu--overflow { 855 | overflow-x: hidden !important; 856 | } 857 | 858 | .ma5menu--left:before, .ma5menu--right:before { 859 | content: ""; 860 | display: block; 861 | height: 100%; 862 | position: fixed; 863 | top: 0; 864 | background-color: rgba(255, 255, 255, 0.01); 865 | z-index: -1; 866 | -o-transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear; 867 | transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear; 868 | width: 100%; 869 | } 870 | 871 | .ma5menu--active:before { 872 | background-color: rgba(255, 255, 255, 0.6); 873 | -o-transition: background-color 0.4s ease-in; 874 | transition: background-color 0.4s ease-in; 875 | z-index: 9000; 876 | } 877 | 878 | .ma5menu--active > body .container * { 879 | -ms-touch-action: none; 880 | touch-action: none; 881 | pointer-events: none; 882 | } 883 | 884 | @media (max-width: 767px) { 885 | .ma5menu--active > body * { 886 | pointer-events: none; 887 | } 888 | .ma5menu--active > body .ma5menu__toggle { 889 | pointer-events: auto; 890 | } 891 | .ma5menu--active > body .ma5menu__toggle * { 892 | pointer-events: auto; 893 | } 894 | .ma5menu--active > body .ma5menu__container { 895 | pointer-events: auto; 896 | } 897 | .ma5menu--active > body .ma5menu__container * { 898 | pointer-events: auto; 899 | } 900 | .ma5menu--active > body .ma5menu__container .ma5menu__alert { 901 | pointer-events: none; 902 | } 903 | .ma5menu--active > body .ma5menu__container--scroll { 904 | pointer-events: auto; 905 | } 906 | } 907 | 908 | @media (max-width: 1199px) { 909 | .ma5menu--active.has-body-scrollbar { 910 | overflow: hidden; 911 | overflow-y: scroll; 912 | height: auto; 913 | min-height: 100%; 914 | -webkit-overflow-scrolling: touch; 915 | } 916 | } 917 | 918 | .ma5menu--active.ma5menu--left:before { 919 | right: 0; 920 | } 921 | 922 | .ma5menu--active.ma5menu--right:before { 923 | left: 0; 924 | } 925 | 926 | .ma5menu--swipe { 927 | position: relative; 928 | overflow-x: hidden !important; 929 | } 930 | 931 | .ma5menu--swipe body { 932 | position: relative; 933 | } 934 | 935 | .ma5menu--swipe.ma5menu--left body { 936 | -o-transition: left 0.5s ease-out; 937 | transition: left 0.5s ease-out; 938 | left: 0; 939 | } 940 | 941 | .ma5menu--swipe.ma5menu--right body { 942 | -o-transition: right 0.5s ease-out; 943 | transition: right 0.5s ease-out; 944 | right: 0; 945 | } 946 | 947 | .ma5menu--swipe.ma5menu--active.ma5menu--left body { 948 | left: 280px; 949 | } 950 | 951 | @media (min-width: 768px) { 952 | .ma5menu--swipe.ma5menu--active.ma5menu--left body { 953 | left: 360px; 954 | } 955 | } 956 | 957 | .ma5menu--swipe.ma5menu--active.ma5menu--right body { 958 | right: 280px; 959 | } 960 | 961 | @media (min-width: 768px) { 962 | .ma5menu--swipe.ma5menu--active.ma5menu--right body { 963 | right: 360px; 964 | } 965 | } 966 | 967 | .ma5menu__sr-only { 968 | position: absolute; 969 | width: 1px; 970 | height: 1px; 971 | padding: 0; 972 | overflow: hidden; 973 | clip: rect(0, 0, 0, 0); 974 | white-space: nowrap; 975 | -webkit-clip-path: inset(50%); 976 | clip-path: inset(50%); 977 | border: 0; 978 | } 979 | 980 | @-webkit-keyframes ma5-panelIn { 981 | 0% { 982 | -webkit-transform: translate3d(280px, 0, 0); 983 | } 984 | 100% { 985 | -webkit-transform: translate3d(0, 0, 0); 986 | } 987 | } 988 | 989 | @keyframes ma5-panelIn { 990 | 0% { 991 | -webkit-transform: translate3d(280px, 0, 0); 992 | transform: translate3d(280px, 0, 0); 993 | } 994 | 100% { 995 | -webkit-transform: translate3d(0, 0, 0); 996 | transform: translate3d(0, 0, 0); 997 | } 998 | } 999 | 1000 | @-webkit-keyframes ma5-panelOut { 1001 | 0% { 1002 | -webkit-transform: translate3d(0, 0, 0); 1003 | } 1004 | 100% { 1005 | -webkit-transform: translate3d(280px, 0, 0); 1006 | } 1007 | } 1008 | 1009 | @keyframes ma5-panelOut { 1010 | 0% { 1011 | -webkit-transform: translate3d(0, 0, 0); 1012 | transform: translate3d(0, 0, 0); 1013 | } 1014 | 100% { 1015 | -webkit-transform: translate3d(280px, 0, 0); 1016 | transform: translate3d(280px, 0, 0); 1017 | } 1018 | } 1019 | 1020 | @-webkit-keyframes ma5menuIn { 1021 | 0% { 1022 | -webkit-transform: translate3d(0, 0, 0); 1023 | } 1024 | 100% { 1025 | -webkit-transform: translate3d(-280px, 0, 0); 1026 | } 1027 | } 1028 | 1029 | @keyframes ma5menuIn { 1030 | 0% { 1031 | -webkit-transform: translate3d(0, 0, 0); 1032 | transform: translate3d(0, 0, 0); 1033 | } 1034 | 100% { 1035 | -webkit-transform: translate3d(-280px, 0, 0); 1036 | transform: translate3d(-280px, 0, 0); 1037 | } 1038 | } 1039 | 1040 | @-webkit-keyframes ma5menuOut { 1041 | 0% { 1042 | -webkit-transform: translate3d(0, 0, 0); 1043 | } 1044 | 100% { 1045 | -webkit-transform: translate3d(-280px, 0, 0); 1046 | } 1047 | } 1048 | 1049 | @keyframes ma5menuOut { 1050 | 0% { 1051 | -webkit-transform: translate3d(0, 0, 0); 1052 | transform: translate3d(0, 0, 0); 1053 | } 1054 | 100% { 1055 | -webkit-transform: translate3d(-280px, 0, 0); 1056 | transform: translate3d(-280px, 0, 0); 1057 | } 1058 | } 1059 | 1060 | @-webkit-keyframes ma5menuOutB { 1061 | 0% { 1062 | -webkit-transform: translate3d(-280px, 0, 0); 1063 | } 1064 | 100% { 1065 | -webkit-transform: translate3d(0, 0, 0); 1066 | } 1067 | } 1068 | 1069 | @keyframes ma5menuOutB { 1070 | 0% { 1071 | -webkit-transform: translate3d(-280px, 0, 0); 1072 | transform: translate3d(-280px, 0, 0); 1073 | } 1074 | 100% { 1075 | -webkit-transform: translate3d(0, 0, 0); 1076 | transform: translate3d(0, 0, 0); 1077 | } 1078 | } 1079 | 1080 | @media (min-width: 768px) { 1081 | @-webkit-keyframes ma5-panelIn { 1082 | 0% { 1083 | -webkit-transform: translate3d(360px, 0, 0); 1084 | } 1085 | 100% { 1086 | -webkit-transform: translate3d(0, 0, 0); 1087 | } 1088 | } 1089 | @keyframes ma5-panelIn { 1090 | 0% { 1091 | -webkit-transform: translate3d(360px, 0, 0); 1092 | transform: translate3d(360px, 0, 0); 1093 | } 1094 | 100% { 1095 | -webkit-transform: translate3d(0, 0, 0); 1096 | transform: translate3d(0, 0, 0); 1097 | } 1098 | } 1099 | @-webkit-keyframes ma5-panelOut { 1100 | 0% { 1101 | -webkit-transform: translate3d(0, 0, 0); 1102 | } 1103 | 100% { 1104 | -webkit-transform: translate3d(360px, 0, 0); 1105 | } 1106 | } 1107 | @keyframes ma5-panelOut { 1108 | 0% { 1109 | -webkit-transform: translate3d(0, 0, 0); 1110 | transform: translate3d(0, 0, 0); 1111 | } 1112 | 100% { 1113 | -webkit-transform: translate3d(360px, 0, 0); 1114 | transform: translate3d(360px, 0, 0); 1115 | } 1116 | } 1117 | @-webkit-keyframes ma5menuIn { 1118 | 0% { 1119 | -webkit-transform: translate3d(0, 0, 0); 1120 | } 1121 | 100% { 1122 | -webkit-transform: translate3d(-360px, 0, 0); 1123 | } 1124 | } 1125 | @keyframes ma5menuIn { 1126 | 0% { 1127 | -webkit-transform: translate3d(0, 0, 0); 1128 | transform: translate3d(0, 0, 0); 1129 | } 1130 | 100% { 1131 | -webkit-transform: translate3d(-360px, 0, 0); 1132 | transform: translate3d(-360px, 0, 0); 1133 | } 1134 | } 1135 | @-webkit-keyframes ma5menuOut { 1136 | 0% { 1137 | -webkit-transform: translate3d(0, 0, 0); 1138 | } 1139 | 100% { 1140 | -webkit-transform: translate3d(-360px, 0, 0); 1141 | } 1142 | } 1143 | @keyframes ma5menuOut { 1144 | 0% { 1145 | -webkit-transform: translate3d(0, 0, 0); 1146 | } 1147 | 100% { 1148 | -webkit-transform: translate3d(-360px, 0, 0); 1149 | } 1150 | } 1151 | @-webkit-keyframes ma5menuOutB { 1152 | 0% { 1153 | -webkit-transform: translate3d(-360px, 0, 0); 1154 | } 1155 | 100% { 1156 | -webkit-transform: translate3d(0, 0, 0); 1157 | } 1158 | } 1159 | @keyframes ma5menuOutB { 1160 | 0% { 1161 | -webkit-transform: translate3d(-360px, 0, 0); 1162 | transform: translate3d(-360px, 0, 0); 1163 | } 1164 | 100% { 1165 | -webkit-transform: translate3d(0, 0, 0); 1166 | transform: translate3d(0, 0, 0); 1167 | } 1168 | } 1169 | } 1170 | 1171 | @-webkit-keyframes ma5-panelInIEphone { 1172 | 0% { 1173 | -webkit-transform: translate3d(280px, 0, 0); 1174 | transform: translate3d(280px, 0, 0); 1175 | } 1176 | 100% { 1177 | -webkit-transform: translate3d(0, 0, 0); 1178 | transform: translate3d(0, 0, 0); 1179 | } 1180 | } 1181 | 1182 | @keyframes ma5-panelInIEphone { 1183 | 0% { 1184 | -webkit-transform: translate3d(280px, 0, 0); 1185 | transform: translate3d(280px, 0, 0); 1186 | } 1187 | 100% { 1188 | -webkit-transform: translate3d(0, 0, 0); 1189 | transform: translate3d(0, 0, 0); 1190 | } 1191 | } 1192 | 1193 | @-webkit-keyframes ma5-panelOutIEphone { 1194 | 0% { 1195 | -webkit-transform: translate3d(0, 0, 0); 1196 | transform: translate3d(0, 0, 0); 1197 | } 1198 | 100% { 1199 | -webkit-transform: translate3d(280px, 0, 0); 1200 | transform: translate3d(280px, 0, 0); 1201 | } 1202 | } 1203 | 1204 | @keyframes ma5-panelOutIEphone { 1205 | 0% { 1206 | -webkit-transform: translate3d(0, 0, 0); 1207 | transform: translate3d(0, 0, 0); 1208 | } 1209 | 100% { 1210 | -webkit-transform: translate3d(280px, 0, 0); 1211 | transform: translate3d(280px, 0, 0); 1212 | } 1213 | } 1214 | 1215 | @-webkit-keyframes ma5menuInIEphone { 1216 | 0% { 1217 | -webkit-transform: translate3d(0, 0, 0); 1218 | transform: translate3d(0, 0, 0); 1219 | } 1220 | 100% { 1221 | -webkit-transform: translate3d(-280px, 0, 0); 1222 | transform: translate3d(-280px, 0, 0); 1223 | } 1224 | } 1225 | 1226 | @keyframes ma5menuInIEphone { 1227 | 0% { 1228 | -webkit-transform: translate3d(0, 0, 0); 1229 | transform: translate3d(0, 0, 0); 1230 | } 1231 | 100% { 1232 | -webkit-transform: translate3d(-280px, 0, 0); 1233 | transform: translate3d(-280px, 0, 0); 1234 | } 1235 | } 1236 | 1237 | @-webkit-keyframes ma5menuOutIEphone { 1238 | 0% { 1239 | -webkit-transform: translate3d(0, 0, 0); 1240 | transform: translate3d(0, 0, 0); 1241 | } 1242 | 100% { 1243 | -webkit-transform: translate3d(-280px, 0, 0); 1244 | transform: translate3d(-280px, 0, 0); 1245 | } 1246 | } 1247 | 1248 | @keyframes ma5menuOutIEphone { 1249 | 0% { 1250 | -webkit-transform: translate3d(0, 0, 0); 1251 | transform: translate3d(0, 0, 0); 1252 | } 1253 | 100% { 1254 | -webkit-transform: translate3d(-280px, 0, 0); 1255 | transform: translate3d(-280px, 0, 0); 1256 | } 1257 | } 1258 | 1259 | @-webkit-keyframes ma5menuOutBIEphone { 1260 | 0% { 1261 | -webkit-transform: translate3d(-280px, 0, 0); 1262 | transform: translate3d(-280px, 0, 0); 1263 | } 1264 | 100% { 1265 | -webkit-transform: translate3d(0, 0, 0); 1266 | transform: translate3d(0, 0, 0); 1267 | } 1268 | } 1269 | 1270 | @keyframes ma5menuOutBIEphone { 1271 | 0% { 1272 | -webkit-transform: translate3d(-280px, 0, 0); 1273 | transform: translate3d(-280px, 0, 0); 1274 | } 1275 | 100% { 1276 | -webkit-transform: translate3d(0, 0, 0); 1277 | transform: translate3d(0, 0, 0); 1278 | } 1279 | } 1280 | 1281 | @-webkit-keyframes ma5-panelInIEtablet { 1282 | 0% { 1283 | -webkit-transform: translate3d(360px, 0, 0); 1284 | transform: translate3d(360px, 0, 0); 1285 | } 1286 | 100% { 1287 | -webkit-transform: translate3d(0, 0, 0); 1288 | transform: translate3d(0, 0, 0); 1289 | } 1290 | } 1291 | 1292 | @keyframes ma5-panelInIEtablet { 1293 | 0% { 1294 | -webkit-transform: translate3d(360px, 0, 0); 1295 | transform: translate3d(360px, 0, 0); 1296 | } 1297 | 100% { 1298 | -webkit-transform: translate3d(0, 0, 0); 1299 | transform: translate3d(0, 0, 0); 1300 | } 1301 | } 1302 | 1303 | @-webkit-keyframes ma5-panelOutIEtablet { 1304 | 0% { 1305 | -webkit-transform: translate3d(0, 0, 0); 1306 | transform: translate3d(0, 0, 0); 1307 | } 1308 | 100% { 1309 | -webkit-transform: translate3d(360px, 0, 0); 1310 | transform: translate3d(360px, 0, 0); 1311 | } 1312 | } 1313 | 1314 | @keyframes ma5-panelOutIEtablet { 1315 | 0% { 1316 | -webkit-transform: translate3d(0, 0, 0); 1317 | transform: translate3d(0, 0, 0); 1318 | } 1319 | 100% { 1320 | -webkit-transform: translate3d(360px, 0, 0); 1321 | transform: translate3d(360px, 0, 0); 1322 | } 1323 | } 1324 | 1325 | @-webkit-keyframes ma5menuInIEtablet { 1326 | 0% { 1327 | -webkit-transform: translate3d(0, 0, 0); 1328 | transform: translate3d(0, 0, 0); 1329 | } 1330 | 100% { 1331 | -webkit-transform: translate3d(-360px, 0, 0); 1332 | transform: translate3d(-360px, 0, 0); 1333 | } 1334 | } 1335 | 1336 | @keyframes ma5menuInIEtablet { 1337 | 0% { 1338 | -webkit-transform: translate3d(0, 0, 0); 1339 | transform: translate3d(0, 0, 0); 1340 | } 1341 | 100% { 1342 | -webkit-transform: translate3d(-360px, 0, 0); 1343 | transform: translate3d(-360px, 0, 0); 1344 | } 1345 | } 1346 | 1347 | @-webkit-keyframes ma5menuOutIEtablet { 1348 | 0% { 1349 | -webkit-transform: translate3d(0, 0, 0); 1350 | transform: translate3d(0, 0, 0); 1351 | } 1352 | 100% { 1353 | -webkit-transform: translate3d(-360px, 0, 0); 1354 | transform: translate3d(-360px, 0, 0); 1355 | } 1356 | } 1357 | 1358 | @keyframes ma5menuOutIEtablet { 1359 | 0% { 1360 | -webkit-transform: translate3d(0, 0, 0); 1361 | transform: translate3d(0, 0, 0); 1362 | } 1363 | 100% { 1364 | -webkit-transform: translate3d(-360px, 0, 0); 1365 | transform: translate3d(-360px, 0, 0); 1366 | } 1367 | } 1368 | 1369 | @-webkit-keyframes ma5menuOutBIEtablet { 1370 | 0% { 1371 | -webkit-transform: translate3d(-360px, 0, 0); 1372 | transform: translate3d(-360px, 0, 0); 1373 | } 1374 | 100% { 1375 | -webkit-transform: translate3d(0, 0, 0); 1376 | transform: translate3d(0, 0, 0); 1377 | } 1378 | } 1379 | 1380 | @keyframes ma5menuOutBIEtablet { 1381 | 0% { 1382 | -webkit-transform: translate3d(-360px, 0, 0); 1383 | transform: translate3d(-360px, 0, 0); 1384 | } 1385 | 100% { 1386 | -webkit-transform: translate3d(0, 0, 0); 1387 | transform: translate3d(0, 0, 0); 1388 | } 1389 | } 1390 | 1391 | @-webkit-keyframes ma5-arrowDown { 1392 | 0% { 1393 | opacity: 1; 1394 | } 1395 | 40% { 1396 | opacity: 0; 1397 | } 1398 | 60% { 1399 | opacity: 0.5; 1400 | } 1401 | 100% { 1402 | opacity: 1; 1403 | } 1404 | } 1405 | 1406 | @keyframes ma5-arrowDown { 1407 | 0% { 1408 | opacity: 1; 1409 | } 1410 | 40% { 1411 | opacity: 0; 1412 | } 1413 | 60% { 1414 | opacity: 0.5; 1415 | } 1416 | 100% { 1417 | opacity: 1; 1418 | } 1419 | } 1420 | -------------------------------------------------------------------------------- /scss/ma5-menu.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * MA5-mobile-menu 3 | * v 4.0.0 4 | * Copyright (c) 2016 Tomasz Kalinowski 5 | * GitHub: https://github.com/ma-5/ma5-mobile-menu 6 | */ 7 | // mixins 8 | @function str-replace($string, $search, $replace: '') { 9 | $index: str-index($string, $search); 10 | @if $index { 11 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 12 | } 13 | @return $string; 14 | } 15 | // https://gist.github.com/terkel/4373420 16 | @function decimal-round ($number, $digits: 0, $mode: round) { 17 | $n: 1; 18 | @if type-of($number) != number { 19 | @warn '#{ $number } is not a number.'; 20 | @return $number; 21 | } 22 | @if type-of($digits) != number { 23 | @warn '#{ $digits } is not a number.'; 24 | @return $number; 25 | } @else if not unitless($digits) { 26 | @warn '#{ $digits } has a unit.'; 27 | @return $number; 28 | } 29 | @if $digits > 0 { 30 | @for $i from 1 through $digits { 31 | $n: $n * 10; 32 | } 33 | } 34 | @if $mode == round { 35 | @return round($number * $n) / $n; 36 | } @else if $mode == ceil { 37 | @return ceil($number * $n) / $n; 38 | } @else if $mode == floor { 39 | @return floor($number * $n) / $n; 40 | } @else { 41 | @warn '#{ $mode } is undefined keyword.'; 42 | @return $number; 43 | } 44 | } 45 | @function decimal-floor ($number, $digits: 0) { 46 | @return decimal-round($number, $digits, floor); 47 | } 48 | @function icons-material__chevron_left($color) { 49 | $color: str-replace(#{$color}, '#', '%23'); 50 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E'); 51 | } 52 | 53 | @function icons-material__chevron_right($color) { 54 | $color: str-replace(#{$color}, '#', '%23'); 55 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E'); 56 | } 57 | @function icons-material__expand_more($color) { 58 | $color: str-replace(#{$color}, '#', '%23'); 59 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22/%3E%3C/svg%3E'); 60 | } 61 | @function icons-material__menu($color) { 62 | $color: str-replace(#{$color}, '#', '%23'); 63 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22/%3E%3C/svg%3E'); 64 | } 65 | @function icons-material__terrain($color) { 66 | $color: str-replace(#{$color}, '#', '%23'); 67 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%206l-3.75%205%202.85%203.8-1.6%201.2C9.81%2013.75%207%2010%207%2010l-6%208h22L14%206z%22/%3E%3C/svg%3E'); 68 | } 69 | @function icons-material__clear($color) { 70 | $color: str-replace(#{$color}, '#', '%23'); 71 | @return url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22#{$color}%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E'); 72 | } 73 | 74 | // used colors 75 | $ma5menu-color-1: #ffffff; // white 76 | $ma5menu-color-2: rgba($ma5menu-color-1, .3); // white transparent medium 77 | $ma5menu-color-3: rgba($ma5menu-color-1, .6); // white transparent light 78 | $ma5menu-color-4: rgba($ma5menu-color-1, .1); // white transparent dark 79 | $ma5menu-color-5: #ffc107; // yellow 80 | $ma5menu-color-6: #0e65b6; // blue 81 | $ma5menu-color-7: #eeeeee; // gray light 82 | $ma5menu-color-8: darken($ma5menu-color-6,5%); // blue dark 83 | $ma5menu-color-9: #ef6c00; // orange 84 | 85 | // sizes 86 | $ma5menu-head-height: 60px; 87 | $ma5menu-leave-height: 50px; 88 | $ma5menu-leave-font-size: 15px; 89 | $ma5menu-panel-link-height: 50px; 90 | $ma5menu-panel-link-font-size: 15px; 91 | $ma5menu-button-enter-width: 50px; 92 | $ma5menu-button-leave-width: 50px; 93 | $ma5menu-button-up-icon-width: 24px; 94 | $ma5menu-button-up-icon-height: 24px; 95 | $ma5menu-button-icon-width: 24px; 96 | $ma5menu-button-icon-height: 24px; 97 | $ma5-mobile-menu-width-phone: 280px; 98 | $ma5-mobile-menu-width-tablet: 360px; 99 | $ma5-mobile-menu-breakpoint: 768px; 100 | $ma5-mobile-logo-width: 40px; 101 | $ma5-mobile-logo-height: 40px; 102 | $ma5menu-panel-category-arrow-right: ($ma5menu-button-enter-width / 2) - ($ma5menu-button-icon-width / 2); 103 | // 104 | 105 | // font style 106 | $ma5menu-panel-link-text-transform-lvl-1: uppercase; 107 | $ma5menu-panel-link-text-transform-lvl-2: none; 108 | // 109 | 110 | $ma5menu-panel-link-line-height: 19px; 111 | $ma5menu-panel-link-padding-y: decimal-floor(($ma5menu-panel-link-height - $ma5menu-panel-link-line-height)/2); 112 | 113 | // button enter 114 | $ma5menu-button-enter-bg: $ma5menu-color-4; 115 | $ma5menu-button-enter-bg-hover: $ma5menu-color-2; 116 | $ma5menu-button-enter-color: $ma5menu-color-1; 117 | $ma5menu-button-enter-color-hover: $ma5menu-color-5; 118 | 119 | $ma5menu-button-enter-image: icons-material__chevron_right($ma5menu-button-enter-color); 120 | $ma5menu-button-enter-image-hover: icons-material__chevron_right($ma5menu-button-enter-color-hover); 121 | $ma5menu-button-enter-pipe: rgba(0, 0, 0, 0); 122 | // 123 | 124 | // button leave 125 | $ma5menu-button-leave-bg: transparent; 126 | $ma5menu-button-leave-bg-hover: transparent; 127 | $ma5menu-button-leave-color: $ma5menu-color-1; 128 | $ma5menu-button-leave-color-hover: $ma5menu-color-5; 129 | $ma5menu-button-leave-image: icons-material__chevron_left($ma5menu-button-leave-color); 130 | $ma5menu-button-leave-image-hover: icons-material__chevron_left($ma5menu-button-leave-color-hover); 131 | $ma5menu-button-leave-pipe: rgba(0, 0, 0, 0); 132 | // 133 | 134 | // button close 135 | $ma5menu-button-close-bg: transparent; 136 | $ma5menu-button-close-bg-hover: transparent; 137 | $ma5menu-button-close-color: $ma5menu-color-1; 138 | $ma5menu-button-close-color-hover: $ma5menu-color-5; 139 | // 140 | 141 | // panel 142 | $ma5menu-panel-bg: $ma5menu-color-6; 143 | $ma5menu-panel-text-color: $ma5menu-color-4; 144 | $ma5menu-panel-scrollbar-bg: darken($ma5menu-panel-bg, 2%); 145 | // 146 | 147 | // panel link 148 | $ma5menu-panel-link-color: $ma5menu-color-1; 149 | $ma5menu-panel-link-color-hover: $ma5menu-color-5; 150 | $ma5menu-panel-link-bg: transparent; 151 | $ma5menu-panel-link-bg-hover: transparent; 152 | $ma5menu-panel-link-separator: $ma5menu-color-2; 153 | // 154 | 155 | // path to link 156 | $ma5-mobile-path-color: $ma5menu-color-5; 157 | $ma5-mobile-path-bg: transparent; 158 | // 159 | 160 | // category link 161 | $ma5menu-panel-category-color: $ma5menu-color-1; 162 | $ma5menu-panel-category-color-hover: $ma5menu-color-5; 163 | $ma5menu-panel-category-bg: transparent; 164 | $ma5menu-panel-category-bg-hover: transparent; 165 | // 166 | 167 | // category && path to link 168 | $ma5menu-panel-category-path-color: $ma5menu-color-5; 169 | $ma5menu-panel-category-path-color-hover: $ma5menu-color-5; 170 | $ma5menu-panel-category-path-bg: transparent; 171 | $ma5menu-panel-category-path-bg-hover: transparent; 172 | // 173 | 174 | // logo 175 | $ma5menu-logo-color: $ma5menu-color-1; 176 | $ma5menu-logo-color-hover: $ma5menu-color-5; 177 | // 178 | 179 | // toggle page button 180 | $ma5menu-toggle-color: $ma5menu-color-1; 181 | $ma5menu-toggle-bg: $ma5menu-color-6; 182 | $ma5menu-toggle-color-hover: $ma5menu-color-1; 183 | $ma5menu-toggle-bg-hover: $ma5menu-color-9; 184 | // 185 | 186 | // head 187 | $ma5menu-head-bg: transparent; 188 | $ma5menu-head-text-color: $ma5menu-color-1; 189 | $ma5menu-head-border: $ma5menu-color-8; 190 | // 191 | 192 | // head header 193 | $ma5menu-header-bg: transparent; 194 | $ma5menu-header-text-color: $ma5menu-color-1; 195 | $ma5menu-header-link-color: $ma5menu-color-5; 196 | $ma5menu-header-link-color-hover: $ma5menu-color-5; 197 | // 198 | 199 | // leave bar 200 | $ma5menu-leave-bg: $ma5menu-color-4; 201 | $ma5menu-leave-bg-hover: $ma5menu-color-4; 202 | $ma5menu-leave-color: $ma5menu-color-1; 203 | $ma5menu-leave-color-hover: $ma5menu-color-5; 204 | $ma5menu-leave-border: $ma5menu-color-2; 205 | // 206 | 207 | // footer 208 | $ma5menu-footer-bg: transparent; 209 | $ma5menu-footer-text-color: $ma5menu-color-3; 210 | $ma5menu-footer-link-color: $ma5menu-color-5; 211 | $ma5menu-footer-link-color-hover: $ma5menu-color-5; 212 | $ma5menu-footer-text-transform: none; 213 | // 214 | 215 | // alert icon up 216 | $ma5menu-icon-up-color: #fff; 217 | $ma5menu-icon-up-image: icons-material__expand-more($ma5menu-icon-up-color); 218 | // 219 | 220 | // backdrop 221 | $ma5menu-backdrop-color: $ma5menu-color-3; 222 | // 223 | 224 | .ma5menu { 225 | display: none; 226 | box-sizing: border-box; 227 | 228 | *, *:after, *:before { 229 | box-sizing: border-box; 230 | } 231 | 232 | &__page { 233 | .ma5menu--active & { 234 | margin-right: -17px; 235 | height: 100%; 236 | overflow: hidden; 237 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 238 | transition: transform 0.3s ease-out 0s; 239 | 240 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 241 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 242 | } 243 | } 244 | } 245 | > ul { 246 | display: none; 247 | } 248 | 249 | &__head { 250 | padding: 0 5px; 251 | border-bottom: 1px solid $ma5menu-head-border; 252 | height: $ma5menu-head-height; 253 | text-align: center; 254 | color: $ma5menu-head-text-color; 255 | background-color: $ma5menu-head-bg; 256 | position: relative; 257 | } 258 | &__header { 259 | line-height: 35px; 260 | color: $ma5menu-header-text-color; 261 | background-color: $ma5menu-header-bg; 262 | 263 | a { 264 | color: $ma5menu-header-link-color; 265 | 266 | &:hover { 267 | color: $ma5menu-header-link-color-hover; 268 | } 269 | } 270 | } 271 | &__close { 272 | position: absolute; 273 | top: 50%; 274 | left: 50%; 275 | width: 24px; 276 | height: 24px; 277 | transform: translate(-50%, -50%); 278 | color: $ma5menu-button-close-color; 279 | background-color: $ma5menu-button-close-bg; 280 | background-image: icons-material__clear($ma5menu-button-close-color); 281 | background-size: 24px 24px; 282 | background-position: 50% 50%; 283 | 284 | .ma5menu__toggle:hover & { 285 | color: rgba(0,0,0,0); 286 | background-image: icons-material__clear($ma5menu-button-close-color-hover); 287 | background-color: $ma5menu-button-close-bg-hover; 288 | } 289 | } 290 | &__logo { 291 | position: absolute; 292 | top: 50%; 293 | left: 50%; 294 | transform: translate(-50%, -50%); 295 | color: $ma5menu-logo-color; 296 | width: $ma5-mobile-logo-width; 297 | height: $ma5-mobile-logo-height; 298 | background-image: icons-material__terrain($ma5menu-logo-color); 299 | background-size: $ma5-mobile-logo-width $ma5-mobile-logo-height; 300 | background-position: 50% 50%; 301 | 302 | .ma5menu__home:hover & { 303 | color: $ma5menu-logo-color-hover; 304 | } 305 | } 306 | &__home { 307 | font-weight: 700; 308 | color: inherit; 309 | } 310 | &__tools { 311 | display: none; 312 | 313 | .ma5menu__footer & { 314 | display: block; 315 | } 316 | } 317 | &__footer { 318 | padding: 20px 20px 30px 20px; 319 | text-align: center; 320 | color: $ma5menu-footer-text-color; 321 | background-color: $ma5menu-footer-bg; 322 | text-transform: $ma5menu-footer-text-transform; 323 | 324 | a { 325 | color: $ma5menu-footer-link-color; 326 | 327 | &:hover { 328 | color: $ma5menu-footer-link-color-hover; 329 | } 330 | } 331 | } 332 | 333 | &__toggle { 334 | cursor: pointer; 335 | color: $ma5menu-toggle-color; 336 | background-color: $ma5menu-toggle-bg; 337 | touch-action: manipulation; 338 | width: 52px; 339 | height: 38px; 340 | position: relative; 341 | display: inline-block; 342 | text-align: center; 343 | white-space: nowrap; 344 | vertical-align: middle; 345 | user-select: none; 346 | border: none; 347 | font-weight: 400; 348 | padding: 8px 12px; 349 | border-radius: 4px; 350 | transition: box-shadow .15s ease-in-out; 351 | 352 | &:hover { 353 | color: $ma5menu-toggle-color-hover; 354 | background-color: $ma5menu-toggle-bg-hover; 355 | } 356 | .ma5menu__header & { 357 | position: absolute; 358 | 359 | top: 0; 360 | width: $ma5menu-head-height; 361 | height: $ma5menu-head-height; 362 | 363 | color: $ma5menu-button-close-color; 364 | background-color: $ma5menu-button-close-bg; 365 | 366 | &:hover { 367 | color: $ma5menu-button-close-color-hover; 368 | background-color: $ma5menu-button-close-bg-hover; 369 | } 370 | 371 | .ma5menu--left & { 372 | right: 0; 373 | } 374 | .ma5menu--right & { 375 | left: 0; 376 | } 377 | } 378 | } 379 | &__icon-toggle { 380 | display: inline-block; 381 | position: absolute; 382 | margin: auto; 383 | top: -100%; 384 | bottom: -100%; 385 | left: -100%; 386 | right: -100%; 387 | vertical-align: top; 388 | width: 24px; 389 | height: 24px; 390 | background-image:icons-material__menu($ma5menu-toggle-color); 391 | background-position: 50% 50%; 392 | background-size: 100% 100%; 393 | background-repeat: no-repeat; 394 | } 395 | &__icon-up { 396 | margin: 0; 397 | width: 44px; 398 | height: 44px; 399 | display: inline-block; 400 | transform: translateZ(0); 401 | background-repeat: no-repeat; 402 | background-position: 50% 50%; 403 | background-size: $ma5menu-button-up-icon-width $ma5menu-button-up-icon-height; 404 | background-image: $ma5menu-icon-up-image; 405 | } 406 | &__alert { 407 | display: block; 408 | text-align: center; 409 | width: $ma5-mobile-menu-width-phone; 410 | height: 50px; 411 | bottom: 0; 412 | left: 0; 413 | position: absolute; 414 | overflow: hidden; 415 | z-index: 500; 416 | transform: translateZ(0); 417 | background-image: linear-gradient(to bottom, rgba($ma5menu-panel-bg, 0) 0%, rgba($ma5menu-panel-bg, 1) 50%); 418 | background-repeat: no-repeat; 419 | background-size: 100% 100%; 420 | background-position: 0 50px; 421 | transition: background-position .4s ease-in .3s; 422 | will-change: auto; 423 | pointer-events: none; 424 | 425 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 426 | width: $ma5-mobile-menu-width-tablet; 427 | } 428 | .ma5menu__container--scroll & { 429 | background-position: 0 0; 430 | transition: background-position .4s ease-out; 431 | pointer-events: auto; 432 | } 433 | } 434 | &__alert-content { 435 | width: 150px; 436 | height: 40px; 437 | position: absolute; 438 | bottom: -40px; 439 | left: 50%; 440 | transform: translateX(-50%); 441 | transition: bottom .4s ease-in; 442 | 443 | .ma5menu__container--scroll & { 444 | bottom: 0; 445 | animation-timing-function: linear; 446 | animation-iteration-count: 3; 447 | animation-duration: 0.6s; 448 | animation-delay: 1s; 449 | animation-fill-mode: both; 450 | animation-name: ma5-arrowDown; 451 | transition: bottom .4s ease-out .4s; 452 | } 453 | } 454 | 455 | &__container { 456 | transition: none !important; 457 | position: fixed; 458 | background-color: $ma5menu-panel-bg; 459 | height: 100%; 460 | top: 0; 461 | line-height: 19px; 462 | overflow: hidden; 463 | border: none; 464 | z-index: 10000; 465 | box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); 466 | 467 | @media (max-width: #{$ma5-mobile-menu-breakpoint - 1}) { 468 | width: $ma5-mobile-menu-width-phone; 469 | } 470 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 471 | width: $ma5-mobile-menu-width-tablet; 472 | } 473 | 474 | .ma5menu--left & { 475 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 476 | left: 0; 477 | } 478 | .ma5menu--right & { 479 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 480 | right: -$ma5-mobile-menu-width-phone; 481 | } 482 | 483 | .ma5menu--ready.ma5menu--left & { 484 | animation-timing-function: ease-out; 485 | animation-duration: 0.5s; 486 | animation-delay: 0s; 487 | animation-fill-mode: both; 488 | } 489 | .noie.ma5menu--ready.ma5menu--left & { 490 | animation-name: ma5menuOut; 491 | } 492 | .ie.ma5menu--ready.ma5menu--left & { 493 | animation-name: ma5menuOutIEphone; 494 | 495 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 496 | animation-name: ma5menuOutIEtablet; 497 | } 498 | } 499 | .ma5menu--ready.ma5menu--right & { 500 | animation-timing-function: ease-out; 501 | animation-duration: 0.5s; 502 | animation-delay: 0s; 503 | animation-fill-mode: both; 504 | } 505 | .noie.ma5menu--ready.ma5menu--right & { 506 | animation-name: ma5menuOutB; 507 | } 508 | .ie.ma5menu--ready.ma5menu--right & { 509 | animation-name: ma5menuOutBIEphone; 510 | 511 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 512 | animation-name: ma5menuOutBIEtablet; 513 | } 514 | } 515 | .ma5menu--active.ma5menu--left & { 516 | animation-timing-function: ease-out; 517 | animation-duration: 0.5s; 518 | animation-delay: 0s; 519 | animation-fill-mode: both; 520 | } 521 | .noie.ma5menu--active.ma5menu--left & { 522 | animation-name: ma5menuOutB; 523 | } 524 | .ie.ma5menu--active.ma5menu--left & { 525 | animation-name: ma5menuOutBIEphone; 526 | 527 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 528 | animation-name: ma5menuOutBIEtablet; 529 | } 530 | } 531 | .ma5menu--active.ma5menu--right & { 532 | animation-timing-function: ease-out; 533 | animation-duration: 0.5s; 534 | animation-delay: 0s; 535 | animation-fill-mode: both; 536 | } 537 | .noie.ma5menu--active.ma5menu--right & { 538 | animation-name: ma5menuIn; 539 | } 540 | .ie.ma5menu--active.ma5menu--right & { 541 | animation-name: ma5menuInIEphone; 542 | 543 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 544 | animation-name: ma5menuInIEtablet; 545 | } 546 | } 547 | 548 | .ma5menu--left & { 549 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 550 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 551 | padding: 0; 552 | left: 0; 553 | } 554 | } 555 | .ma5menu--right & { 556 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 557 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 558 | right: -$ma5-mobile-menu-width-tablet; 559 | } 560 | } 561 | .safari & { 562 | height: 100%; 563 | } 564 | .preload & { 565 | opacity: 0; 566 | z-index: -1; 567 | } 568 | } 569 | 570 | &__panel { 571 | display: none; 572 | width: $ma5-mobile-menu-width-phone; 573 | height: 80%; 574 | height: calc(100% - #{$ma5menu-head-height}); 575 | position: absolute; 576 | overflow: hidden; 577 | overflow-y: auto; 578 | top: $ma5menu-head-height; 579 | left: 0; 580 | margin: 0; 581 | padding: 0; 582 | list-style-type: none; 583 | z-index: 100; 584 | color: $ma5menu-panel-text-color; 585 | background-color: $ma5menu-panel-bg; 586 | scrollbar-color: darken($ma5menu-color-6, 10%) $ma5menu-color-6; 587 | scrollbar-width: thin; 588 | 589 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 590 | width: $ma5-mobile-menu-width-tablet; 591 | } 592 | 593 | &.has-scrollbar { 594 | overflow: hidden; 595 | overflow-y: scroll; 596 | -webkit-overflow-scrolling: touch; 597 | } 598 | 599 | &:hover { 600 | &::-webkit-scrollbar-thumb { 601 | background-color: rgba(255, 255, 255, 0.4); 602 | } 603 | } 604 | &::-webkit-scrollbar { 605 | width: 9px; 606 | background-color: $ma5menu-panel-scrollbar-bg; 607 | } 608 | &::-webkit-scrollbar-thumb { 609 | background-color: rgba(255, 255, 255, 0.15); 610 | outline: none; 611 | border-right: 3px solid $ma5menu-panel-scrollbar-bg; 612 | } 613 | 614 | &:first-of-type { 615 | z-index: 160; 616 | } 617 | &--parent-leave, 618 | &--parent-enter { 619 | z-index: 180; 620 | display: block; 621 | } 622 | &--active-leave, 623 | &--active-enter { 624 | z-index: 190; 625 | display: block; 626 | } 627 | &--active-enter { 628 | animation-timing-function: ease-out; 629 | animation-duration: 0.5s; 630 | animation-delay: 0s; 631 | animation-fill-mode: both; 632 | 633 | .noie & { 634 | animation-name: ma5-panelIn; 635 | } 636 | .ie & { 637 | animation-name: ma5-panelInIEphone; 638 | 639 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 640 | animation-name: ma5-panelInIEtablet; 641 | } 642 | } 643 | } 644 | &--active-leave { 645 | animation-timing-function: ease-out; 646 | animation-duration: 0.5s; 647 | animation-delay: 0s; 648 | animation-fill-mode: both; 649 | 650 | .noie & { 651 | animation-name: ma5-panelOut; 652 | } 653 | .ie & { 654 | animation-name: ma5-panelOutIEphone; 655 | 656 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 657 | animation-name: ma5-panelOutIEtablet; 658 | } 659 | } 660 | } 661 | &--parent-enter { 662 | animation-timing-function: ease-out; 663 | animation-duration: 0.5s; 664 | animation-delay: 0s; 665 | animation-fill-mode: both; 666 | 667 | .noie & { 668 | animation-name: ma5menuOut; 669 | } 670 | .ie & { 671 | animation-name: ma5menuOutIEphone; 672 | 673 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 674 | animation-name: ma5menuOutIEtablet; 675 | } 676 | } 677 | } 678 | &--parent-leave { 679 | animation-timing-function: ease-out; 680 | animation-duration: 0.5s; 681 | animation-delay: 0s; 682 | animation-fill-mode: both; 683 | 684 | .noie & { 685 | animation-name: ma5menuOutB; 686 | } 687 | .ie & { 688 | animation-name: ma5menuOutBIEphone; 689 | 690 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 691 | animation-name: ma5menuOutBIEtablet; 692 | } 693 | } 694 | } 695 | &.lvl-0 { 696 | text-transform: $ma5menu-panel-link-text-transform-lvl-1; 697 | } 698 | &.lvl-1 { 699 | text-transform: $ma5menu-panel-link-text-transform-lvl-2; 700 | } 701 | > ul { 702 | margin: 0; 703 | padding: 0; 704 | 705 | li { 706 | position: relative; 707 | font-size: 0; 708 | padding-right: 0; 709 | margin-bottom: 0; 710 | line-height: 0; 711 | 712 | &:first-of-type { 713 | border-top: 1px solid $ma5menu-panel-link-separator; 714 | } 715 | 716 | a, 717 | .ma5menu__category { 718 | display: inline-block; 719 | vertical-align: top; 720 | text-decoration: none !important; 721 | width: 100%; 722 | outline: none !important; 723 | border-bottom: 1px solid $ma5menu-panel-link-separator; 724 | pointer-events: none; 725 | letter-spacing: .3px; 726 | transition: color .3s ease-out, background-color .3s ease-out; 727 | padding: $ma5menu-panel-link-padding-y 20px $ma5menu-panel-link-padding-y 20px; 728 | font-size: $ma5menu-panel-link-font-size; 729 | line-height: $ma5menu-panel-link-line-height; 730 | overflow: hidden; 731 | touch-action: manipulation; 732 | min-height: $ma5menu-panel-link-height; 733 | } 734 | a { 735 | color: $ma5menu-panel-link-color; 736 | background-color: $ma5menu-panel-link-bg; 737 | 738 | &:hover { 739 | color: $ma5menu-panel-link-color-hover; 740 | background-color: $ma5menu-panel-link-bg-hover; 741 | transition: none; 742 | } 743 | } 744 | .ma5menu__category { 745 | position: relative; 746 | text-align: left; 747 | background-position: calc(100% - #{$ma5menu-panel-category-arrow-right}) 50%; 748 | color: $ma5menu-panel-category-color; 749 | background-color: $ma5menu-panel-category-bg; 750 | 751 | &:hover { 752 | color: $ma5menu-panel-category-color-hover; 753 | background-color: $ma5menu-panel-category-bg-hover; 754 | transition: none; 755 | } 756 | 757 | &.ma5menu__path { 758 | color: $ma5menu-panel-category-path-color !important; 759 | background-color: $ma5menu-panel-category-path-bg !important; 760 | 761 | &:hover { 762 | color: $ma5menu-panel-category-path-color-hover !important; 763 | background-color: $ma5menu-panel-category-path-bg-hover !important; 764 | transition: none; 765 | } 766 | } 767 | } 768 | > .ma5menu__btn--enter { 769 | + a { 770 | padding-right: ($ma5menu-button-enter-width + 10); 771 | margin-right: -$ma5menu-button-enter-width; 772 | } 773 | } 774 | } 775 | } 776 | &--active { 777 | z-index: 170; 778 | display: block; 779 | 780 | > ul { 781 | li { 782 | a, 783 | .ma5menu__category { 784 | pointer-events: auto; 785 | } 786 | } 787 | } 788 | } 789 | } 790 | &__btn--enter, 791 | &__btn--leave { 792 | font-size: 13px; 793 | cursor: pointer; 794 | display: block; 795 | position: absolute; 796 | padding: 0; 797 | top: 0; 798 | height: 100%; 799 | text-align: center; 800 | touch-action: manipulation; 801 | background-repeat: no-repeat; 802 | background-position: 50% 50%; 803 | background-size: $ma5menu-button-icon-width $ma5menu-button-icon-height; 804 | transition: background-color 0.3s ease-out; 805 | 806 | &:hover { 807 | transition: none; 808 | } 809 | } 810 | &__btn--enter { 811 | z-index: 0; 812 | left: auto; 813 | right: 0; 814 | color: $ma5menu-button-enter-color; 815 | background-color: $ma5menu-button-enter-bg; 816 | background-image: $ma5menu-button-enter-image; 817 | width: $ma5menu-button-enter-width; 818 | 819 | &:hover { 820 | color: $ma5menu-button-enter-color-hover; 821 | background-color: $ma5menu-button-enter-bg-hover; 822 | background-image: $ma5menu-button-enter-image-hover; 823 | } 824 | 825 | //pipe 826 | &:before { 827 | content: ""; 828 | display: block; 829 | width: 1px; 830 | position: absolute; 831 | top: 3px; 832 | bottom: 3px; 833 | left: -2px; 834 | background-color: $ma5menu-button-enter-pipe; 835 | transform: translateZ(0); 836 | } 837 | } 838 | &__btn--leave { 839 | left: 0; 840 | right: auto; 841 | color: $ma5menu-button-leave-color; 842 | background-color: $ma5menu-button-leave-bg; 843 | background-image: $ma5menu-button-leave-image; 844 | width: $ma5menu-button-leave-width; 845 | 846 | &:hover { 847 | color: $ma5menu-button-leave-color-hover; 848 | background-color: $ma5menu-button-leave-bg-hover; 849 | background-image: $ma5menu-button-leave-image-hover; 850 | } 851 | .ma5menu__leave:hover & { 852 | color: $ma5menu-button-leave-color-hover; 853 | background-color: $ma5menu-button-leave-bg-hover; 854 | background-image: $ma5menu-button-leave-image-hover; 855 | } 856 | // pipe 857 | &:before { 858 | content: ""; 859 | display: block; 860 | width: 1px; 861 | position: absolute; 862 | top: 0; 863 | bottom: 0; 864 | right: -2px; 865 | background-color: $ma5menu-button-leave-pipe; 866 | transform: translateZ(0); 867 | } 868 | } 869 | &__leave { 870 | font-size: $ma5menu-leave-font-size; 871 | color: $ma5menu-leave-color; 872 | background-color: $ma5menu-leave-bg; 873 | cursor: pointer; 874 | display: block; 875 | position: relative; 876 | padding: 0 44px 0 44px; 877 | text-align: center; 878 | overflow: hidden; 879 | white-space: nowrap; 880 | text-overflow: ellipsis; 881 | width: 100%; 882 | border-bottom: 1px solid $ma5menu-leave-border; 883 | height: $ma5menu-leave-height; 884 | line-height: $ma5menu-leave-height; 885 | user-select: none; 886 | margin-right: -44px; 887 | 888 | &:hover { 889 | color: $ma5menu-leave-color-hover; 890 | background-color: $ma5menu-leave-bg-hover; 891 | } 892 | 893 | + .ma5menu__btn--enter { 894 | bottom: 0; 895 | height: calc(100% - #{$ma5menu-leave-height}); 896 | top: auto; 897 | } 898 | } 899 | &__path { 900 | color: $ma5-mobile-path-color !important; 901 | background-color: $ma5-mobile-path-bg !important; 902 | } 903 | &--overflow { 904 | overflow-x: hidden !important; 905 | } 906 | &--left, 907 | &--right { 908 | &:before { 909 | content: ""; 910 | display: block; 911 | height: 100%; 912 | position: fixed; 913 | top: 0; 914 | background-color: rgba(255, 255, 255, 0.01); 915 | z-index: -1; 916 | transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear; 917 | width: 100%; 918 | } 919 | } 920 | &--active { 921 | &:before { 922 | background-color: $ma5menu-backdrop-color; 923 | transition: background-color 0.4s ease-in; 924 | z-index: 9000; 925 | } 926 | > body { 927 | .container { 928 | * { 929 | touch-action: none; 930 | pointer-events: none; 931 | } 932 | } 933 | @media (max-width: #{$ma5-mobile-menu-breakpoint - 1}) { 934 | * { 935 | pointer-events: none; 936 | } 937 | .ma5menu__toggle { 938 | pointer-events: auto; 939 | 940 | * { 941 | pointer-events: auto; 942 | } 943 | } 944 | .ma5menu__container { 945 | pointer-events: auto; 946 | 947 | * { 948 | pointer-events: auto; 949 | } 950 | .ma5menu__alert { 951 | pointer-events: none; 952 | } 953 | &--scroll { 954 | pointer-events: auto; 955 | } 956 | 957 | } 958 | } 959 | 960 | } 961 | &.has-body-scrollbar { 962 | @media (max-width: 1199px) { 963 | overflow: hidden; 964 | overflow-y: scroll; 965 | height: auto; 966 | min-height: 100%; 967 | -webkit-overflow-scrolling: touch; 968 | } 969 | } 970 | &.ma5menu--left { 971 | &:before { 972 | right: 0; 973 | } 974 | } 975 | &.ma5menu--right { 976 | &:before { 977 | left: 0; 978 | } 979 | } 980 | } 981 | &--swipe { 982 | position: relative; 983 | overflow-x: hidden !important; 984 | 985 | body { 986 | position: relative; 987 | } 988 | &.ma5menu--left { 989 | body { 990 | transition: left 0.5s ease-out; 991 | left: 0; 992 | } 993 | } 994 | &.ma5menu--right { 995 | body { 996 | transition: right 0.5s ease-out; 997 | right: 0; 998 | } 999 | } 1000 | &.ma5menu--active { 1001 | &.ma5menu--left { 1002 | body { 1003 | left: $ma5-mobile-menu-width-phone; 1004 | 1005 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 1006 | left: $ma5-mobile-menu-width-tablet; 1007 | } 1008 | } 1009 | } 1010 | &.ma5menu--right { 1011 | body { 1012 | right: $ma5-mobile-menu-width-phone; 1013 | 1014 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 1015 | right: $ma5-mobile-menu-width-tablet; 1016 | } 1017 | } 1018 | } 1019 | } 1020 | } 1021 | &__sr-only { 1022 | position: absolute; 1023 | width: 1px; 1024 | height: 1px; 1025 | padding: 0; 1026 | overflow: hidden; 1027 | clip: rect(0,0,0,0); 1028 | white-space: nowrap; 1029 | clip-path: inset(50%); 1030 | border: 0; 1031 | } 1032 | } 1033 | 1034 | // ma5menu animations 1035 | @-webkit-keyframes ma5-panelIn { 1036 | 0% { 1037 | -webkit-transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1038 | } 1039 | 100% { 1040 | -webkit-transform: translate3d(0, 0, 0); 1041 | } 1042 | } 1043 | 1044 | @keyframes ma5-panelIn { 1045 | 0% { 1046 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1047 | } 1048 | 100% { 1049 | transform: translate3d(0, 0, 0); 1050 | } 1051 | } 1052 | 1053 | @-webkit-keyframes ma5-panelOut { 1054 | 0% { 1055 | -webkit-transform: translate3d(0, 0, 0); 1056 | } 1057 | 100% { 1058 | -webkit-transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1059 | } 1060 | } 1061 | 1062 | @keyframes ma5-panelOut { 1063 | 0% { 1064 | transform: translate3d(0, 0, 0); 1065 | } 1066 | 100% { 1067 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1068 | } 1069 | } 1070 | 1071 | @-webkit-keyframes ma5menuIn { 1072 | 0% { 1073 | -webkit-transform: translate3d(0, 0, 0); 1074 | } 1075 | 100% { 1076 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1077 | } 1078 | } 1079 | 1080 | @keyframes ma5menuIn { 1081 | 0% { 1082 | transform: translate3d(0, 0, 0); 1083 | } 1084 | 100% { 1085 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1086 | } 1087 | } 1088 | 1089 | @-webkit-keyframes ma5menuOut { 1090 | 0% { 1091 | -webkit-transform: translate3d(0, 0, 0); 1092 | } 1093 | 100% { 1094 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1095 | } 1096 | } 1097 | 1098 | @keyframes ma5menuOut { 1099 | 0% { 1100 | transform: translate3d(0, 0, 0); 1101 | } 1102 | 100% { 1103 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1104 | } 1105 | } 1106 | 1107 | @-webkit-keyframes ma5menuOutB { 1108 | 0% { 1109 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1110 | } 1111 | 100% { 1112 | -webkit-transform: translate3d(0, 0, 0); 1113 | } 1114 | } 1115 | 1116 | @keyframes ma5menuOutB { 1117 | 0% { 1118 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1119 | } 1120 | 100% { 1121 | transform: translate3d(0, 0, 0); 1122 | } 1123 | } 1124 | 1125 | @media (min-width: #{$ma5-mobile-menu-breakpoint}) { 1126 | @-webkit-keyframes ma5-panelIn { 1127 | 0% { 1128 | -webkit-transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1129 | } 1130 | 100% { 1131 | -webkit-transform: translate3d(0, 0, 0); 1132 | } 1133 | } 1134 | @keyframes ma5-panelIn { 1135 | 0% { 1136 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1137 | } 1138 | 100% { 1139 | transform: translate3d(0, 0, 0); 1140 | } 1141 | } 1142 | @-webkit-keyframes ma5-panelOut { 1143 | 0% { 1144 | -webkit-transform: translate3d(0, 0, 0); 1145 | } 1146 | 100% { 1147 | -webkit-transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1148 | } 1149 | } 1150 | @keyframes ma5-panelOut { 1151 | 0% { 1152 | transform: translate3d(0, 0, 0); 1153 | } 1154 | 100% { 1155 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1156 | } 1157 | } 1158 | @-webkit-keyframes ma5menuIn { 1159 | 0% { 1160 | -webkit-transform: translate3d(0, 0, 0); 1161 | } 1162 | 100% { 1163 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1164 | } 1165 | } 1166 | @keyframes ma5menuIn { 1167 | 0% { 1168 | transform: translate3d(0, 0, 0); 1169 | } 1170 | 100% { 1171 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1172 | } 1173 | } 1174 | @-webkit-keyframes ma5menuOut { 1175 | 0% { 1176 | -webkit-transform: translate3d(0, 0, 0); 1177 | } 1178 | 100% { 1179 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1180 | } 1181 | } 1182 | @keyframes ma5menuOut { 1183 | 0% { 1184 | -webkit-transform: translate3d(0, 0, 0); 1185 | } 1186 | 100% { 1187 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1188 | } 1189 | } 1190 | @-webkit-keyframes ma5menuOutB { 1191 | 0% { 1192 | -webkit-transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1193 | } 1194 | 100% { 1195 | -webkit-transform: translate3d(0, 0, 0); 1196 | } 1197 | } 1198 | @keyframes ma5menuOutB { 1199 | 0% { 1200 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1201 | } 1202 | 100% { 1203 | transform: translate3d(0, 0, 0); 1204 | } 1205 | } 1206 | } 1207 | 1208 | // ie 1209 | @keyframes ma5-panelInIEphone { 1210 | 0% { 1211 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1212 | } 1213 | 100% { 1214 | transform: translate3d(0, 0, 0); 1215 | } 1216 | } 1217 | 1218 | @keyframes ma5-panelOutIEphone { 1219 | 0% { 1220 | transform: translate3d(0, 0, 0); 1221 | } 1222 | 100% { 1223 | transform: translate3d($ma5-mobile-menu-width-phone, 0, 0); 1224 | } 1225 | } 1226 | 1227 | @keyframes ma5menuInIEphone { 1228 | 0% { 1229 | transform: translate3d(0, 0, 0); 1230 | } 1231 | 100% { 1232 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1233 | } 1234 | } 1235 | 1236 | @keyframes ma5menuOutIEphone { 1237 | 0% { 1238 | transform: translate3d(0, 0, 0); 1239 | } 1240 | 100% { 1241 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1242 | } 1243 | } 1244 | 1245 | @keyframes ma5menuOutBIEphone { 1246 | 0% { 1247 | transform: translate3d(-$ma5-mobile-menu-width-phone, 0, 0); 1248 | } 1249 | 100% { 1250 | transform: translate3d(0, 0, 0); 1251 | } 1252 | } 1253 | 1254 | @keyframes ma5-panelInIEtablet { 1255 | 0% { 1256 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1257 | } 1258 | 100% { 1259 | transform: translate3d(0, 0, 0); 1260 | } 1261 | } 1262 | 1263 | @keyframes ma5-panelOutIEtablet { 1264 | 0% { 1265 | transform: translate3d(0, 0, 0); 1266 | } 1267 | 100% { 1268 | transform: translate3d($ma5-mobile-menu-width-tablet, 0, 0); 1269 | } 1270 | } 1271 | 1272 | @keyframes ma5menuInIEtablet { 1273 | 0% { 1274 | transform: translate3d(0, 0, 0); 1275 | } 1276 | 100% { 1277 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1278 | } 1279 | } 1280 | 1281 | @keyframes ma5menuOutIEtablet { 1282 | 0% { 1283 | transform: translate3d(0, 0, 0); 1284 | } 1285 | 100% { 1286 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1287 | } 1288 | } 1289 | 1290 | @keyframes ma5menuOutBIEtablet { 1291 | 0% { 1292 | transform: translate3d(-$ma5-mobile-menu-width-tablet, 0, 0); 1293 | } 1294 | 100% { 1295 | transform: translate3d(0, 0, 0); 1296 | } 1297 | } 1298 | 1299 | @-webkit-keyframes ma5-arrowDown { 1300 | 0% { 1301 | opacity: 1; 1302 | } 1303 | 40% { 1304 | opacity: 0; 1305 | } 1306 | 60% { 1307 | opacity: 0.5; 1308 | } 1309 | 100% { 1310 | opacity: 1; 1311 | } 1312 | } 1313 | 1314 | @keyframes ma5-arrowDown { 1315 | 0% { 1316 | opacity: 1; 1317 | } 1318 | 40% { 1319 | opacity: 0; 1320 | } 1321 | 60% { 1322 | opacity: 0.5; 1323 | } 1324 | 100% { 1325 | opacity: 1; 1326 | } 1327 | } 1328 | 1329 | --------------------------------------------------------------------------------