Question

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

我想创建一个标签式菜单，并为其设置动画，类似于设计指南中的指定方式。

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

你可以在这里看到一个例子（动画位于页面的最底部） Tab touch target animation

我不确定这是否只能使用CSS来完成，但如果它不能解决jquery / js问题。

任何帮助表示感谢。

Answer 1

注意： 我不喜欢你在这个问题上付出了很少的努力，你自己没有尝试过任何尝试，但我看了一下并喜欢标签菜单我想为我的Codepen帐户创建它。

所以我不妨回答这个问题，我已经对我的代码进行了评论，因此您可以通过它来查看所有内容。它只是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>

有关菜单上的涟漪效应，请参阅here，代码段由于某种原因不喜欢它们。

标签式菜单动画

1 个答案: