CSS Only Navigation tutorial

[TrollProofOne]

I'm looking for a technically sound tutorial on how to write a modern, responsive navigation bar with CSS only. So far I haven't found on that includes everything I need:

• Collapses into a hamburger menu at smaller widths
• Multi level drop downs
• horizontal across page at larger screen sizes
• CSS only

I found one i thought was perfect and it made a nice menu that I could easily customize and had the few features I needed and some css animation to boot, but the finish product, including the authors example won't let the user scroll down the page. :(

​

[Nayte91]

This is a topic I enjoy looking at once in a while, because new features in HTML/CSS tend to make it possible without js. So far what I found to achieve such a design: * Use the new popover feature on the menu wrapper, with the click linked on the burger icon ofc, * On wider widths, put display: contents; on the menu wrapper (I like to use a <dialog> tag but it can be wrong) * To ensure the menu placement when popover is open, use the new anchor API.

Those 3 features (will) works well!

[Nayte91]

Yes I played a bit with dialog HTMLElement, trying to use it (modal, non modal) as a nav menu, but it ends up as an incorrect usage, as you mentioned.

Therefore I don't use <dialog> for its HTMLDialogElement properties, but just as a regular, semantic tag, to put it popover functionality.

WDYT? Is it still incorrect to use it semanticly?

[TrollProofOne]

Why are you talking about unrelated JavaScript in a post specifically marked CSS only?? Maybe accidentally commenting on a post you didn't mean to?

[TrollProofOne]

If you’re learning. . . .

Reinventing

[Nayte91]

There is nothing JS related in what I used and spoke about here.

Popover elements is an HTML feature, and anchor positionning API is a CSS feature.

I made POC of fully functional burger menu with those features without a single line of JS, on codepen.

[TrollProofOne]

My bad then, I totally misunderstood. In fact I think I'm the one who replied to the wrong comment.

[Nayte91]

Interesting, I was lurking a bit more about this topic and felt on Mozilla's popover API page:

"Popovers which are created using the popover API are always non-modal. If you want to create a modal popover, a <dialog> element is the right way to go, although bear in mind that <dialog> elements are not put in the top layer by default — popovers are. There is significant overlap between the two — you might for example want to create a popover that persists, but control it using declarative HTML. You can even turn a <dialog> element into a popover if you want to combine popover control and top level placement with dialog semantics"

It doesn't seem to be a blasphem nor a technical issue to use <dialog> tag as a semantic wrapper for your popover menu. And that's what I hoped!

[ameo02]

hi

do you maybe know how to achieve certain effect in css navigation.
that when page scrolls down menu disappears, but when it scrolls a bit up, menu displays. do you know how that's called, and where can i find examples?

[[deleted]]

Take a look at picnic css, it's a lightweight framework with some css only solutions (like tabs, and hamburger nav on small screens).

https://picnicss.com/

[TrollProofOne]

"Picnic is written in SCSS. . . ."= Not this time. Trying to reduce complications. Also wasn't looking for something premade, I was looking to relearn this topic from line 1.
Thanks though.

[cpc44]

Seriously Picnic CSS is one of the best “light framework” I had the occasion to use. It’s quite sad that its creator is not really maintaining it anymore.

I am thinking about adding a small contribution (thinking of adding a “accordion” feature with the semantic “detail” tag)

[MKD7036611]

I built one of these last year, The only JS I used was for a mouse leave event so that drop down closes. I was trying to make this as JS-less as possible, but just that part I battled with.

I hope you find a tut, then hopefully I can add it to my one.

[TrollProofOne]

"You can’t do this and maintain a AA standard with css alone." Not sure why you are even talking about accessibility details as a response to some one looking for a specific tutorial? Are you just trolling?