Manipulate css class without javascript

Question

I want to make 'menu icon' with css just like in this link: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js, But I don't want to use javacript in my code.

This is the HTML code:

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

and CSS code:

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

I don't know how to use .change just with CSS like in the example from the link (it used javascript), so I used #showblock:checked + .bar to manipulate the animation. How do I use .change with CSS?

I just want to try with CSS, can u give me suggestion? @charlietfl — Rian
– Rian, Commented Feb 11, 2017 at 15:07
Not really but check this out: stackoverflow.com/questions/42177216/… — Robert
– Robert, Commented Feb 11, 2017 at 15:23

Oka · Accepted Answer · 2017-02-11 15:40:40Z

3

This is possible in pure CSS3 by (ab)using checkboxes, the :checked pseudo-class selector, and the general sibling selector ~.

The idea is to hide an invisible (opacity: 0;) checkbox on a higher z-index, covering your menu button. When checked, this activates styles targeted by the :checked ~ ... selector, changing the bars.

You'll want to play around with the dimensions, and general positioning of the checkbox.

.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>

edited Feb 11, 2017 at 15:40

answered Feb 11, 2017 at 15:35

Oka

27.1k7 gold badges51 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rian Over a year ago

I used like this too, but why mine cant work? where is the different?

Oka Over a year ago

@Rian The difference is in how your markup is organised, and how the ~ and + selectors behave. I suggest you read the documentation for them, before trying to use them blindly.

Rian Over a year ago

yeah, I read it, but still didnt work. I edited my full html code

Rian Over a year ago

and yet, my menu icon is used when it open in mobile device, so I declare the :checked in @media. but why still cant work?

Benjamin · Accepted Answer · 2017-02-11 16:16:06Z

1

This is very complex to achieve in css at best. You can only change styles of elements when interacting with hthem by using pseudo classes. The :focus pseudoclass might come close to what you want to achieve but the problem still is that the icon will only change to "X" the first time clicking on the icon. It then only changes back when loosing the focus (e.g. by clicking somewhere else).

edited Feb 11, 2017 at 16:16

answered Feb 11, 2017 at 15:17

Benjamin

1,1041 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Manipulate css class without javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related