Last active
July 11, 2022 14:51
-
-
Save ryangittings/db82c7b859b3b99409f971d493faaee8 to your computer and use it in GitHub Desktop.
Burger Menu (Progressive, Responsive, Progressively Enhanced & Fluid)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Returns back a NodeList of focusable elements | |
* that exist within the passed parnt HTMLElement | |
* | |
* @param {HTMLElement} parent HTML element | |
* @returns {NodeList} The focusable elements that we can find | |
*/ | |
export default (parent) => { | |
if (!parent) { | |
console.warn('You need to pass a parent HTMLElement'); | |
return []; | |
} | |
return parent.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<burger-menu max-width="600"> | |
<nav aria-label="primary"> | |
<ul class="nav" role="list"> | |
<li> | |
<a href="#">Home</a> | |
</li> | |
<li> | |
<a href="#">About</a> | |
</li> | |
<li> | |
<a href="#">Our Work</a> | |
</li> | |
<li> | |
<a href="#">Contact Us</a> | |
</li> | |
<li> | |
<a href="#">Your account</a> | |
</li> | |
</ul> | |
</nav> | |
</burger-menu> | |
<script src="/js/burger-menu.js" type="module"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment