- <a class="toggle-menu__button toggle-menu__button--show" href="#show-nav-menu">Show Menu</a>
- <a class="toggle-menu__button toggle-menu__button--hide" href="#hide-menu">Hide Menu</a>
- <ul class="toggle-menu__list" tabindex="0">
- <li class="toggle-menu__item"><a href="#">Home</a></li>
- <li class="toggle-menu__item"><a href="#">About</a></li>
- <li class="toggle-menu__item"><a href="#">Products</a></li>
- <li class="toggle-menu__item"><a href="#">Services</a></li>
- <li class="toggle-menu__item"><a href="#">Contact</a></li>
- </ul>
- </nav>
+ <nav class="toggle-menu" role="navigation">
+ <!--
+ The toggle-menu__target elements will be hidden to avoid scrolling around
+ when navigating to the fragment ids, see also
+ https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
+ -->
+ <div id="show-nav-menu" class="toggle-menu__target"></div>
+ <div id="hide-menu" class="toggle-menu__target"></div>