选项卡菜单动画

Question

我试图遵循材料设计的主题，虽然我不使用聚合物。

我想要创建一个选项卡式菜单，并将其动画化，类似于设计指南中如何指定它。

我不想重新创建涟漪效应，只是在标签底部的动画条，当一个选项卡被关注时移动。

您可以在这里看到一个示例(动画位于页面的最底部) 选项卡触摸目标动画

我不确定是否可以使用CSS来完成这一任务，但如果不能，jquery/js就不是问题了。

任何帮助都很感激。

Answer 1

注意:我不喜欢你对这个问题做了很少的努力，你自己也没有尝试过，但是我看了一眼，非常喜欢选项卡式菜单，我很想为我的帐户创建它。

所以我也可以回答这个问题，我已经对我的代码进行了注释，这样您就可以完成它，看看所有的事情都在做什么。这只是一个position: absolute的问题，滑块，然后移动到选定的标签位置，使用标签的宽度来设置它的位置。

​

$("ul li").click(function(e) {

  /* Add the slider movement */

  // what tab was pressed
  var whatTab = $(this).index();

  // Work out how far the slider needs to go
  var howFar = 160 * whatTab;

  $(".slider").css({
    left: howFar + "px"
  });
});

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
 * {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  background: #222;
}
ul {
  font-size: 0;
  position: relative;
  padding: 0;
  width: 480px;
  margin: 40px auto;
}
li {
  display: inline-block;
  width: 160px;
  height: 60px;
  background: #39CCCC;
  font-size: 16px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.slider {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: yellow;
  transition: all 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li class="slider"></li>
</ul>

​

请参阅这里以了解菜单上的连锁反应，代码片段出于某种原因不喜欢它们。