From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Responsive menu button with transition and transform

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Responsive menu button with transition and transform

Introduction

In this tutorial we will make a responsive menu button that transition to a new shape using css transition and transform properties. concepts such as how and in what sequence to use transform functions and transform-origin property will be discussed.

A bit on transition and transform css properties


Transition

transition is a short hand for the following css properties in order:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

So basically you can write something like following:

transition: margin-left .2s ease-in 0.5s;

Meaning that I want my element’s left margin to transition for 0.2 seconds with ease-in timing function after 0.5 second delay. Then on an action on that element for example hover or focus, you set the new margin-left. Let’s look at an example assuming that we have a div in our html with the class .mobile-nav:

.mobile-nav {
  width: 30px;
  height: 30px;
  background: #000;
  margin-left: 2px;
  transition: margin-left .2s ease-in 0.5s;
}
.mobile-nav:hover {
  margin-left: 50px;
}

So on hover of the element, we see a transition of margin-left.

See the Pen Transition by ramsich (@ramsich) on CodePen.

Timing functions

Timing function affects the speed of the animation.

  1. linear: The animation has the same speed from start to end
  2. ease: Default value. The animation has a slow start, then fast, before it ends slowly
  3. ease-in: Animation starts slower
  4. ease-out: Animation ends slower
  5. ease-in-out: Animation has a slow start and a slow end

Transform

transform property is used to translate, rotate, scale and skew an element. Let’s look at an example:

transform: translateX(100px) rotate(20deg);

This property will rotate the element 20 degrees and then translate it 100px in X Axis or horizontally. Following is a list of some of the transform functions you can use:

  1. translate(xValue, yValue)
  2. translateX(value)
  3. translateY(value)
  4. rotate(angle)
  5. scale(xValue, yValue)
  6. scaleX(value)
  7. scaleY(value)

The most important thing is that if you combine transform functions, the order in which you put them is very important in the final output. So basically

transform: translateX(100px) rotate(20deg);

is different from

transform: rotate(20deg) translateX(100px);

First one, rotates 20 deg clockwise and then translate the element horizontally by 100px but the second one first translates 100px horizontally and then rotates 20 deg. Following is the outputs respectively:

See the Pen transform by ramsich (@ramsich) on CodePen.

Both of these boxes have exactly the same position before the transform, and after transform you see that they are not. That is because the order in which we applied the transform is different even though both transform properties have identical transform functionals.

Our usecase – Responsive menu button

We want to use trasition and transform to transition and transform our menu to another form. Take a look at the example:

See the Pen EPNYBW by ramsich (@ramsich) on CodePen.

If you click on the button you can see the effect. We have used a bit of jquery to make the click interaction happen. What we do is that on the click of the button we toggle a class (.visible) on the element with class .mobile-nav. Then we add our transform functions in that class. Following is the html markup:

<div class="mobile-nav">
  <span></span>
</div>

You can see that we have a span inside our mobile-nav div. we use that span and apply pseudo elements before and after it to make our menu with 3 horizontal lines.

Following is the Jquery snippet we apply to toggle the .visible class on the div with class .mobile-nav

$(function() {
  $('.mobile-nav').click(function() {
    $(this).toggleClass('visible');
  })
});

And finally here is the css. If you have read the article so far, all the properties are quite self explanatory.

.mobile-nav {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.mobile-nav span,
.mobile-nav span:before,
.mobile-nav span:after {
  width: 24px;
  height: 2px;
  background: #000;
  position: absolute;
  top: 50%;
  position: inline-block;
}

.mobile-nav span {
  left: 3px;
  margin-top: -1px;
  transition: background 0.3s;
}

.mobile-nav.visible span {
  background: #f8f8f8;
}

.mobile-nav span:before {
  content: '';
  top: -7px;
  background-color: green;
  transition: transform .3s;
  transform-origin: 0% 50%;
}

.mobile-nav.visible span:before {
  transform: translateX(3px) translateY(-1px) rotate(45deg);
}

.mobile-nav span:after {
  content: '';
  top: 7px;
  background-color: red;
  transition: transform .3s;
  transform-origin: 0% 50%;
}

.mobile-nav.visible span:after {
  transform: translateX(3px) translateY(3px) rotate(-45deg);
}

I hope you enjoyed this tutorial and let me know if you have any questions or comments.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>