2012-12-13 197 views
4

我试图复制谷歌的移动网站的一部分。水平滚动响应导航菜单

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

接近他们的网站的底部区域有自己的“位置”菜单,在这里你可以通过水平不同的选项用手指滚动,然后点击你想要的图标。

我想要复制的功能是水平滚动,并将页面设置为特定的宽度,以便窗口不会重新调整大小,从而取消滚动功能。

我试图获得一个代码的副本,用于使用Android的Android远程调试工具创建此代码,但我找不到该网站的这部分的具体代码,我认为它必须通过一个单独的.js文件。我也做了足够的谷歌搜索,试图再次搜索我的工作地点,试图找到另一个搜索字符串的前景与将我的头撞到砖墙的同一层次上。总之,我迷失了,超出了我的深度,并寻求帮助。任何指针或帮助将不胜感激。

在此先感谢。

+0

也许他们只隐藏了水平滚动条。 – Dim13i

+0

你是否真的试图自己写任何东西,或者你只是想让别人为你发布一些完整的代码?我想说,至少在你放弃并要求人们递交你的代码之前,你应该尝试一下。 – Zack

+0

我不是程序员,我是营销分析师,我不知道我在做什么。这些都不在我的工作描述中,我也没有为这个项目做志愿者。我没有试图自己写任何东西。我甚至在这方面工作的唯一原因是因为我工作的公司正在推动我进入这个位置,以支持他们的首席开发人员。他们为我的教育付出代价,并为此付出代价。如果我得罪了,我很抱歉。 – Eponymic

回答

4
<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; 

}

那么我会建议造型相对整个滚动平面定位你的链接。这应该在移动浏览器上达到预期效果,但会在桌面上显示滚动条