CSS 中的响应式 scroll-able 标签式导航

Question

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

我只在下面显示了导航栏，但我想它实际上更像是一个选项卡式控件，因为它会根据点击星期几显示不同的 div

谢谢

Answer 1

已更新 以包含 Bootstrap 导航栏和 jQueryUI 选项卡实施（根据评论）

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

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

这是原话 (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;
}

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

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

CSS 中的响应式 scroll-able 标签式导航

Responsive scroll-able tabbed navigation in CSS

css

jquery

responsive-design