This content originally appeared on DEV Community and was authored by Ibraheem
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>```
This content originally appeared on DEV Community and was authored by Ibraheem
Ibraheem | Sciencx (2024-08-22T22:10:15+00:00) HTML Native Popover – No JavaScript. Retrieved from https://www.scien.cx/2024/08/22/html-native-popover-no-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.