Using JQuery .Toggle with a css transform button

Question

I am try to show a menu using the toggle feature. The menu shows and then hides its self without clicking the button twice. I have added

e.preventDefault(); and this worked but the button no longer transformed as it should?

$(document).ready(function() {
  $(".spinner-master2").click(function() {
    $(".slideme").toggle("slow", function() {});
  });
});

.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  display: none;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 input[type=checkbox] {
  display: none;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {
  opacity: 0;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image"></div>
<div id="logo">js moody</div>

<div class="slideme">

</div>

<div id="menu" class="spinner-master2">
  <input type="checkbox" id="spinner-form2" />
  <label for="spinner-form2" class="spinner-spin2">
    <div class="spinner2 diagonal part-1"></div>
    <div class="spinner2 horizontal"></div>
    <div class="spinner2 diagonal part-2"></div>
  </label>
</div>

Hey, people! After last edit snippet has changed its behavior — Banzay
– Banzay, Commented Nov 4, 2016 at 14:25
the button seems to work nice from burguer icon to cross icon. is that right? — sandrina-p
– sandrina-p, Commented Nov 4, 2016 at 14:26
@Banzay I've rolled it back, the last editor changed the Jquery for some reason — Andrew Bone
– Andrew Bone, Commented Nov 4, 2016 at 14:27

GiuServ · Accepted Answer · 2016-11-04 14:34:48Z

There you go:

$(document).ready(function() {
  $("#spinner-form2").change(function() {
    $(".slideme").toggle("open");
  });


});

.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  display:none;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 input[type=checkbox] {
  display: none;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {
  opacity: 0;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="image"></div>
  <div id="logo">js moody</div>

  <div class="slideme">

  </div>

  <div id="menu" class="spinner-master2">
    <input type="checkbox" id="spinner-form2" />
    <label for="spinner-form2" class="spinner-spin2">
      <div class="spinner2 diagonal part-1"></div>
      <div class="spinner2 horizontal"></div>
      <div class="spinner2 diagonal part-2"></div>
    </label>
  </div>

</body>

</html>

Andrew Bone · Accepted Answer · 2016-11-04 15:27:03Z

With a little shuffle of your code, you can do this without any Javascript at all.

I've moved the checkbox to the start of the code and changed the CSS logic so it works with the new positioning.

Have a look.

#spinner-form2 {
  display: none;
}
.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  opacity: 0;
  transform-origin: 0 0;
  transform: scale(0);
  transition: all 400ms;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
/* when #spinner-form2 is checked */

#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .horizontal {
  opacity: 0;
}
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}
#spinner-form2[type=checkbox]:checked ~ .slideme {
  transform: scale(1);
  opacity: 1;
}

<input type="checkbox" id="spinner-form2" />

<div id="image"></div>
<div id="logo">js moody</div>

<div class="slideme"></div>

<div id="menu" class="spinner-master2">
  <label for="spinner-form2" class="spinner-spin2">
    <div class="spinner2 diagonal part-1"></div>
    <div class="spinner2 horizontal"></div>
    <div class="spinner2 diagonal part-2"></div>
  </label>
</div>

Hope this helps.

Collectives™ on Stack Overflow

Using JQuery .Toggle with a css transform button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related