File Content: _dlmenu.scss .dl-menuwrapper { width: 100%; float: left; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; z-index: 9; ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .dl-subview{ li.dl-subviewopen, li.dl-subviewopen, li.dl-subview, .dl-submenu{ border: none; } } li { position: relative; &:first-child{ border-top: none; } a { display: flex; position: relative; padding: 12px 20px; align-items: center; justify-content: space-between; } &.active > a{ } &.dl-back{ span{ padding: 0 .5em; } } &.dl-back > a{ &:before{ font-family: 'LaStudioIcons'; content: '\ea6c'; } } .dl-submenu { display: none; } } .dl-menu { margin: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; transform: translateY(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; &.dl-menu-toggle { transition: all 0.3s ease; } &.dl-menuopen { opacity: 1; pointer-events: auto; transform: translateY(0px); } } > .dl-submenu{ position: absolute; width: 100%; top: 0; left: 0; margin: 0; } } .dl-menu{ &.dl-subview{ li{ &, &.dl-subviewopen > a, &.dl-subview > a{ display: none; } &.dl-subview, &.dl-subview .dl-submenu, &.dl-subviewopen, &.dl-subviewopen > .dl-submenu, &.dl-subviewopen .dl-submenu > li{ display: block; } } } } /* No JS Fallback */ .no-js{ .dl-menuwrapper { .dl-menu { position: relative; opacity: 1; transform: none; } li { .dl-submenu { display: block; } &.dl-back { display: none; } } } } /* Animation classes for moving out and in */ .dl-menu{ // Effect 01 &.dl-animate-out-1 { animation: MenuAnimOut1 0.4s; } &.dl-animate-in-1 { animation: MenuAnimIn1 0.4s; } // Effect 02 &.dl-animate-out-2 { animation: MenuAnimOut2 0.3s ease-in-out; } &.dl-animate-in-2 { animation: MenuAnimIn2 0.3s ease-in-out; } // Effect 03 &.dl-animate-out-3 { animation: MenuAnimOut3 0.4s ease; } &.dl-animate-in-3 { animation: MenuAnimIn3 0.4s ease; } // Effect 04 &.dl-animate-out-4 { animation: MenuAnimOut4 0.4s ease; } &.dl-animate-in-4 { animation: MenuAnimIn4 0.4s ease; } // Effect 05 &.dl-animate-out-5 { animation: MenuAnimOut5 0.4s ease; } &.dl-animate-in-5 { animation: MenuAnimIn5 0.4s ease; } } .dl-menuwrapper > .dl-submenu.dl-animate-in-1 { animation: SubMenuAnimIn1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-2 { animation: SubMenuAnimIn2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-in-3 { animation: SubMenuAnimIn3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-4 { animation: SubMenuAnimIn4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-5 { animation: SubMenuAnimIn5 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-1 { animation: SubMenuAnimOut1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-2 { animation: SubMenuAnimOut2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-out-3 { animation: SubMenuAnimOut3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-4 { animation: SubMenuAnimOut4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-5 { animation: SubMenuAnimOut5 0.4s ease; } @keyframes MenuAnimOut1 { 0% { } 50% { transform: translateZ(-250px) rotateY(30deg); } 75% { transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @keyframes MenuAnimOut2 { 0% { } 100% { transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut3 { 0% { } 100% { transform: translateZ(300px); opacity: 0; } } @keyframes MenuAnimOut4 { 0% { } 100% { transform: translateZ(-300px); opacity: 0; } } @keyframes MenuAnimOut5 { 0% { } 100% { transform: translateY(40%); opacity: 0; } } @keyframes MenuAnimIn1 { 0% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn3 { 0% { transform: translateZ(300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn4 { 0% { transform: translateZ(-300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn5 { 0% { transform: translateY(40%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes SubMenuAnimIn1 { 0% { transform: translateX(50%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn3 { 0% { transform: translateZ(-300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn4 { 0% { transform: translateZ(300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn5 { 0% { transform: translateZ(-200px); opacity: 0; } 100% { transform: translateZ(0); opacity: 1; } } @keyframes SubMenuAnimOut1 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(50%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut3 { 0% { transform: translateZ(0px); opacity: 1; } 100% { transform: translateZ(-300px); opacity: 0; } } @keyframes SubMenuAnimOut4 { 0% { transform: translateZ(0px); opacity: 1; } 100% { transform: translateZ(300px); opacity: 0; } } @keyframes SubMenuAnimOut5 { 0% { transform: translateZ(0); opacity: 1; } 100% { transform: translateZ(-200px); opacity: 0; } } .dl-menuwrapper li.dl-back a{ justify-content: flex-start; } .mm-sub-menu.no-dl-submenu > li.dl-back, li.dl-back { width: 100%; } .dl-subviewopen > .mm-sub-menu.no-dl-submenu { display: flex !important; flex-flow: row wrap; } .mm-sub-menu.no-dl-submenu > li { width: 50%; } Submit