webbyworks/responsive-nav-bar-no-js-all.html

## responsive-nav-bar-no-js-all.html
<!DOCTYPE html>
<html>
<head>
<style>
    header .logo { float: left }
    .main-nav { display: none }
    .main-nav a { text-transform: uppercase; display: inline-block; margin: 1em; border-bottom: 1px solid; }
    .main-nav ul li { list-style-type: none; display: inline; }
    .main-nav ul { clear: both; background-color: white; }
    .showMenu, .hideMenu { font-size: 2.5em; float: right; }
    .showMenu { display: inline-block }
    .hideMenu { display: none }
    .hideMenu:target { display: none }
    .showMenu:target + .hideMenu { display: inline-block }
    .showMenu:target { display: none }
    .showMenu:target ~ .main-nav { display: inline }
</style>
</head>
<body>
    <header>
        <a href="/" class="logo">Me</a>
        <a href="#showMenu" class="showMenu" id="showMenu">≡</a>
        <a href="#hideMenu" class="hideMenu" id="hideMenu">×</a>
        <nav class="main-nav">
            <ul><li><a href="/my-link-1/">Link 1</a><li>
            <li><a href="/my-link-2/">Link 2</a></li></ul>
        </nav>
    </header>
</body>
</html>