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

我想用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) ;
          }}

我不知道如何仅将.change与CSS一起使用，就像链接中的示例一样(它使用了javascript(，所以我使用#showblock:checked + .bar来操作动画。如何在 CSS 中使用.change？

这

在纯 CSS3 中可以通过 (ab( 使用复选框、:checked伪类选择器和通用同级选择器 ~ 来实现。

这个想法是在更高的z-index上隐藏一个不可见的(opacity: 0;(复选框，覆盖你的菜单按钮。checked 时，这将激活:checked ~ ...选择器所针对的样式，从而更改条形。

您需要调整复选框的尺寸和一般位置。

.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) ;
}

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

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

相关内容

最新更新

热门标签：