2024-01-29
1820
#html
Mark Conroy
185698
Jan 29, 2024 ⋅ 6 min read

Build an off-canvas menu with <dialog> and web components

Mark Conroy As a frontend architect, I am interested in reducing the barriers when working on frontend systems, by using HTML, CSS, and JavaScript without the fuss of frameworks, unless necessary. My current major interests are design systems, web components, and Drupal.

Recent posts:

Authentication And Authorization In Astro

Authentication and authorization in Astro

Implement secure authentication and role-based authorization in Astro using JWT, SSR, and Astro middleware for protected routes.

Emmanuel John
May 6, 2025 ⋅ 23 min read
How To Use Custom Fonts In Tailwind CSS

How to use custom fonts in Tailwind CSS

Walk through how to use Google Fonts and locally installed fonts in your Tailwind projects to help you improve your project typography and design consistency.

Peter Ekene Eze
May 6, 2025 ⋅ 11 min read
here's why everyone's going crazy over Zod 4

Here’s why everyone’s going crazy over Zod 4

Zod 4 is not just an update; it’s a leap forward for schema validation in TypeScript that truly lives up to the hype.

Popoola Temitope
May 5, 2025 ⋅ 4 min read
A guide to the CSS cursor property

Creating custom mouse cursors with CSS

Learn what custom cursors are and how to use CSS and JavaScript to create custom cursors that will give your website a creative edge.

Samson Omojola
May 5, 2025 ⋅ 8 min read
View all posts

One Reply to "Build an off-canvas menu with <dialog> and web components"

  1. Because this method of animating the dialog’s closing process relies on clicking a specific button, it doesn’t work when the dialog is closed by other means, such as pressing the Esc key.

    Unfortunately, there doesn’t seem to be a `beforeclose` event for dialogs, only `close`, which seems to trigger AFTER the dialog has closed.

Leave a Reply