Hello there everyone. I am a Frontend Developer with most of the experience in React. Recently, I have been trying to use plain HTML/CSS and least amount of JavaScript as possible, to make things simple and fast for the browsers.
I came across HTML's Native Popover which allowed me to make a hamburger menu with 0 JavaScript. It also has built-in accessibility support which is great.
Here's a piece of code for my hamburger menu using Popover
<button
id="hamburger-button" aria-controls="mobile-menu" aria-expanded="false" aria-haspopup="true"
aria-label="Open blog navigation" popovertarget="mobile-menu"
>
<Icon
id="hamburger-icon" name="mdi:hamburger-menu" title="Hamburger Menu Icon" width={70} height={70}
/>
</button>
<nav popover id="mobile-menu" aria-label="Main blog navigation">
<button popovertarget="mobile-menu" aria-controls="mobile-menu" aria-label="Close blog navigation">
<Icon
id="close-icon" name="mdi:close" title="Close Icon" width={70} height={70}
/>
</button>
<SiteNavLinks />
</nav>```
Top comments (0)