今まで気になっていたgoogleやyahooにあるタブのようなスマホのメニューを試してみました。

どういうものかというと、

こういう感じでアプリのメニューもこのようになっているものが多いですよね。

どーやってやっているのかなぁと気になっていたのですが、
googleのソースを見ていたら理解出来ました。
それを元に自分でも試してみたDEMOが以下になります。

DEMO
（スマホもしくはchromeのdevicemodeをスマホにしてご覧ください）

cssだけで実装しています。
（他のサイトはわかりませんが、googleはそうでした）

簡単に言ってしまうと、
メニューを折り返らないように横に配置します。
通常であればスクロールバーが表示されますが、親の要素の高さを調節することにより、スクロールバーを見えないようにしているだけです。

html

css

特殊なことは、
-webkit-overflow-scrollingプロパティを使用することにより、
慣性なスクロールが実装できます。

ちなみに、-webkit-user-selectは
画像や文字を選択(コピーやドラッグ等)をさせないためのcssです。

これを応用すればメニューだけじゃなく、画像等のコンテンツを同じようにCSSだけでスライダーのように見せることができますね。