Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version (github.com)

I saw this on Twitter about an hour ago and was going build one as well. Nice work!

one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.

It looks cool, but to have to navigate from one side of the screen to the opposite one is quite suboptimal

Neat experiment, but this is not good design.

Design is about solving problems.

A menu is suppose to help you to quickly find and get to a specific section of your site.

Why do I have to click on a thing to reveal the menu even though on my laptop there is enough space to show it all? And then I have to move my mouse all to the other side of the screen?

Who is this for?

Nothing wrong with experimenting with CSS, but avoid ‘dribbblizing’ your designs if you intend to ship it to users who use your site for information or to get a job done.

Edit: commenting more on the iventions.com website where this effect is in use.

Flashback to the days of Macromedia Flash.

Hola

Good job! Looks amazing! It is a great way to call attention to content.

I'm pretty forgiving about accessibility (I'm able to say this at all because I don't have to rely rigidly on accessibility tools) but nav menus feel like a baseline we shouldn't muck with. Tabbing doesn't seem to respond very well in the live example, and at least in the limited demo you can't expand the listing without using a mouse (I thought it would respond to a space with the :checked pseudo, but seems not).

Very neat.

You made me recalled we made something similar with growing circular on mobile menu the last decade. It was cool for our marketing event website.

calc(1.42 * 100vmax)

is the same as

142vmax

Just saying :-)

Is there a demo? The link points to a github repo, and github pages is not active

Site is death hugged? Anyone have a working link?

This is just awesome!

Wrt to the remarks about this being bad design: not everything is meant for (immediate) usability. Sometimes, a web page functions or doubles as marketing material.

And there's more than "minimal number of interactions" functionality. People generally like good looking stuff. While it may be superfluous, it may feel more pleasing than yet another dark gray text on a light grey square. It may even help remembering navigation, since it's easier to remember deviating design.

As expected, this doesn't work with non-standard browser window sizes and is butchered on mobile in horizontal mode.

But since the original implementation is also broken, I guess that's OK?

We really have a low bar for quality these days. I hope this won't be used anywhere that's relevant.

That looks really cool. No idea what to use it in, but it’s great.

This is not mobile friendly. Was that intentional?

I like the demo. It's bold, creative, and dynamic. Will there be more explorations? Maybe a writeup on the design to code process?

I am not a big fan of that kind of UI. You have to move your mouse all the way top left and then all the way bottom right. It's the worst possible distance-to-move you can come up with. Always always minimize distance-to-move with it comes to designing good UI's.

Cool effect. Starred

looks really cool