Tag: Nav Button

Today, we are going to take a look at how to build animating nav button using css properties.
Please note that I have learned this from the udemy course by Jonas Schmedtmann.

Example

As soon as you click the button, you will see there is a cool animation making the button X. This is built by pure CSS properties which we will take a look at it soon.

HTML Code

<div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
        <span class="navigation__icon"> </span>
    </label>
</div>

checkbox input type is used here to make toggle easier. Please note that the checkbox input is hidden and the navigation__icon class is used to style like a button.

CSS Code – SCSS

Please don’t forget to change the SCSS variables to actual numbers when you use it.

.navigation {
  &__button {
    background-color: $color-white;
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    position: fixed;
    top: 6rem;
    right: 6rem;
    z-index: 1000;
    box-shadow: 0 1rem 3rem rgba($color-black, .1);
    text-align: center;
    cursor: pointer;
  }    
    
  &__icon {
    position: relative;
    margin-top: 3.5rem;;

    &,
    &::before,
    &::after {
      width: 3rem;
      height: 2px;
      background-color: $color-gray-dark-3;
      display: inline-block;
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      transition: all .2s;
    }

    &::before { top: -.8rem; }
    &::after { top: .8rem; }
  }

  &__button:hover &__icon:before {
    top: -1rem;
  }
  &__button:hover &__icon:after {
    top: 1rem;
  }

  &__checkbox:checked + &__button &__icon {
    // make the middle one invisible
    background-color: transparent;
  }

  &__checkbox:checked + &__button &__icon::before {
    top: 0;
    transform: rotate(135deg);
  }

  &__checkbox:checked + &__button &__icon::after {
    top: 0;
    transform: rotate(-135deg);
  }
}

I skipped navigation class here as it’s explained in different post. Please refer to the post here for navigation logic.

As you can see in the html code, there is only 1 icon element in the button. How can there be three lines? Take a look at the line 20-27. 3 selectors are chosen – before, the element, after – and each selector make a line in the button. Please note that content, display properties are mandatory for pseudo-element usage.

Now, let’s see how you can make the animation when hover. There is a couple of steps for this.

Make a space between the lines when hover

Take a look at lines 41 – 46 in the CSS code. You need to choose before, after when hover happens and adjust the position accordingly. Don’t forget to have transition property to make it animation in line 34.

Animating the lines to form X

Take a look at lines 48 – 61 in the CSS code. What you need to do is the followings.
1. hide the middle one (background-color: transparent)
2. re-position the top and bottom (before, after pseudo elements) and rotate in opposite directions. Here 135 degree is chosen (180 – 45)

The logic is pretty simple. We just need to carefully select the element – only when the checkbox is checked. In order to do that, sibling selector (+) is used then choose navigation__icon::before and after