Question

如何创建类似于此处所示的导航：https://www.dropbox.com/s/0lodaqh3st2qx1o/2014-07-11_8-56-53.mp4

我实际上需要将它用作进度条，随着用户的进展它会跳转到下一页。但我希望他们能够在需要时浏览页面。

我无法添加overflow-x的iframe，因为它会添加一个滚动条。还有其他可能性或方法吗？

Answer 1

不确定是否需要垂直滚动或水平滚动，就像在该视频中一样，但它实际上是相同的（实际上垂直滚动更简单）。对于像这样的横向：

nav {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    white-space: nowrap;
    height: 40px;
}

nav li {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    margin: 0 15px;
}

您基本上可以修复菜单的高度并将其设为overflow-x。然后将li并排放置。 white-space: nowrap也很重要，以确保列表不会突破到新行。

在桌面上，您会看到滚动条，但在手机上看起来会更好。

小提琴：http://jsfiddle.net/V7mMB/

如何为移动设备进行水平滚动导航

1 个答案: