:target ist das Ziel beim Verlinken mit Anchor-Links …

Online-Demo

Demo – klickt auf das „Navigations-Burger-Symbol“ und schaut Euch den Source-Code von style.css an! Ihr könnt Euch auch das ganze Paket herunterladen…

HTML

<!-- ziel des Links ist <nav id="navi"> -->
<a href="#navi" title='Navigation sichtbar machen'><img class="burger" src="p/burger.svg" alt=""></a>

<!-- hier das Zielelement -->
<nav id="navi">
    <ul>
        <li><a href="#">Punkt 1</a></li>
        …
    </ul>
</nav>

CSS

nav {
    position: fixed;
    width: 14em;
    left: 0;
    top: 3.5em;

    /* nächste Zeile zwingt nav, die volle Höhe des Browserfensters zu nutzen */
    bottom: 0;

    /* damit ist es erst mal unsichtbar */
    display:none;
}

/* wenn es zum Target wird, wird es sichtbar */
nav:target {
    display: block;
}