Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Making Marketers Delight 100% Accessible : Use tab buttons on https://gauravtiwari.org to see it in action.
@media screen and (min-width:800px){
.menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus > .sub-menu, .menu-item-has-children:focus-within .sub-menu{
display: grid ; /* You can also use block or flex here */
grid-template-columns: repeat(2,1fr); /* remove if not display:grid */
width: max-content;
padding: 1em;
right:0;
margin-right:calc(0px - 10vw);
}
}
// Add aria-pressed or aria-pressed="false" in all theme buttons and input[type=submit] elements by default for this to work.
const toggle = document.querySelector('[aria-pressed]');
toggle.addEventListener('click', e => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
[aria-pressed],input[aria-pressed]{
top:-.25rem;left:-.25rem;box-shadow:.125em .125em 0 #8b0000,.25em .25em #8b0000
}
[aria-pressed=true],[aria-pressed]:hover,input[aria-pressed=true]{
box-shadow:none
}
@wpgaurav
Copy link
Author

wpgaurav commented Aug 23, 2022

You can customize css as per your needs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment