Skip to main content
Module

x/a11ynav/dist/a11y-nav.cjs

Library for accessible navigations
Go to Latest
File
.a11y-nav{align-items:center;display:flex;justify-content:space-between}.a11y-nav,.a11y-nav ul{list-style:none;margin:0;padding:0}.a11y-nav a,.a11y-nav button{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-size:1em;justify-content:flex-start;padding:0}.a11y-nav a:focus,.a11y-nav button:focus{outline:3px solid #1e90ff}.a11y-nav button[aria-expanded]:after{border-bottom:1px solid #000;border-right:1px solid #000;content:"";display:block;flex:0 0 auto;height:.35em;margin-left:.5em;transform:rotate(45deg);width:.35em}.a11y-nav button[aria-expanded=true]:after{transform:rotate(-135deg)}.a11y-nav [aria-expanded][aria-controls]~[id]{display:none}.a11y-nav [aria-expanded][aria-controls]~.a11y-nav-active{display:block}.a11y-nav [aria-expanded][aria-controls]~.a11y-nav-animate-in{-webkit-animation:a11y-nav-show .3s ease-in-out both;animation:a11y-nav-show .3s ease-in-out both}.a11y-nav [aria-expanded][aria-controls]~.a11y-nav-animate-out{-webkit-animation:a11y-nav-hide .3s ease-in-out both;animation:a11y-nav-hide .3s ease-in-out both}.a11y-nav>li{display:flex;flex:1 1 auto;justify-content:center;position:relative}.a11y-nav li ul{background:#fff;border:1px solid #000;left:0;position:absolute;top:calc(100% + 1em);width:100%}.a11y-nav li ul li{justify-content:flex-start;padding:5px}.a11y-nav li ul ul{left:100%;top:0}.a11y-nav li:last-child ul ul{left:auto;right:100%}@-webkit-keyframes a11y-nav-show{0%{opacity:0;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}@keyframes a11y-nav-show{0%{opacity:0;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes a11y-nav-hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(5%)}}@keyframes a11y-nav-hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(5%)}}