显示隐藏，切换，触摸，悬停按钮纯CSS

Question

我在wordpress中制作这个节目隐藏/圈子，这是社交图标和页面本身的特殊链接。

在台式机上，它按预期工作，但是在移动设备上：

• 而不是悬停，这些圈子应该在点击上工作，并且能够关闭它们，就像切换开关一样
• 一旦您点击屏幕上的其他位置，以及沿着屏幕向上/向下滚动/向下滚动，圆形子菜单就会关闭

我只为触摸设备加载此菜单，但暂时添加了悬停效果以确保安全。

• 可以看到js小提琴here
• 下面是一段代码：

#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;
}

<div align='center' id='mobilemenu2015new2-contact'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a href='#'>
      <div class='circle second_circle'></div>
    </a>
    <a href='#'>
      <div class='circle third_circle'></div>
    </a>
  </div>
</div>
<div align='center' id='mobilemenu2015new2-locaction'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a href='#'>
      <div class='circle second_circle'></div>
    </a>
    <a href='#'>
      <div class='circle third_circle'></div>
    </a>
  </div>
</div>
<div align='center' id='mobilemenu2015new2-social'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a href='#'>
      <div class='circle second_circle'></div>
    </a>
    <a href='#'>
      <div class='circle third_circle'></div>
    </a>
    <a href='#'>
      <div class='circle fourth_circle'></div>
    </a>
  </div>
</div>

提前致谢

Answer 1

我改变了标记＆amp; css，我认为它现在更有意义，它是一种更好的语义方法：

• 基本上当复选框为:checked时，可以触发相邻的div来显示或隐藏其内容，具体取决于复选框的状态;
• 您可以隐藏input[type='checkbox']并使用<label>或其他<tag>与下一个包含此子菜单的<div>或<tag>链接起来，例如像bellow：

---

input[type='checkbox'] + label + .submenu-container{
 /*hide the submenu here*/
     display: none;
}
input[type='checkbox']:checked + label + .submenu-container{
     /*show the submenu here*/
     display: block;
}

---

但是，如果您需要特定的标记，您可以查看我对这些复选框所做的工作，并按照我的方法进行操作 它的要求。

正如我之前所说，只有css和html，基本隐藏和显示子菜单，这就是你可以做的最大的事情。那就是它。

如果您在滚动或点按屏幕上不同的内容时需要隐藏菜单，则需要一些基本的j来完成。

---

• 查看 NON js-demo here
• 查看 JS -demo here
• 或下面的代码段

＆＃13;

＆＃13;

/*some default styling*/

.toggle-submenu-checkbox {
  display: none;
}
.mobile-social-menu li,
.mobile-social-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#mobilemenu2015new2-contact {
  top: 10px;
  position: fixed;
  right: 10px;
  margin-left: 0px;
  z-index: 22;
}
.mobile-social-menu > ul {
  /*this will add some space between menus to the bottom*/
  margin-bottom: 20px;
}
.mobile-social-menu a,
.toggle-submenu {
  display: block;
  box-shadow: 2px 2px 8px #999999;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  cursor: pointer;
}
.mobile-social-menu > ul > li {
  position: relative;
}
.mobile-social-menu > ul > li > ul {
  position: absolute;
  top: 0;
}
.mobile-social-menu > ul > li > ul > li {
  float: left;
  margin-left: 15px;
  /*some animations for submenu children*/
  position: relative;
  transition: all .2s ease-in-out;
  right: -30px;
}
/*now animate each children li, so that theyll appear as if sliding one beneath the other
you can remove this if its not required*/

.mobile-social-menu > ul > li > ul > li:nth-of-type(1) {
  right: -90px;
}
.mobile-social-menu > ul > li > ul > li:nth-of-type(2) {
  right: -60px;
}
.mobile-social-menu > ul > li > ul > li:nth-of-type(3) {
  right: -30px;
}
input[type='checkbox'] + label + ul {
  /*this will trigger the submenu to hide*/
  /*hide the submenu initially*/
  opacity: 0;
  left: -150px;
  visibility: hidden;
  transition: all .2s ease-in-out;
}
input[type='checkbox']:checked + label + ul {
  /*this will trigger the submenu to show*/
  /*show it hen the checkbox is checked*/
  opacity: 1;
  left: -180px;
  visibility: visible;
}
input[type='checkbox']:checked + label + ul > li {
  /*some animations for submenu children*/
  right: 0;
}
/*OLD STUFF*/

#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;
}

＆＃13;

<div class='mobile-social-menu' id='mobilemenu2015new2-contact'>
  <ul>
    <li>
      <!--The input id & the label for must be the same and unique from the other menus-->
      <input id='first-submenu' type='checkbox' class='toggle-submenu-checkbox' />
      <label for='first-submenu' class='toggle-submenu'></label>
      <ul>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <!--The input id & the label for must be the same and unique from the other menus-->
      <input id='second-submenu' type='checkbox' class='toggle-submenu-checkbox' />
      <label for='second-submenu' class='toggle-submenu'></label>
      <ul>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <!--The input id & the label for must be the same and unique from the other menus-->
      <input id='third-submenu' type='checkbox' class='toggle-submenu-checkbox' />
      <label for='third-submenu' class='toggle-submenu'></label>
      <ul>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
        <li>
          <a href='#'>
            <!--social icon goes here-->
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>


<!--OLD STUFF
<div align='center' id='mobilemenu2015new2-contact'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a   href='#'>
    <div class='circle second_circle'> </div>
    </a><a  href='#'>
    <div class='circle third_circle'> </div>
    </a></div>
</div>
<div align='center' id='mobilemenu2015new2-locaction'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a href='#'>
    <div class='circle second_circle'> </div>
    </a><a href='#'>
    <div class='circle third_circle'> </div>
    </a></div>
</div>
<div align='center'   id='mobilemenu2015new2-social'>
  <div class='contener_circle'>
    <div class='circle first_circle'></div>
    <a href='#' >
    <div class='circle second_circle'> </div>
    </a><a href='#'  >
    <div class='circle third_circle'> </div>
    </a><a href='#'  >
    <div class='circle fourth_circle'> </div>
    </a> </div>
</div>-->

＆＃13;

＆＃13;

＆＃13;