我想做这样的事情: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效果。