我希望实现如下所示的导航栏。 有两个版本,第一个是全屏版本,第二个是移动版本。 移动设备可以向左和向右滚动以显示一周中的几天。 这叫什么,这样我就可以查找示例,或者更好的是,有人知道我将如何实现它。
我只显示了下面的导航栏,但我想它实际上更像是一个选项卡式控件,因为它只会根据单击一周中的哪一天来显示不同的 div
谢谢
最佳答案
更新以包括 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/不过,您很可能希望找到一个很好的跨浏览器解决方案。
关于jquery - CSS 中的响应式可滚动选项卡式导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28012855/