我使用flexbox实用程序类通过Bootstrap 4创建了类似的内容。
使用一个小jQuery来切换
justify-content-end
类,该类将导航项目与右侧对齐,而不是与左侧对齐。您可以切换以向任一方向滑动导航。CSS过渡用于滑动动画。
演示:
https://www.codeply.com/go/IHwAx16j14
<div class="container">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<a href="#" class="btn-left btn-link toggle p-2"><i class="ion-chevron-left"></i></a>
</div>
<div class="flex-grow-1 w-100 o-hidden">
<ul class="nav nav-fill text-uppercase position-relative flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Self</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">World</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Lifestyle</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Bio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Politics</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Local</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Science</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tech</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Health</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Food</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Design</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Culture</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Travel</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">More</a>
</li>
</ul>
</div>
<div class="flex-shrink-0">
<a href="#" class="btn-right btn-link toggle p-2"><i class="ion-chevron-right"></i></a>
</div>
</div>
</div>
jQuery
$('.toggle').click(function(){
$('.nav').toggleClass("justify-content-end");
});
CSS
.o-hidden {
overflow:hidden;
}
.nav {
transition: transform 0.4s;
transform: translateX(50%);
left: -50%;
}
.nav.justify-content-end {
transform: translateX(0);
left: 0;
}