Search code examples
javascriptjqueryhtmlcsstransition

"Menu" to "Close" Text Transition

Menu to Close Transition

I came across a neat menu transition effect, where they replace the "menu" text with the "close" text, I found it on this site - simple.com. This happens on mobile. As well as, I have a GIF of the effect above. I'm trying to replicate the same exact effect they have.

Does anybody know how I might do this? I would like to do this using HTML, CSS, and Javascript/or jQuery.

I do not have any code to show. Due to a lack of knowledge in Javascript and jQuery. Therefore, I do not even know how to describe what's going on, and what effect/transition I'm looking for it to do.

Solution

  • Given you know the website, and you want the same effect. You can simply inspect the element, copy its html and its css. Then watch what happens when you click the element to know what JS to apply.

    This is literally copy-pasted from their source code, pretty simple(.com) if you ask me :).

    $(function() {
  $('.mobile-toggle').on('click', function() {
    $(this).toggleClass('active');
  });
});
    .mobile-toggle {
  background: #0d97ff;
  border: 2px solid #0d97ff;
  color: #ffffff;
  display: inline-block;
  float: right;
  font-size: 14px;
  font-family: "CalibreBold", helvetica, sans-serif;
  height: 34px;
  letter-spacing: 1.2px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 25px;
  position: relative;
  width: 85px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle.active {
  background: #fff;
  color: #0d97ff;
  -webkit-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: background 0.3s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle .toggle-labels {
  display: block;
  position: absolute;
  height: 68px;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle.active .toggle-labels {
  -webkit-transform: translateY(-34px);
  -moz-transform: translateY(-34px);
  -ms-transform: translateY(-34px);
  transform: translateY(-34px);
  -webkit-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -moz-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  -ms-transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
  transition: all 0.2s cubic-bezier(0.49, 0.99, 0.54, 0.98);
}

.mobile-toggle .toggle-labels .menu {
  display: block;
  height: 34px;
  left: 0;
  top: 0;
  width: 100%;
}

.mobile-toggle .toggle-labels .close {
  display: block;
  height: 34px;
  left: 0;
  top: 100%;
  width: 100%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="mobile-toggle">
  <span class="toggle-labels">
		<span class="menu">Menu</span>
    <span class="close">Close</span>
  </span>
</a>