Question

我想制作菜单图标＆＃39;使用css就像在这个链接中一样：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js，但我不想在我的代码中使用javacript。

这是HTML代码：

  <body>
    <input type="checkbox" id="showblock" />

    <div id="mySidenav" class="sidenav"> <!-- CSSnya di 2691 -->
      <img class="logo1" src="../img/logo1.png"><br><br>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>

    <div id ="contoh" class="content-section-b">
        <div class="mobiletoggle" >
                    <label for="showblock" class="bar1"></label>
                    <label for="showblock" class="bar2"></label>
                    <label for="showblock" class="bar3"></label>
        </div>
  </body>

和CSS代码：

    .mobiletoggle{ float:right;}
    .mobiletoggle label{ display: block; cursor: pointer; }
    #showblock{
      display: none;
    }
    .bar1, .bar2, .bar3 {
        width: 30px;
        height: 3px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
    @media screen and (min-width:768px){.mobiletoggle{ display:none;}}
    @media screen and (max-width:767px) {
          .sidenav{ 
            width:0px;
            height: 100%;
            padding-top: 3%;
            background-color: #fff;
            opacity: 0.9;
          }
          #showblock:checked + .sidenav {
            width: 85%;
            transition: 0.8s;
          }

          #showblock:checked + .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
            transform: rotate(-45deg) translate(-9px, 6px) ;
          }

          #showblock:checked + .bar2 {opacity: 0;}

          #showblock:checked + .bar3 {
           -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
           transform: rotate(45deg) translate(-8px, -8px) ;
          }}

我不知道如何使用CSS .change就像链接中的示例（使用javascript）一样，所以我使用#showblock:checked + .bar来操纵动画。 如何将.change与CSS结合使用？

Answer 1

这在css中实现起来非常复杂。您只能在使用伪类与hthem交互时更改元素的样式。：焦点伪类可能接近你想要实现的目标，但问题仍然是图标只会变为＆＃34; X＆＃34;第一次点击图标。然后只有在失去焦点时才会改变（例如，通过点击其他地方）。

Answer 2

这可以在纯CSS3中通过（ab）使用复选框，:checked伪类选择器和一般兄弟选择器~来实现。

我们的想法是在较高的opacity: 0;上隐藏一个不可见的{z-index）复选框，覆盖菜单按钮。当checked时，这会激活:checked ~ ...选择器定位的样式，更改条形。

您想要使用尺寸以及复选框的常规定位。

＆＃13;

.container {
    position: relative;
    width: 35px;
    height: 35px;
}

.toggle {
  margin: 0;
  display: block;
  position: absolute;
  width: 35px;
  height: 27px;
  opacity: 0;
  
  outline: none;
  -webkit-appearance: none;
  border: none;
  
  z-index: 100;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.toggle:checked ~ .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.toggle:checked ~ .bar2 {opacity: 0;}

.toggle:checked ~ .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

＆＃13;

<div class="container">
  <input type="checkbox" class="toggle" />
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

＆＃13;

在没有javascript的情况下操作css类

2 个答案: