title: Show Hide, Toggle, Touch, Hover Buttons Pure CSS
body: <p>I am making this show hide / circles in wordpress, which are social icons and special links on the page itself.</p>
  
  <p>On desktops it works as expected, however on mobile resolutions:</p>
  
  <ul>
  <li>Instead of <em>hover</em>, those circles should work on <em>tap</em>, and be able to close them too, like a toggle switch</li>
  <li>The circle sub-menus should close as soon as you tap somewhere else on the screen, as well as when scrolling/dragging up/down along the screen</li>
  </ul>
  
  <p>I'm loading this menu only for touch devices, but for the moment the hover effects are added for safety.</p>
  
  <ul>
  <li>A js fiddle can be seen <a href="http://jsfiddle.net/js2020/58x4200u" rel="nofollow">here</a></li>
  <li>And a code snippet bellow:</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mobilemenu2015new2-locaction {
    top: 65px;
    position: fixed;
    right: 10px;
    margin-left: 0px;
    z-index: 22;
  }
  #mobilemenu2015new2-contact {
    top: 10px;
    position: fixed;
    right: 10px;
    margin-left: 0px;
    z-index: 22;
  }
  #mobilemenu2015new2-social {
    top: 120px;
    position: fixed;
    right: 10px;
    margin-left: 0px;
    z-index: 22;
  }
  #mobilemenu2015new2-locaction .circle,
  #mobilemenu2015new2-contact .circle,
  #mobilemenu2015new2-social .circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    margin-left: 0px;
    top: 0px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  #mobilemenu2015new2-locaction .first_circle {
    background-image: url(/images/mobile-top-location-ico.png);
    background-size: cover;
    box-shadow: 2px 2px 8px #999999;
    z-index: 3;
  }
  #mobilemenu2015new2-locaction .second_circle {
    z-index: 2;
    background-image: url(/images/mobile-location-ra.png);
    background-size: cover;
  }
  #mobilemenu2015new2-locaction .third_circle {
    z-index: 1;
    background-image: url(/images/mobile-location-reva.png);
    background-size: cover;
  }
  #mobilemenu2015new2-contact .first_circle {
    background-image: url(/images/mobile-contact-111-icon.png);
    background-size: cover;
    box-shadow: 2px 2px 8px #999999;
    z-index: 3;
  }
  #mobilemenu2015new2-contact .second_circle {
    z-index: 2;
    background-image: url(/images/mobile-email-contact-ico.png);
    background-size: cover;
  }
  #mobilemenu2015new2-contact .third_circle {
    z-index: 1;
    background-image: url(/images/mobile-mob-contact-ico.png);
    background-size: cover;
  }
  #mobilemenu2015new2-social .first_circle {
    background-image: url(/images/mobile-top-social-ico.png);
    background-size: cover;
    box-shadow: 2px 2px 8px #999999;
    z-index: 3;
  }
  #mobilemenu2015new2-social .second_circle {
    z-index: 2;
    background-image: url(/images/twitter.png);
    background-size: cover;
  }
  #mobilemenu2015new2-social .third_circle {
    z-index: 1;
    background-image: url(/images/facebook.png);
    background-size: cover;
  }
  #mobilemenu2015new2-social .fourth_circle {
    z-index: 1;
    background-image: url(/images/youtube.png);
    background-size: cover;
  }
  #mobilemenu2015new2-contact .contener_circle:hover .second_circle,
  #mobilemenu2015new2-locaction .contener_circle:hover .second_circle,
  #mobilemenu2015new2-social .contener_circle:hover .second_circle {
    box-shadow: 2px 2px 8px #999999;
    right: 45px;
  }
  #mobilemenu2015new2-contact .contener_circle:hover .third_circle,
  #mobilemenu2015new2-locaction .contener_circle:hover .third_circle,
  #mobilemenu2015new2-social .contener_circle:hover .third_circle {
    box-shadow: 2px 2px 8px #999999;
    right: 90px;
  }
  #mobilemenu2015new2-social .contener_circle:hover .fourth_circle {
    box-shadow: 2px 2px 8px #999999;
    right: 135px;
  }
  #mobilemenu2015new2-contact .contener_circle,
  #mobilemenu2015new2-locaction .contener_circle,
  #mobilemenu2015new2-social .contener_circle {
    height: 40px;
    width: 40px;
  }
  #mobilemenu2015new2-contact .contener_circle:hover,
  #mobilemenu2015new2-locaction .contener_circle:hover,
  #mobilemenu2015new2-social .contener_circle:hover {
    height: 40px;
    min-width: 155px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div align='center' id='mobilemenu2015new2-contact'&gt;
    &lt;div class='contener_circle'&gt;
      &lt;div class='circle first_circle'&gt;&lt;/div&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle second_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle third_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div align='center' id='mobilemenu2015new2-locaction'&gt;
    &lt;div class='contener_circle'&gt;
      &lt;div class='circle first_circle'&gt;&lt;/div&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle second_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle third_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div align='center' id='mobilemenu2015new2-social'&gt;
    &lt;div class='contener_circle'&gt;
      &lt;div class='circle first_circle'&gt;&lt;/div&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle second_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle third_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href='#'&gt;
        &lt;div class='circle fourth_circle'&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance</p>