/* jQuery.mmenu columns addon CSS */ .mm-menu.mm-columns { transition-property: transform, width, max-width; } .mm-menu.mm-columns .mm-panels > .mm-panel { width: 100%; right: auto; display: none; transition-property: transform, width; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened { border-right: 1px solid; border-color: inherit; display: block; transform: translate3d(0, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-subopened { transform: translate3d(-100%, 0, 0); z-index: 2; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-0 { transform: translate3d(0%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-0 { display: block; transform: translate3d(100%, 0, 0); } .mm-menu.mm-columns-0 { width: 80%; min-width: 140px; max-width: 0px; } html.mm-opening.mm-columns-0 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-0 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 0px) { html.mm-opening.mm-columns-0 .mm-slideout { transform: translate3d(0px, 0, 0); } } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-1 { transform: translate3d(100%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-1 { display: block; transform: translate3d(200%, 0, 0); } .mm-menu.mm-columns-1 { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening.mm-columns-1 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-1 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 550px) { html.mm-opening.mm-columns-1 .mm-slideout { transform: translate3d(440px, 0, 0); } } .mm-menu.mm-columns-1 .mm-panels > .mm-panel { width: 100%; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-2 { transform: translate3d(200%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-2 { display: block; transform: translate3d(300%, 0, 0); } .mm-menu.mm-columns-2 { width: 80%; min-width: 140px; max-width: 880px; } html.mm-opening.mm-columns-2 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-2 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 1100px) { html.mm-opening.mm-columns-2 .mm-slideout { transform: translate3d(880px, 0, 0); } } .mm-menu.mm-columns-2 .mm-panels > .mm-panel { width: 50%; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-3 { transform: translate3d(300%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-3 { display: block; transform: translate3d(400%, 0, 0); } .mm-menu.mm-columns-3 { width: 80%; min-width: 140px; max-width: 1320px; } html.mm-opening.mm-columns-3 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-3 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 1650px) { html.mm-opening.mm-columns-3 .mm-slideout { transform: translate3d(1320px, 0, 0); } } .mm-menu.mm-columns-3 .mm-panels > .mm-panel { width: 33.34%; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-4 { transform: translate3d(400%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-4 { display: block; transform: translate3d(500%, 0, 0); } .mm-menu.mm-columns-4 { width: 80%; min-width: 140px; max-width: 1760px; } html.mm-opening.mm-columns-4 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-4 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 2200px) { html.mm-opening.mm-columns-4 .mm-slideout { transform: translate3d(1760px, 0, 0); } } .mm-menu.mm-columns-4 .mm-panels > .mm-panel { width: 25%; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-5 { transform: translate3d(500%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-5 { display: block; transform: translate3d(600%, 0, 0); } .mm-menu.mm-columns-5 { width: 80%; min-width: 140px; max-width: 2200px; } html.mm-opening.mm-columns-5 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-5 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 2750px) { html.mm-opening.mm-columns-5 .mm-slideout { transform: translate3d(2200px, 0, 0); } } .mm-menu.mm-columns-5 .mm-panels > .mm-panel { width: 20%; } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-columns-6 { transform: translate3d(600%, 0, 0); } .mm-menu.mm-columns .mm-panels > .mm-panel.mm-opened:not([class*="mm-columns-"]) ~ .mm-panel:not(.mm-opened).mm-columns-6 { display: block; transform: translate3d(700%, 0, 0); } .mm-menu.mm-columns-6 { width: 80%; min-width: 140px; max-width: 2640px; } html.mm-opening.mm-columns-6 .mm-slideout { transform: translate3d(80%, 0, 0); } @media all and (max-width: 175px) { html.mm-opening.mm-columns-6 .mm-slideout { transform: translate3d(140px, 0, 0); } } @media all and (min-width: 3300px) { html.mm-opening.mm-columns-6 .mm-slideout { transform: translate3d(2640px, 0, 0); } } .mm-menu.mm-columns-6 .mm-panels > .mm-panel { width: 16.67%; }