Loading video...

Video Failed to Load

Go Home

Popover nav bar without JavaScript 🤙 <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() 🎬 Transitions with @​starting-style Anchor positioning to position and size things 🤏

124,577 views • 1 year ago •via X (Twitter)

8 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

Here's the @CodePen 🚀 Neat thing with using the [popover] API for things like this is all the free stuff you get 🙏 – ::backdrop – autofocus – light dismiss (esc key)

Diligentic Infotech Pvt. Ltd.'s profile picture
Diligentic Infotech Pvt. Ltd.1 year ago

Love the simplicity of this solution! 🔥 CSS transitions and popovers without JavaScript make it so lightweight and efficient. Great way to boost performance while keeping the UI smooth! 👏

Gustav Ekerot's profile picture
Gustav Ekerot1 year ago

You making the impossible possible, also, I'm stealing that little text shine effect 🥸

Beto Toro 🤘🏽's profile picture
Beto Toro 🤘🏽1 year ago

I subscribe to the newsletter but the confirmation email never arrived 😅

Brayan's profile picture
Brayan1 year ago

🤟

Khizer Rehan's profile picture
Khizer Rehan1 year ago

Thanks for sharing 🙌

Chris J. Zähller @czahller.bsky.social's profile picture
Chris J. Zähller @czahller.bsky.social1 year ago

Link please!

Shaun Rashid's profile picture
Shaun Rashid1 year ago

This is timely. I was thinking about something like this for a project of mine!

Related Videos