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

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

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

谢谢

更新为包括Bootstrap navbar和jQueryUI选项卡实现(每条评论)

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

Bootstrap已经有导航标签(http://getbootstrap.com/components/#nav-tabs).jQueryUI也有标签(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/你很可能想要找到一个很好的跨浏览器解决方案.