A Site With A Javascript-Free Men

by agib

HTML

<!-- An attempt at figuring out the mechanics of Demo 1 here: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/ -->
<header id="top">
  <a href="#dropdown-nav"><div class="button" id="show">Menu</div></a>
  <h1>A site with a Javascript-free Menu</h1>
</header>
<div id="dropdown-nav">
  <a href="#top"><div class="button" id="hide">Close</div></a>
</div>

CSS

body, a { color: White; font-family: Arial, sans-serif; text-transform:uppercase; text-decoration:none; letter-spacing: 0.1em; }
a { display:inline-block; }

header { padding: 0.5em 0 0 0.5em; width: 100%; height: 3em; background-color: #333; color: White; text-transform: capitalize; }
header h1 { display:inline-block; margin-left: 0.5em; font-size: 1.5em; font-weight:bold; line-height:15%; color: #F8F8F8; }

#dropdown-nav { position:absolute; padding-top: 3em; height: 12em; width:100%; background-color:#555; display:none; }
#dropdown-nav:target { display:block; }

.button { height: 2em; width: 4em; border: 0.1em White Solid; padding: 0.2em 0 0 0.2em; }
.button#hide { position:absolute; top:-3em; left:0.5em; background-color: #333; }