Use anchors and :target for navigation

by Kheema Pandey

HTML

<nav>
    <ul>
        <li><a href="#page1">Page #1</a>
        </li>
        <li><a href="#page2">Page #2</a>
        </li>
        <li><a href="#page3">Page #3</a>
        </li>
    </ul>
</nav>
<div>
    <section id="page1">
         <h2>Page #1</h2>

    </section>
    <section id="page2">
         <h2>Page #2</h2>

    </section>
    <section id="page3">
         <h2>Page #3</h2>

    </section>
</div>

CSS

#page1 {
    display:block;
    position:absolute;
    top:76px;
    z-index:1
}
section:not(:target) {
    display: none;
}
section:target {
    display: block;
    background-color: #fff;
    position:relative;
    z-index:2;
}