css animovany ikony

Change class name on click in jQuery

by Petr Haluza

HTML

<div class="icon toggler">
      <div class="dropdown"></div>
    </div>
    
    <div class="icon toggler">
      <div class="menu"></div>
    </div>

CSS

html,
body {  padding: 0;  margin: 0;  height: 100%;  background: #1F8A70;}

.icon {  margin: 1em;  padding: 1em;  cursor: pointer; border:1px solid;}

.dropdown {  position: relative;  margin: 0.5em; width:1em; }

.dropdown:before, .dropdown:after {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  content: '';
  position: absolute;
  width: 1em;
  height: 0.31em;
  background: #fff;
  border-radius: 4px;
}
.dropdown:before {
  left: -0.3em;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.dropdown:after {
  left: 0.3em;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.on .dropdown:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.on .dropdown:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.menu {
  position: relative;
  background: #fff;
  width: 2em;
  height: 0.31em;
  margin-top: 1em;
  margin-left: 0;
  border-radius: 4px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.menu:before, .menu:after {
  content: '';
  position: absolute;
  width: 2em;
  height: 0.31em;
  background: #fff;
  border-radius: 4px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.menu:before {  top: -0.6em;}
.menu:after {  top: 0.6em;}
.on .menu {  background: transparent }
.on .menu:before, .on .menu:after { top: 0; }
.on .menu:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.on .menu:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

JavaScript

$(".toggler").click(function() {
  $(this).toggleClass("on");
  //$(this).next().slideToggle(250);
  return false;
});