jquery - CSS 中的响应式可滚动选项卡式导航

Question

我希望实现如下所示的导航栏。有两个版本，第一个是全屏版本，第二个是移动版本。移动设备可以向左和向右滚动以显示一周中的几天。这叫什么，这样我就可以查找示例，或者更好的是，有人知道我将如何实现它。

我只显示了下面的导航栏，但我想它实际上更像是一个选项卡式控件，因为它只会根据单击一周中的哪一天来显示不同的 div

谢谢

Answer 1

更新以包括 Bootstrap 导航栏和 jQueryUI 选项卡实现(按评论)

要实现与上面描述的完全相同的样式，您需要做一些工作，但下面的示例将实现所需的功能。该示例现在显示了基本的 Bootstrap 和 jQuery 实现。

Bootstrap 已经具有导航选项卡 ( http://getbootstrap.com/components/#nav-tabs )。 jQueryUI 也有选项卡 ( http://jqueryui.com/tabs/ )。开箱即用，两个框架都会向左浮动选项卡并换行到新行，因此您可以覆盖这些值(如下所示)。这些是具有不同选择器的相同解决方案。

这是笨蛋 ( http://plnkr.co/edit/nh4GsiSsbE6UQ0xVzF0G?p=preview )

运行示例并调整结果 Pane 的大小以查看效果

引导 CSS

.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.nav-tabs > li {
  float: none;
  display: inline-block;
}

jQueryUI CSS

.ui-tabs-nav {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.ui-tabs .ui-tabs-nav li {
  float: none;
  display: inline-block;
}

为了实现您想要的样式，您需要自定义导航元素，例如 .nav-tab > li可能.nav-tab > li.active对于 Bootstrap 。 jQueryUI 类似，只是选择器不同。

要自定义滚动条，您需要对自定义滚动条进行更多研究。这里有一个关于如何使用 WebKit 进行此操作的很好的讨论:http://css-tricks.com/custom-scrollbars-in-webkit/不过，您很可能希望找到一个很好的跨浏览器解决方案。