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

Question

我希望实现导航栏，如下所示。 有两个版本，第一个是全屏，第二个是移动。 移动设备在一周的几天内向左和向右滚动。 这是什么，所以我可以查看示例或更好的任何人都知道我将如何实现这一点。

我只显示了下面的导航栏，但我猜它实际上更像是一个标签式控件，因为它只显示不同的div，具体取决于点击哪一天

谢谢

Answer 1

更新以包含Bootstrap导航栏和jQueryUI标签实现（每条评论）

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

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

这是plunk（http://plnkr.co/edit/nh4GsiSsbE6UQ0xVzF0G?p=preview）

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

Bootstrap 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;
}

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

要自定义滚动条，您需要对自定义滚动条进行更多研究。以下是关于如何使用WebKit的一个很好的讨论：http://css-tricks.com/custom-scrollbars-in-webkit/你很可能想要找到一个很好的跨浏览器解决方案。