smdm-slide-menu/docs/slide-menu.css

A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions, focused on accessibility.

:root{--smdm-sm-transition-easing:ease-in-out;--smdm-sm-color-bg:#0a0a09;--smdm-sm-color-text:#eeedeb;--smdm-sm-color-icon:#eeedeb;--smdm-sm-color-active:#201f1d;--smdm-sm-color-hover:#141413;--smdm-sm-color-controls:#141413;--smdm-sm-color-overlay:#0000004d;--smdm-sm-item-padding:.9rem 1.5rem;--smdm-sm-menu-width:320px;--smdm-sm-menu-level:0;--smdm-sm-transition-duration:.3s;--smdm-sm-min-width-fold:640px}.slide-menu{--smdm-sm-calc-menu-width:var(--smdm-sm-menu-width);--smdm-sm-calc-slide-width:min(100vw, var(--smdm-sm-calc-menu-width));--smdm-sm-calc-foldable-width:var(--smdm-sm-foldable-width,var(--smdm-sm-calc-slide-width));--smdm-sm-calc-wrapper-translation:calc(var(--smdm-sm-calc-slide-width) * var(--smdm-sm-menu-level) * -1);box-sizing:border-box;max-width:100%;height:100vh;transition:transform var(--smdm-sm-transition-duration) var(--smdm-sm-transition-easing);display:none;position:fixed;top:0;left:0}@media (prefers-reduced-motion:reduce){.slide-menu{transition:none}}.slide-menu{will-change:transform;z-index:1000;background-color:var(--smdm-sm-color-bg);color:var(--smdm-sm-color-text);transform:translate(100%)}.slide-menu__slider{width:var(--smdm-sm-calc-menu-width);max-width:100%;height:100vh;overflow-x:hidden}.slide-menu__slider::-webkit-scrollbar{display:none}.slide-menu__slider{-ms-overflow-style:none;scrollbar-width:none}.slide-menu__slider__wrapper{width:fit-content;display:flex}.slide-menu__slider__wrapper .slide-menu__submenu{width:var(--smdm-sm-calc-slide-width)}.slide-menu__slider__wrapper{transform:translateX(var(--smdm-sm-calc-wrapper-translation));transition:transform var(--smdm-sm-transition-duration) var(--smdm-sm-transition-easing);will-change:transform;margin:0;padding-left:0;list-style:none}.slide-menu__submenu{width:var(--smdm-sm-calc-slide-width);margin:0;padding-left:0;list-style:none;display:none}.slide-menu__submenu--active{visibility:hidden;display:block}.slide-menu__submenu--current{display:block;visibility:visible!important}.slide-menu__submenu>.slide-menu__listitem{border-bottom:solid 1px var(--smdm-sm-color-active);width:100%;display:flex}.slide-menu__item{color:var(--smdm-sm-color-text);cursor:pointer;padding:var(--smdm-sm-item-padding);flex:1 0 auto;text-decoration:none;display:block}.slide-menu__item:hover{background-color:var(--smdm-sm-color-hover)}.slide-menu__title{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--smdm-sm-color-text);background-color:var(--smdm-sm-color-controls)}.slide-menu__control{cursor:pointer}.slide-menu__controls{color:var(--smdm-sm-color-text);background-color:var(--smdm-sm-color-controls);display:flex}.slide-menu__controls .slide-menu__control{color:var(--smdm-sm-color-text);background-color:var(--smdm-sm-color-controls);border:none;padding:.75rem 1.5rem}.slide-menu__submenu--foldable{background-color:var(--smdm-sm-color-bg);width:var(--smdm-sm-calc-foldable-width);height:100vh;overflow-x:auto}.slide-menu__item--active{background-color:var(--smdm-sm-color-active)}.slide-menu--additional-content{padding:var(--smdm-sm-item-padding);border-bottom:solid 1px var(--smdm-sm-color-active);width:100%}.slide-menu__foldable__wrapper{display:none;overflow-y:auto}.slide-menu--fold-open{width:fit-content!important}.slide-menu--fold-open .slide-menu__foldable__wrapper{display:flex}.slide-menu--fold-open .slide-menu__foldable__wrapper .slide-menu__submenu--active{display:block}.slide-menu--fold-open .slide-menu--invisible-on-open-fold{visibility:hidden}.slide-menu--fold-open .slide-menu--hidden-on-open-fold{display:none}.slide-menu__navigator{background-color:var(--smdm-sm-color-bg);color:var(--smdm-sm-color-icon);cursor:pointer;border:none}.slide-menu__overlay,.slide-menu--open-hidden{display:none}.slide-menu--open-invisible{visibility:hidden}.slide-menu--open-show{visibility:visible;display:flex}.slide-menu--open .slide-menu__overlay{overscroll-behavior:contain;background:var(--smdm-sm-color-overlay);display:block;position:fixed;inset:0}.slide-menu.right,.slide-menu.right .slide-menu__foldable__wrapper{flex-direction:row-reverse}body[data-slide-menu-level="0"] .slide-menu--invisible-on-root-level,body:not([data-slide-menu-level]) .slide-menu--invisible-on-root-level{visibility:hidden}body[data-slide-menu-level="0"] .slide-menu--hidden-on-root-level,body:not([data-slide-menu-level]) .slide-menu--hidden-on-root-level{display:none}