<!-- Navigation
+ Either `#menu-navi` or `#list-navi` will be visible
+ Default is to show `#menu-navi` but a media query overrides this
-->
<select id="menu-navi" required onchange="window.open(this.value, '_self')">
<option value="#" selected>Navigate to...</option>
<option value="/">Home</option>
<option value="/about">About</option>
<option value="/posts">Blog</option>
<option value="/cv">CV</option>
<option value="https://git.dominic-ricottone.com/~dricottone/">Personal Repository</option>
<option value="https://www.github.com/dricottone">GitHub</option>
<option value="https://wiki.dominic-ricottone.com/DominicRicottone">Wiki</option>
<option value="/chat">Live Chat</option>
<option value="/sitemap.xml">Site Map</option>
</select>
<ul id="list-navi">
<li class="shown"><a href="/"/>Home</a></li>
<li class="shown"><a href="/about">About</a></li>
<li class="shown"><a href="/posts">Blog</a></li>
<li class="shown"><a href="/cv">CV</a></li>
<li class="trigger shown target-code" tabindex="0">Code</li>
<li class="code"><a href="https://git.dominic-ricottone.com/~dricottone/">Personal</a></li>
<li class="code"><a href="https://www.github.com/dricottone">GitHub</a></li>
<li class="shown"><a href="https://wiki.dominic-ricottone.com/DominicRicottone">Wiki</a></li>
<li class="shown"><a href="/chat">Live Chat</a></li>
<li class="shown"><a href="/sitemap.xml">Site Map</a></li>
</ul>