Horizontal Scroll Navigation Menu

Question

I am trying to copy part of a Google mobile site.

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

The area located at the base of their site has its own menu of "places" where you can scroll horizontally through different parameters using your fingers, then click the icon you want.

The functions that I would like to copy are horizontal scrolling, as well as preserving the specified page width, so the window does not just resize, thereby negating the scroll function.

I tried to get a copy of the code used to create this using the Android Remote Debugging tool for Chrome, but I cannot find the specific code for this part of the website, I think it should be downloaded through a separate .js file. I have also done enough Google searches that the prospect of trying another search bar is at the same level as knocking my head against a brick wall in order to repair my place of work. In short, I got lost, from the depths and asking for help. Any pointers or help would be greatly appreciated.

Thanks in advance.

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

}

I would suggest that your links be located relative to the scroll plane. this should provide the desired effect in the mobile browser, but will show a scroll bar on the desktop