我想做这样的事情:http://www.jqueryscript.net/demo/Material-Design-Sliding-Tab-Menu-With-jQuery-CSS3/作为我的Rails应用程序中的菜单。应播放滑块的(下划线)滑动动画,并且页面应同时加载。

我设法通过将菜单设置为data-turbolinks-permanent来使滑块在我单击的链接下移动,但是我为滑块设置的过渡无法播放-它只是跳跃。我也尝试使用jquery.animate代替过渡,但是动画非常延迟,缓慢且断断续续。有什么办法可以通过Turbolinks实现这一目标?

  $('.menu-item').on 'click', () ->
    return if $(this).hasClass('slider')
    slider = $('.slider')
    slider.css('width', $(this).width())
    slider.css('left', $(this).offset().left - ($(window).width()-$('#wrapper').width())/2)


和HTML:

<ul id="menu" data-turbolinks-permanent>
  <li class="menu-item underline"><%= link_to 'Item1', root_url %></li>
  <li class="menu-item underline"><a href="#">Item2</a></li>
  <li class="menu-item underline"><a href="#">Item3</a></li>
  <li class="menu-item underline"><a href="#">Item4</a></li>
  <li class="menu-item underline"><a href="#">Item5</a></li>
  <li class="slider"></li>
</ul>


和CSS(Sass)

.slider
   display: block
   position: absolute
   bottom: 0
   left: 0
   height: 4px
   width: 90px
   background: black
   transition: all .3s linear

最佳答案

您为什么不使用这个出色的框架? materializecss.com/tabs.html

无论如何,如果您真的想自己制作,可以并排放置n个宽度为100vw的标签,并在标题中创建n个元素。使用jquery进行滑动效果,使用纯id hrefing进行onClick效果。

09-09 21:58
查看更多