Blog

スマホ時のyahooやgoogleにあるメニューを実装してみる

2016.05.17Cat:css3 デザイナー デザイン

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

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

スクリーンショット 2016-05-17 14.35.12

スクリーンショット 2016-05-17 14.37.44

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

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

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

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

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

html

css

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

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

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

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ