title: Slide-out menu css only
body: <p>I am trying to make a css-only slide-out menu, which can be slid out and back, see my fiddle <a href="http://jsfiddle.net/EZ8SK/1/" rel="nofollow">http://jsfiddle.net/EZ8SK/1/</a> here. Now I'd like to combine the Handlers into one.
  I tried doing so with radio or checkboxes, but I could not get it to work, I guess I overlooked something. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper                  { width: 100%; height: 100%; }
  #header-wrapper           { width: 100%; height: 56px; position: relative }
  #header                   { width: 100%; height: 56px; background: #111; position: absolute; }
  
          #content-wrapper  { width: 100%; background: #333; }
              #left-nav     { width: 200px; height: 100%; background: #555; float: left; }
              #right-nav    { width: 300px; height: 100%; background: #555; float: right; }
  
      #left-nav             { margin-top: -392px; transition-duration: .4s }
      #left-nav:target      { margin-top: -56px }
      #nav-menu &gt; .menu-item &gt; .menu-item-link { display: block; padding: 20px; width: calc(200px - (2*20px)); }      
      #right-menu &gt; .menu-item &gt; .menu-item-link { display: block; padding: 20px; width: calc(300px - (2*20px)); }      
      .menu-item-link:hover { background: #222 }
  
      #menu-slideout        { position: absolute; top: 0; left: 0; color: #fff; }
      #last-item            { cursor: pointer; display: block; }
      #last-item:hover      { background: #222; cursor: pointer }
      #last-item-back:hover { background: #222; cursor: pointer }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="header-wrapper"&gt;
          &lt;div id="header"&gt;
              &lt;div id="menu-slideout"&gt;
                  &lt;div id="left-nav"&gt;
                      &lt;div class="menu"&gt;
                          &lt;ul id="nav-menu"&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="" class="menu-item-link"&gt;Menüpunkt&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="#left-nav" class="menu-item-link" id="last-item"&gt;Einblenden&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item"&gt;&lt;a href="#" class="menu-item-link" id="last-item-back"&gt;Ausblenden&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>