javascript - CSS(移动版网站)通过滑动滑动菜单

Question

我正在尝试创建一个移动滑动(不是滑入式)菜单，类似于移动设备上的 google.com 菜单(如下所示)。

请注意那里的菜单允许您从左向右滑动以显示隐藏的菜单项(在本例中为图书等)。我想创造这种效果。可以用纯 CSS 完成还是有插件？

我希望溢出的元素隐藏在左侧，但滑动应该能够使它们成为焦点。

我的菜单代码如下:

<div id="nav-wrapper">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#about">About</a></li>
        <li><a data-toggle="tab" href="#settings">Settings</a></li>
        <li><a data-toggle="tab" href="#option1">Option1</a></li>
        <li><a data-toggle="tab" href="#option2">Option2</a></li>
        <li><a data-toggle="tab" href="#option3">Option3</a></li>
    </ul>
</div>

我试过了

#nav-wrapper {/* max width and height set here to hide the scroll bars of the <ul> */}
.nav-tabs {width: 300px; overflow-x: scroll; white-space: nowrap;}

代码的问题在于溢出的 <li>元素换行并隐藏。

顺便说一句，我正在使用 bootstrap 和 AngularJS。

Answer 1

您的 li 元素需要显示为行内 block 。使用 ::-webkit-scrollbar- 自定义桌面上 Webkit/Blink 浏览器的滚动条。在包装器上设置最大宽度，确保 ul 设置为显示为 block 元素并且具有无宽度限制。

在下面的demo中，容器的宽度是任意的；我只是选择 400px 来演示溢出。

fiddle :https://jsfiddle.net/5guzupzd/

::-webkit-scrollbar { width:0; height:0 }
::-webkit-scrollbar-thumb { background: transparent}
::-webkit-scrollbar-track { background-color: transparent}
* {
  box-sizing: border-box
}
#nav-wrapper {
  border:3px solid #444;
  max-width: 400px;
  margin: 0 auto;
}
ul,li {
  list-style: none;
  padding: 0
}
.nav.nav-tabs {
  -webkit-overflow-scrolling: touch; /* apply iOS momentum scrolling effect to this element */
  display: block;
  overflow: auto;
  white-space: nowrap
}
.nav.nav-tabs li {
  display: inline-block
 }
.nav.nav-tabs li a {
  display: block;
  background: mediumblue;
  color: #fff;
  padding: 16px
}

<div id="nav-wrapper">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#about">About</a></li>
        <li><a data-toggle="tab" href="#settings">Settings</a></li>
        <li><a data-toggle="tab" href="#option1">Option1</a></li>
        <li><a data-toggle="tab" href="#option2">Option2</a></li>
        <li><a data-toggle="tab" href="#option3">Option3</a></li>
    </ul>
</div>