title: Off-screen navigation - right and left - css only
body: <p>I'm trying to create a right and left off-screen navigation drawer with only css and I'm having problems getting each side to work properly.</p>
  
  <p>I'm using checkboxes as my buttons like this:</p>
  
  <pre><code>&lt;input type="checkbox" id="toggle-right"&gt;
  &lt;input type="checkbox" id="toggle-left"&gt;
  </code></pre>
  
  <p>If I have the toggle-right place on top then the right drawer opens, but not the left.</p>
  
  <p>If I reverse the order like this:</p>
  
  <pre><code>&lt;input type="checkbox" id="toggle-left"&gt;
  &lt;input type="checkbox" id="toggle-right"&gt;
  </code></pre>
  
  <p>Toggle left will work, but not toggle right.</p>
  
  <p>I made a <a href="http://jsfiddle.net/daugaard47/V2EWM/3/" rel="nofollow">JSFiddle</a> to show you what I mean.</p>
  
  <p>If someone has time to take a look and help me figure this out I would appreciate it.</p>
  
  <p>While reviewing the <a href="http://jsfiddle.net/daugaard47/V2EWM/3/" rel="nofollow">JSFiddle</a>, reverse the order of the checkbox toggles to see what I'm talking about.</p>