不使用javascript操作css类_Javascript_Html_Css

不使用javascript操作css类

javascript html css

不使用javascript操作css类,javascript,html,css,Javascript,Html,Css,我想用css制作“菜单图标”，就像这个链接：，但我不想在代码中使用JavaScript 这是HTML代码： <body> <input type="checkbox" id="showblock" /> <div id="mySidenav" class="sidenav">  <img class="logo1" src="../img/logo1.png"&g

我想用css制作“菜单图标”，就像这个链接：，但我不想在代码中使用JavaScript

这是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>

我不知道如何使用

.change

就像链接中的示例中那样使用CSS（它使用javascript），所以我使用

#showblock:checked+.bar

来操纵动画如何在CSS中使用
.change
？

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

这在纯CSS3中是可能的，方法是（ab）使用复选框、

：checked

伪类选择器和常规同级选择器

其想法是在较高的

z-index

上隐藏一个不可见（

opacity:0；

）复选框，覆盖您的菜单按钮。选中

时，这将激活：checked~…
选择器所针对的样式，从而更改条形图
您将需要处理复选框的尺寸和一般位置

.container{
位置：相对位置；
宽度：35px；
高度：35px；
}
.切换{
保证金：0；
显示：块；
位置：绝对位置；
宽度：35px；
高度：27px；
不透明度：0；
大纲：无；
-webkit外观：无；
边界：无；
z指数：100；
光标：指针；
}
.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
.toggle:选中~.bar1{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.toggle:选中~.bar2{opacity:0；}
.toggle:选中~.bar3{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}

你为什么不想使用javascript？我只是想试试CSS，你能给我一些建议吗@charlietflno…没有办法用CSSNO捕捉事件，真的，但看看这个：我以前也是这样，但为什么我的不能工作？区别在哪里？区别在于标记的组织方式，以及和选择器的行为方式。我建议你在盲目使用它们之前先阅读它们的文档。是的，我读过，但仍然不起作用。我编辑了完整的html代码，但当它在移动设备中打开时，会使用我的菜单图标，因此我在@media中声明：checked。但是为什么仍然不能工作呢？
    .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) ;
          }}