100% Pure HTML/CSS Page Navigation - No JavaScript Required

Morten Olsrud on October 13, 2018

Build a page navigation system using only HTML and CSS This is a little trick I've acquired over the years, and for most use cases it works wond... [Read Full]
markdown guide
 

Thanks for the hack! I learned a lot from it!
One question though, from some reason every time I press a href on a page (that is not the default, lets call it page2) directing to somewhere on page2, it suddenly displays the default page.
Is there a chance that when I press another link, that is not a page, the :target{ display:block;} is activated anyways?

 

Sorry for the late comeback.

If the other links you are using internally on the page causes the hash in the URL to change, then yes, what you are describing is correct and the expected behaviour. This trick relies on the hash in the URL, as that is what triggers the CSS :target selector.

 
 

Another big caveat is the accessibility. We should use aria-attributes, but at this point we are already using js.

 

Yeah, I'd love to do that, but I havent found a way for CSS selectors to work on aria. I'm also unsure how a screen-reader or braille-board would react to most SPAs to be honest.

 

You should probably use the attribute selector [aria-active]{} but as i said, you need js.

Regardless of JS, that selector was new to me 😊

code of conduct - report abuse