title: Pure CSS off-canvas left & right menu (not bootstrap) - only one of them works
body: <p>I'm trying to do a pure CSS off-canvas left and right menu by using this source:  <a href="http://acasaprogramming.ro/pure-css-off-canvas-menu/" rel="nofollow">http://acasaprogramming.ro/pure-css-off-canvas-menu/</a></p>
  
  <p>Their examples do contain left and right menu, but not on single page. While I try to implement them into single page, only one works (which checkbox is the first - please, see the code).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;input type="checkbox" id="menu-left" class="toggle-left"&gt;
      &lt;input type="checkbox" id="menu-right" class="toggle-right"&gt;
      &lt;div class="container"&gt;
          &lt;nav class="navbar navbar-right menu-container"&gt;
              &lt;label for="menu-right" class="close-btn"&gt;X&lt;/label&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-08" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Ням&lt;br&gt;&lt;span&gt;V/08&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-09" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Дав&lt;br&gt;&lt;span&gt;V/09&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-10" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Өчигдөр&lt;br&gt;&lt;span&gt;V/10&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="." class="active" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; ӨНӨӨДӨР&lt;br&gt;&lt;span&gt;V/11&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-12" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Маргааш&lt;br&gt;&lt;span&gt;V/12&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-13" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Баа&lt;br&gt;&lt;span&gt;V/13&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-14" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Бям&lt;br&gt;&lt;span&gt;V/14&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="?date=2016-05-15" class="" data-date="2016-05-11"&gt;&lt;i class="fa fa-chevron-right fa-fw"&gt;&lt;/i&gt; Ням&lt;br&gt;&lt;span&gt;V/15&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;nav class="navbar navbar-left menu-container"&gt;
              &lt;label for="menu-left" class="close-btn"&gt;X&lt;/label&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/" class="ui-btn-active"&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-home fa-fw pull-left"&gt;&lt;/i&gt;Нүүр&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/my-bookmarks/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-star fa-fw pull-left"&gt;&lt;/i&gt;Миний Үзэх&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/movies/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-film fa-fw pull-left"&gt;&lt;/i&gt;Кино&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/sport/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-life-ring fa-fw pull-left"&gt;&lt;/i&gt;Спорт&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/todays-top/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-sort-amount-asc fa-fw pull-left"&gt;&lt;/i&gt;Өнөөдрийн Шилдэг&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/choose-channels/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-check fa-fw pull-left"&gt;&lt;/i&gt;Миний Суваг&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="separator"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/terms-of-use/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-bars fa-fw pull-left"&gt;&lt;/i&gt;Заавар&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.localhost.local?no_redirect=1"&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-desktop fa-fw pull-left"&gt;&lt;/i&gt;Dесктоп Хувилбар&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/contact-us/" class=""&gt;&lt;i class="fa fa-chevron-right fa-fw pull-right"&gt;&lt;/i&gt;&lt;i class="fa fa-envelope-o fa-fw pull-left"&gt;&lt;/i&gt;Холбоо Барих&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;div class="content"&gt;
              &lt;header&gt;
                  &lt;label for="menu-left" class="full-screen-close-left"&gt;&lt;/label&gt;
                  &lt;label for="menu-right" class="full-screen-close-right"&gt;&lt;/label&gt;
                  &lt;div class="menu-btn pull-right"&gt;
                      &lt;label for="menu-right" class="toggle-btn12"&gt;
                          right menu
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="menu-btn pull-left"&gt;
                      &lt;label for="menu-left" class="toggle-btn"&gt;
                          left menu
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pull-left{
      float:left;
  }
  .pull-right{
      float:right;
  }
  
  body{
      background:#fff;
      color:#333333;
      position:relative;
  }
  html,
  body,
  .container,
  .menu-container{
      width:100%;
      height:100%;
      overflow-x:hidden;
  }
  .navbar{
      background:#232428;
      color:#ddd;
      width:280px;
  }
  .navbar ul{
      list-style:none;
      display:block;
  }
  .navbar ul li,
  .navbar ul li a,
  .navbar ul li span,
  .navbar ul li form{
      display:block;
  }
  .navbar ul li form input{
      height:35px;
      padding:10px 20px;
  }
  .navbar ul li a,
  .navbar ul li a:visited,
  .navbar ul li span{
      color:#ddd;
      border-color:#3d3d3d;
      display:block;
      text-align:left;
      text-overflow:ellipsis;
      overflow:hidden;
      white-space:nowrap;
      border-width:1px 0 0 0;
      border-style:solid;
      font-size:14px;
      font-weight:bold;
      padding:10px 15px;
  }
  .navbar ul li a.active,
  .navbar ul li a:hover,
  .navbar ul li a:focus,
  .navbar ul li a:active{
      background:#0055c5;
      border-color:#0055c5;
      color:#fff;
  }
  .navbar ul li a i{
      margin-left:-5px;
      margin-right:8px;
      margin-top:-1px;
  }
  .navbar ul li.separator{
      background:#232428;
      border:0;
      padding:10px;
  }
  
  
  
  
  .full-screen-close-left,
  .full-screen-close-right{
      display:none;
  }
  .full-screen-close-left,
  .full-screen-close-right{
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
  }
  .toggle-btn,
  .close-btn{
      cursor:pointer;
  }
  .close-btn{
      position:absolute;
      left:280px;
      z-index:1000;
      color:#fff;
      padding:10px;
  }
  .navbar-right .close-btn{
      left:auto;
      right:280px;
  }
  .menu-container{
      height:100%;
      position:absolute;
      z-index:99;
      transition:all .25s ease;
      left:-280px;
  }
  .menu-container.navbar-right{
      left:auto;
      right:-280px;;
  }
  .toggle-left:checked + .container &gt; .menu-container.navbar-left{
      overflow:visible;
      left:0;
  }
  .toggle-right:checked + .container &gt; .menu-container.navbar-right{
      overflow:visible;
      right:0;
  }
  .toggle-left:checked + .container &gt; .content .full-screen-close-left,
  .toggle-right:checked + .container &gt; .content .full-screen-close-right{
      display:block;
      background:rgba(0,0,0,.5);
  }
  </code></pre>
  
  <p>Link to codepen: <a href="http://codepen.io/anon/pen/mPoqyN" rel="nofollow">http://codepen.io/anon/pen/mPoqyN</a></p>
  
  <p>Notice that if you click on "left menu", nothing happens, while if you click on the "right menu", menu shows.</p>
  
  <p>How to make both menus work with this code?</p>