CSSだけを使ってアプリによくあるフリックすると動くメニューを作ってみた話 #CSS #scss

CSSだけを使ってアプリによくあるフリックすると動くメニューを作ってみた話 #CSS #scss

アプリを使ってるとよく見るフリックすると、そこのブロックだけが動くメニューのUI。あれを再現してみることにしました。パッと見、javascriptも使ってそうな感じですがどうせスマホだけで表示できればいいし、何よりIE9~10のサポートも切れたので、いっそCSSだけで作るのもいいかなと思いまして、実行した次第です。

まぁ、正直、こんな前置き話なんてどうでもよく(笑)、例によって個人的なメモ代わりです。

HTMLでも見ていこう

HTML自体はいたってシンプルです。

なんてことはない、<nav>~</nav>でくくっておいてナビゲーションだよ!ということを主張しただけのHTMLです。ですので、ここの説明はスルーの方向で。

sampleメニュー

このままだとただのリスト表示されただけのものですね。下のサンプルは<nav>~</nav>の代わりに<div>~</div>で囲んであります。

CSSを設定する

ただのリストをCSSでいじっていきます。

まずはSCSS版から。ただしcompassを使ってるものとして進めます。

display:flexとflex-directionで横並びになるようにして、overflow-xで横にスクロールするように設定。それを擬似要素の::-webkit-scrollbarを使って、webkitのときはスクロールバーを非表示にする。そういう仕組みで動かしてます。さらに、white-space: nowrapをつかって、ボックス内の文章の改行を許可しない形にします。

このscssをコンパイルすると、以下のようなCSSになります。

そうすると、さっきのリストがこんな感じに表示されます。

このままだと、ただ横並びになっただけで、まったくメニューっぽくないし、そもそもリストアイコンが邪魔ですね(笑)それでもスマホでみれば、ちゃんとフリックメニュー(仮)のように表示されます。

でもせっかくなので、もう少しメニューっぽく装飾していきましょうか。

CSSで装飾する

さっき使ったscssをもとに装飾をほどこしていきます。

前のリンクテキストの色を一括設定するときにも出てきたhsl色空間を使って、メニューアイテムごとに背景色を設定します。今回は7つのメニューアイテムがあるので、@for関数を使って、1から7までを繰り返すという形をとりました。その際、hsl色空間の色相部分を繰り返すたびに30°ずつずらすようにしてあります。

これをコンパイルすると、

さて、これを先ほどの微妙なリストに適用させてみます。

だいぶメニューっぽくなりました。パソコンやでかい画面で見ている分にはただ色がついただけのように見えますが、スマホの画面でみると、ちゃんとフリックメニュー(仮)になってます。

ただし、webkit系ブラウザだけしか対応してませんけど。

これで各丸にするとタブ風になるので、まるでSmartNewsのメニューです(笑)
どうせなら、やってみましょうか。

メニューアイテムをタブ風に表示する

メニューアイテムの部分をタブ風に表示するには、各メニューアイテムの上部分が各丸になっていればいいわけです。

ここでcompassを使うと楽に設定できます。

ラインマーカーを付けた部分がタブ風にするための追加部分です。compassにある上部分だけを角丸にするmixinを読み込みます。ちなみに下部分だけなら、border-bottom-radiusにすればOKです。

さて、これをコンパイルするとこうなります。

そろそろコンパイル後のCSSがごちゃごちゃしてきましたが、がんばりましょう(笑)書いているほうも割と必死です。

これを先ほどのカラフルになったリストに適用させます。

これで某SmartNewsのようなフリックメニュー(仮)が完成しました。装飾の仕方次第で、かなり自由に変更できるので使ってみたい方は自由に試してみてください。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top