“菜单”到“关闭”文本转换

Question

我遇到了一个整洁的菜单转换效果，他们用“关闭”文本替换“菜单”文本，我在这个网站上找到了它 - simple.com。这发生在手机上。 除此之外，我还有上述效果的GIF。 我正在努力复制他们所拥有的相同效果。

有人知道我该怎么做吗？我想用HTML，CSS和Javascript /或jQuery来做这件事。

我没有任何代码可以显示。由于缺乏Javascript和jQuery的知识。因此，我甚至不知道如何描述正在发生的事情，以及我正在寻找它的影响/转变。

Answer 1

鉴于您了解该网站，您希望获得相同的效果。您只需检查元素，复制其html及其css即可。然后观察当您单击元素以了解要应用的JS时会发生什么。

这是从他们的源代码中直接复制粘贴的，非常简单（.com）如果你问我:)。

＆＃13;

＆＃13;

$(function() {
  $('.mobile-toggle').on('click', function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;