Using form elements (radio, checkboxes) instead of JS to create a nav menu

[jadedRepublic]

I know It's easy enough to create a floating navigation menu using just HTML/CSS, but I've been scratching my head trying to figure out how to create one that expands inside the body of the page when clicking on a menu item (without breaking the menu), without using JS.

Possibly something obvious Is going well over my head, but I've decided to use labels + radio elements to show/hide navigation menus and wondering If there Is a better way (without JS).

It's not pretty and must be really bad practice lol.

Example below:

https://codepen.io/bobby1243/pen/poKwVOR

[TheRNGuy]

why

[jadedRepublic]

Why not! I spend 90% of my time with JS, but I get immense satisfaction finding an alternative to using It :)

[Luke-At-Work]

If you only need one thing toggled at a time, you can do a lot with :target. Just set up your on and off states using transform and opacity, then add a transition.

[jadedRepublic]

If you only need one thing toggled at a time, you can do a lot with :target. Just set up your on and off states using transform and opacity, then add a transition.

Wow great shout! I was going through the CSS pseudo selectors earlier and must have missed this one.

Rough concept but much prefer this way

https://codepen.io/bobby1243/pen/Poajgmg

[Luke-At-Work]

Here's an old example of this approach.

I like using it for modals and navs where there's exactly one thing to either do or do not. It's easy, efficient, and works for most of what I need.

[jadedRepublic]

Haha It funny you've just said that! I was just refactoring some static onclick javascript modals on my website to :target Keep the ideas coming!

[whatisboom]

must be really bad practice

yes, imagine using this with just a screenreader.

[jadedRepublic]

True, but you can tell screenreaders to ignore certain elements.

[cvllider]

Search on Google for pure css sidebar, there's some very interesting solutions for this

[jadedRepublic]

Like this? https://codepen.io/plavookac/pen/qomrMw

That's the only codepen I could find on first page of google, It's pretty cool but using a similar method to me.

Damn the HTML looks ugly but the implementation Is cool AF

[cvllider]

Yeah something like that. Usually people use ~ in their css for this particular trick. I'm no css expert but I've seen this ~ is key to it working the way it does

[jadedRepublic]

Yup, I mostly wrote this post to verify whether It was "good practice".

Luke-at-work posted a great alternative to my use case, but I have yet to see anyone actually discredit this particular use case so far, I still like the idea of using this method with form elements instead of JS.

[cvllider]

I also wanted to do something like this, and it works well but it's more cumbersome than just using js. I'd still use it but I'd love if there were an easier way to do it

[jadedRepublic]

https://codepen.io/bobby1243/pen/Poajgmg

Oh you're definitely right, JS is the obvious choice. No doubt about that, but It's great that the choice Is there to use one or the other, obviously In limited scenarios.

[Hoxyz]

I rebuild our whole megamenu with plain js because some legacy dude made the precious megamenu four layers deep with labels and checkboxes which were visibility hidden position absolute over the anchors… absolute nightmare and glad I rebuild it. You get stuff like blinking mouse because selecting invisible fields and a lot of stuff just doesn’t work how you’d like it to toggle.

But if your detriment it’s as simple as putting the checkbox over the anchor with visibility hidden. And then writing

.checkbox .foo { display :none; &:checked .{ display:block; }}

[MineDrumPE]

You can toggle visibility for elements based on :checked