DEV Community

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 wo...

Read full post

paulbrowne • Aug 27 '19 • Edited

Slightly simpler version, making use of the :not() and :target
This allows for the use of a non-hash link for the homepage.
And no need for the display:block

<style>
    section:not(:target):not(#home),
    section:target ~ #home {
        display: none
    }
</style>
<nav>
    <a href="/">home</a>
    <a href="#contact">contact</a>
    <a href="#about">about</a>
    <a href="#blog">blog</a>
</nav>
<main>
    <section id="contact">contact section...</section>
    <section id="about">about section...</section>
    <section id="blog">blog section...</section>
    <section id="home">home section...</section>
</main>

Omer Stein • Jan 11 '19

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?

Morten Olsrud • Apr 12 '19

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.

Mattia Astorino • Oct 14 '18

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

Morten Olsrud • Oct 14 '18

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.