From 3f28ad4feba7d1b165ab283650894b586f0e8ff9 Mon Sep 17 00:00:00 2001 From: ma-5 Date: Mon, 25 Sep 2017 21:18:34 +0200 Subject: [PATCH] v3.0.1 Example, CSS changes --- css/ma5-menu.css | 2 +- css/ma5-menu.min.css | 2 +- js/ma5-menu.js | 6 +----- js/ma5-menu.min.js | 2 +- scss/ma5-menu.scss | 2 +- 5 files changed, 5 insertions(+), 9 deletions(-) diff --git a/css/ma5-menu.css b/css/ma5-menu.css index a2af00b..4e46028 100755 --- a/css/ma5-menu.css +++ b/css/ma5-menu.css @@ -1,6 +1,6 @@ /*! * MA5-mobile-menu -* v 3.0.0 +* v 3.0.1 * Copyright (c) 2016 Tomasz Kalinowski * GitHub: https://github.com/ma-5/ma5-mobile-menu */ diff --git a/css/ma5-menu.min.css b/css/ma5-menu.min.css index e888a91..d813385 100755 --- a/css/ma5-menu.min.css +++ b/css/ma5-menu.min.css @@ -1,6 +1,6 @@ /*! * MA5-mobile-menu -* v 3.0.0 +* v 3.0.1 * Copyright (c) 2016 Tomasz Kalinowski * GitHub: https://github.com/ma-5/ma5-mobile-menu */.ma5menu{display:none}.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%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#fff;background-color:transparent}.ie .ma5menu__close{fill:#fff}.ma5menu__toggle:hover .ma5menu__close{color:#ffc107;background-color:transparent}.ie .ma5menu__toggle:hover .ma5menu__close{fill:#ffc107}.ma5menu__logo{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#fff;width:40px;height:40px}.ie .ma5menu__logo{fill:#fff}.ma5menu__home:hover .ma5menu__logo{color:#ffc107}.ie .ma5menu__home:hover .ma5menu__logo{fill:#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}.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}.ma5menu__toggle:hover{color:#fff;background-color:#ef6c00}.ie .ma5menu__toggle:hover{fill:#fff}.ie .ma5menu__toggle{fill:#fff}.ma5menu__toggle .ma5menu__icon-toggle{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:42px;height:24px}.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-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:10px 8px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%206%204%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M2.999%2C3.999%20L5.999%2C1.999%20L5.999%2C0.082%20L2.999%2C2.095%20L-0.001%2C-0.001%20L-0.001%2C1.999%20L2.999%2C3.999%20L2.999%2C3.999%20Z%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}@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{display:inline-block;vertical-align:top;text-decoration:none !important;color:#fff;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;transition:color .3s ease-out;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;font-size:15px;line-height:19px;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation;min-height:50px}.ma5menu__panel>ul li a:hover{color:#ffc107;-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{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:8px 8px;-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,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%205%207%22%3E%3Cpath%20d%3D%22M4.999%2C3.502%20L2.500%2C0.001%20L0.103%2C0.001%20L2.619%2C3.502%20L-0.001%2C7.001%20L2.500%2C7.001%20L4.999%2C3.502%20L4.999%2C3.502%20Z%22%20fill%3D%22%23fff%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,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%205%207%22%3E%3Cpath%20d%3D%22M4.999%2C3.502%20L2.500%2C0.001%20L0.103%2C0.001%20L2.619%2C3.502%20L-0.001%2C7.001%20L2.500%2C7.001%20L4.999%2C3.502%20L4.999%2C3.502%20Z%22%20fill%3D%22%23ffc107%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,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%205%207%22%3E%3Cpath%20d%3D%22M0.001%2C3.498%20L2.500%2C6.999%20L4.897%2C6.999%20L2.381%2C3.498%20L5.001%2C-0.001%20L2.500%2C-0.001%20L0.001%2C3.498%20L0.001%2C3.498%20Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E");width:50px}.ma5menu__btn--leave:hover{color:#ffc107;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%205%207%22%3E%3Cpath%20d%3D%22M0.001%2C3.498%20L2.500%2C6.999%20L4.897%2C6.999%20L2.381%2C3.498%20L5.001%2C-0.001%20L2.500%2C-0.001%20L0.001%2C3.498%20L0.001%2C3.498%20Z%22%20fill%3D%22%23ffc107%22/%3E%3C/svg%3E")}.ma5menu__leave:hover .ma5menu__btn--leave{color:#ffc107;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%205%207%22%3E%3Cpath%20d%3D%22M0.001%2C3.498%20L2.500%2C6.999%20L4.897%2C6.999%20L2.381%2C3.498%20L5.001%2C-0.001%20L2.500%2C-0.001%20L0.001%2C3.498%20L0.001%2C3.498%20Z%22%20fill%3D%22%23ffc107%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}}@-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)}}@-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)}}@-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}}*,*::after,*::before{box-sizing:border-box} diff --git a/js/ma5-menu.js b/js/ma5-menu.js index 33fd2f6..3457cd8 100755 --- a/js/ma5-menu.js +++ b/js/ma5-menu.js @@ -1,13 +1,9 @@ /* * MA5 jquery mobile menu -* v3.0.0 +* v3.0.1 * GitHub: https://github.com/ma-5/ma5-mobile-menu */ function ma5menu(atributes) { - if(atributes.swipe === true) { - $('html').addClass('ma5menu--swipe'); - //$('body').wrapInner('
'); - } var position = 'left'; if(atributes.position == 'right') { position = atributes.position; diff --git a/js/ma5-menu.min.js b/js/ma5-menu.min.js index fea1719..090cc72 100755 --- a/js/ma5-menu.min.js +++ b/js/ma5-menu.min.js @@ -1 +1 @@ -function ma5menu(e){!0===e.swipe&&$("html").addClass("ma5menu--swipe");var a="left";"right"==e.position&&(a=e.position),$("html").addClass("ma5menu--"+a),$("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")}),$(".ma5menu__panel").append('
'),$(".ma5menu__tools").appendTo(".ma5menu__footer").addClass("js-append"),$(".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 n=!1;$(window).on("resize",function(){n=!0}),setInterval(function(){n&&(n=!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 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 detectElementScrollbar(){$("body").outerHeight()>$(window).height()?$("html").addClass("has-body-scrollbar"):$("html").addClass("hasnt-body-scrollbar"),$("[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")})}var htmlRootForDetectBrowser=document.getElementsByTagName("html")[0];isIE()?htmlRootForDetectBrowser.className+=" ie":htmlRootForDetectBrowser.className+=" noie",$.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(),$("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")})}),$(window).on("resize",function(){detectElementScrollbar()}),$(window).on("load",function(){detectElementScrollbar()}); \ No newline at end of file +function ma5menu(e){var a="left";"right"==e.position&&(a=e.position),$("html").addClass("ma5menu--"+a),$("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")}),$(".ma5menu__panel").append('
'),$(".ma5menu__tools").appendTo(".ma5menu__footer").addClass("js-append"),$(".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 n=!1;$(window).on("resize",function(){n=!0}),setInterval(function(){n&&(n=!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 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 detectElementScrollbar(){$("body").outerHeight()>$(window).height()?$("html").addClass("has-body-scrollbar"):$("html").addClass("hasnt-body-scrollbar"),$("[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")})}var htmlRootForDetectBrowser=document.getElementsByTagName("html")[0];isIE()?htmlRootForDetectBrowser.className+=" ie":htmlRootForDetectBrowser.className+=" noie",$.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(),$("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")})}),$(window).on("resize",function(){detectElementScrollbar()}),$(window).on("load",function(){detectElementScrollbar()}); \ No newline at end of file diff --git a/scss/ma5-menu.scss b/scss/ma5-menu.scss index 5621f6a..973ff95 100755 --- a/scss/ma5-menu.scss +++ b/scss/ma5-menu.scss @@ -1,6 +1,6 @@ /*! * MA5-mobile-menu -* v 3.0.0 +* v 3.0.1 * Copyright (c) 2016 Tomasz Kalinowski * GitHub: https://github.com/ma-5/ma5-mobile-menu */