水平滚动响应式导航菜单答案

【问题标题】：horizontal scrolling responsive nav menu水平滚动响应式导航菜单
【发布时间】：2012-12-01 19:48:20
【问题描述】：

我正在尝试复制谷歌移动网站的一部分。

http://www.imgur.com/9DdQz.png

他们网站底部附近的区域有他们的“地点”菜单，您可以在其中用手指水平滚动浏览不同的选项，然后点击您想要的图标。

我想复制的功能是水平滚动，同时将页面设置为特定宽度，这样窗口就不会只是重新调整大小，从而取消滚动功能。

我尝试使用适用于 Chrome 的 Android 远程调试工具获取用于创建此代码的代码副本，但我找不到网站这部分的具体代码，我认为它必须通过单独的 .js 文件。我也做了足够多的谷歌搜索，尝试另一个搜索字符串的前景与将我的头撞到砖墙上试图重新装修我的工作场所一样。简而言之，我迷路了，超出了我的深度，正在寻求帮助。任何指针或帮助将不胜感激。

提前致谢。

【问题讨论】：

也许他们只隐藏了水平滚动条。
您是否真的尝试过自己编写任何东西，或者您只是希望有人为您发布一些完整的代码？我会说你应该至少在你放弃并要求人们给你代码之前尝试一下。
我不是程序员，我是营销分析师，我不知道自己在做什么。这些都不在我的工作描述中，我也没有自愿参加这个项目。我没有尝试自己写任何东西。我什至在这方面工作的唯一原因是因为我工作的公司正在推动我担任这个职位以支持他们的首席开发人员。他们为我的教育付出了代价，并为我这样做。如有冒犯，我深表歉意。

标签： html css mobile menu nav

【解决方案1】：

<div id="scrollcontainer" >
    <div id="scrollplane" >
         <a class="nav" href="?">Link 1</a>
         <a class="nav" href="?">Link 2</a>
         <a class="nav" href="?">Link 3</a>
    </div>
    </div>

CSS：

#scrollcontainer {
        width: 100%;
        overflow-x: auto; 
        overflow-y: hidden;
        height: // some height
}

#scrollplane { 
 height: // less than scroll container ;
 width: // greater than scroll container;

}

然后，我建议您设置相对于滚动平面定位的链接。这应该在移动浏览器上实现所需的效果，但会在桌面上显示一个滚动条

【讨论】：