Transition hamburger / menu icon into cross /close icon using only CSS

Question

I am trying to use a hack to change the "ham menu" icon to "close" icon on click using pure CSS only. Please check the code:

.ham
{
	height: 30px;
	padding: 15px 20px;
}
.dsp-none
{
  display:none;
}
.cross
{
  display:none;
  height: 30px;
	padding: 15px 20px;	
}
.ham-icon:checked .cross
{
	display: block;
}

<input id="click" type="checkbox" name="menu" class="ham-icon dsp-none"/><label for="click" class="ham-lnk"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" class="ham tr-fl"><rect x="12" y="20" width="40" height="2"/><rect x="12" y="32" width="40" height="2"/><rect x="12" y="44" width="40" height="2"/></svg>
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="611.979px" height="611.979px" viewBox="0 0 611.979 611.979" class="cross"><g><path d="M356.781,305.982L601.453,61.311c14.033-14.033,14.033-36.771,0-50.774c-14.004-14.033-36.741-14.033-50.774,0
              L306.007,255.208L61.277,10.536c-14.004-14.033-36.771-14.033-50.774,0c-14.004,14.004-14.004,36.742,0,50.774l244.701,244.672
              L10.503,550.684c-14.004,14.004-14.004,36.771,0,50.774c7.016,7.017,16.216,10.51,25.387,10.51c9.2,0,18.371-3.493,25.387-10.51
              l244.701-244.701l244.671,244.701c7.017,7.017,16.217,10.51,25.388,10.51c9.199,0,18.399-3.493,25.387-10.51
              c14.033-14.033,14.033-36.771,0-50.774L356.781,305.982z"/></g></svg></label>

I am not able to get the desired result. On click, it should change to cross icon. No animation or transitions to use. Can anyone suggest a way around this?

Answer 1

Not sure why you are using an SVG for that, you can do it just with a bit of HTML and some CSS.

There's a comment in the example's CSS:

/* Try different values here: .25rem, .5rem, .2rem, 5rem, 10rem... */
transform-origin: 5rem center;

I personally like how the effect looks with 5rem, but you might prefer something between .25rem to 2rem.

Here's the code:

const button = document.getElementById('button');
const icon =  document.getElementById('icon');

button.onclick = () => icon.classList.toggle('close');

#button {
  position: relative;
  width: 4rem;
  height: 4rem;
  background: #000;
  cursor: pointer;
}

#button:hover {
  background: rgb(0, 100, 100);
}

#icon {
  position: absolute;
  top: 0;
  right: 1rem;
  left: 1rem;
  width: auto;
  height: 100%;
}

/* MENU ICON */

.lines,
.lines:before,
.lines:after {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  background: #FFFFFF;
  transition: 0.3s;
}

.lines {
  height: 3px;
  margin-top: -2px;
  top: 50%;
}

.lines:before,
.lines:after {
  content: '';
  height: 100%;

  /* Try different values here: .25rem, .5rem, .2rem, 5rem, 10rem... */
  transform-origin: 5rem center;
}

.lines:before {
  top: 8px;
}

.lines:after {
  top: -8px;
}

/* CLOSE ICON */

.close {
  transform: scale3d(0.8, 0.8, 0.8);
}

.close .lines {
	background: transparent;
}

.close .lines:before,
.close .lines:after {
  top: 0;
  transform-origin: 50% 50%;
}

.close .lines:before {
  transform: rotate3d(0, 0, 1, 45deg);
}

.close .lines:after {
  transform: rotate3d(0, 0, 1, -45deg);
}

<div id="button">
  <div id="icon">
    <span class="lines"></span>
  </div>
</div>

Anyway, if you just need to fix yours, the main problem is that the CSS selectors (or the HTML structure) are wrong. For example, you have this selector:

.ham-icon:checked .cross

But in your original HTML .cross is not a descendant of .ham-icon.

I changed a bit the structure of the HTML, the CSS selectors and adjusted a bit the cross icon SVG:

.hidden {
  display: none;
}

/* DEFULT: Menu icon shown, close icon hidden */

#menu-icon {
  height: 30px;
  padding: 15px 20px;
}

#close-icon {
  display:none;
  height: 30px;
  padding: 15px 20px;	
}

/* CHECKED: Menu icon hidden, close icon shown */

#checkbox:checked + #menu-icon {
  display: none;
}

#checkbox:checked ~ #close-icon {
  display: block;
}

<label>

  <input id="checkbox" type="checkbox" name="menu" class="hidden"/>

  <svg id="menu-icon"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 64 64"
    enable-background="new 0 0 64 64"
    xml:space="preserve">
    
    <rect x="12" y="20" width="40" height="2"/>
    <rect x="12" y="32" width="40" height="2"/>
    <rect x="12" y="44" width="40" height="2"/>
  </svg>

  <svg id="close-icon"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="-100 -100 800 800">
  
    <g><path d="M356.781,305.982L601.453,61.311c14.033-14.033,14.033-36.771,0-50.774c-14.004-14.033-36.741-14.033-50.774,0L306.007,255.208L61.277,10.536c-14.004-14.033-36.771-14.033-50.774,0c-14.004,14.004-14.004,36.742,0,50.774l244.701,244.672L10.503,550.684c-14.004,14.004-14.004,36.771,0,50.774c7.016,7.017,16.216,10.51,25.387,10.51c9.2,0,18.371-3.493,25.387-10.51l244.701-244.701l244.671,244.701c7.017,7.017,16.217,10.51,25.388,10.51c9.199,0,18.399-3.493,25.387-10.51
c14.033-14.033,14.033-36.771,0-50.774L356.781,305.982z"/></g>
</svg>
              
</label>