Skip to content

Instantly share code, notes, and snippets.

@r3b

r3b/tabmenu.html

Last active August 2, 2019 20:34
Show Gist options
  • Save r3b/d39daebe7ec09b036efe4846b30a46cc to your computer and use it in GitHub Desktop.
Save r3b/d39daebe7ec09b036efe4846b30a46cc to your computer and use it in GitHub Desktop.
Download ZIP
Tabbable menu #javascript #html
Raw
tabmenu.html
<html>
<head>
<style>
.menu-submenu, .menu-submenu-open{
position:relative;
list-style-type: none;
}
.menu-submenu:before{
content: '\21e8';
position: absolute;
width:10px;
height:10px;
top: 1px;
left: -20px;
<!-- transform: translateY(-50%) rotate(-45deg); -->
}
.menu-submenu-open:before{
content: '\21e9';
position: absolute;
width:10px;
height:10px;
top: 1px;
left: -20px;
<!-- transform: translateY(-50%) rotate(-45deg); -->
}
</style>
</head>
<body>
<nav tabindex="0" role="navigation" aria-keyshortcuts="Control+M" class="menu-container" tabindex=0>
<a href="#" class="header-menu" tabindex=-1>menu</a>
<ul class="menu-items">
<li tabindex=0 role="listitem" class="menu-item">Item 1
<li tabindex=-1 role="listitem" class="menu-item menu-submenu">
<nav tabindex="0" role="navigation" class="menu-container">
<a href="#" class="header-menu" tabindex=-1>Item 2</a>
<ul class="menu-items">
<li tabindex=0 role="listitem" class="menu-item">sub Item 1
<li tabindex=0 role="listitem" class="menu-item">sub Item 2
<li tabindex=0 role="listitem" class="menu-item">sub Item 3
</ul>
</nav>
<li tabindex=-1 role="listitem" class="menu-item menu-submenu">
<nav tabindex="0" role="navigation" class="menu-container">
<a href="#" class="header-menu" tabindex=-1>Item 3</a>
<ul class="menu-items">
<li tabindex=0 role="listitem" class="menu-item">sub Item 1
<li tabindex=0 role="listitem" class="menu-item">sub Item 2
<li tabindex=0 role="listitem" class="menu-item">sub Item 3
</ul>
</nav>
<li tabindex=0 role="listitem" class="menu-item">Item 4
</ul>
</nav>
<main>
<header></header>
<content>
<input type="text"/>
</content>
<footer></footer>
</main>
<script>
const navs = document.querySelectorAll("nav.menu-container")
Array.from(navs).forEach((navbar, i) => {
const menuLink = navbar.querySelector("a.header-menu")
const menu = navbar.querySelector("ul.menu-items")
const menuItems = menu.querySelectorAll('li')
const toggleMenu = () => (menu.style.display==="none")?showMenu():hideMenu();
const showMenu = () => {
menu.style.display="block";
menu.parentNode.parentNode.classList.remove("menu-submenu")
menu.parentNode.parentNode.classList.add("menu-submenu-open")
}
const hideMenu = () => {
menu.style.display="none";
menu.parentNode.parentNode.classList.add("menu-submenu")
menu.parentNode.parentNode.classList.remove("menu-submenu-open")
}
hideMenu()
menuLink.addEventListener("click", (ev) => toggleMenu())
navbar.addEventListener("focus", ()=>showMenu())
document.addEventListener("keyup", (ev)=>{
if(ev.code === "Tab"){
if(menu.style.display!=="none"){
if (i == 0){
if(!document.activeElement.classList.contains("header-menu")
&& !document.activeElement.classList.contains("menu-items")
&& !document.activeElement.classList.contains("menu-item")
&& !document.activeElement.classList.contains("menu-container")
)
hideMenu();
}else if(i > 0){
if(document.activeElement !== navbar
&& document.activeElement !== menuLink
&& document.activeElement !== menu
&& Array.from(menuItems).indexOf(document.activeElement)===-1)
hideMenu();
}
}
}
})
document.addEventListener("click", (ev)=>{
if(menu.style.display!=="none"){
if (i == 0){
if(!document.activeElement.classList.contains("header-menu")
&& !document.activeElement.classList.contains("menu-items")
&& !document.activeElement.classList.contains("menu-item")
&& !document.activeElement.classList.contains("menu-container")
)
hideMenu();
}else if(i > 0){
if(document.activeElement !== navbar
&& document.activeElement !== menuLink
&& document.activeElement !== menu
&& Array.from(menuItems).indexOf(document.activeElement)===-1)
hideMenu();
}
}
})
})
document.addEventListener("keyup", (ev)=>{
if(ev.code="KeyM" && ev.ctrlKey === true){
document.querySelector("nav.menu-container").focus()
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment