スマートフォンのインターフェイスをWebサイトに導入しているページをよくみかける。例えば画面上部のボタンをクリックすると、左からメニューがスライドしながら現れるようなものだ。実装はjQueryを使えば簡単にできるが、果たしてそんなアニメーションが本当に必要だろうか。
ということで、javascriptを使わずにスライドメニューが作れないか考えてみたわけだ。
- まずよくあるfloatを使った２カラムのPCサイトを用意する
- サイトの全体幅を100%とし、メインカラムのwidthも100%とする
- サイドメニューのカラムのwidthは任意に設定し、margin-leftを100%とする
- viewportを【content="width=device-width,initial-scale=1, minimum-scale=1】とする
これらをmedia queriesで幅の狭いデバイスにのみ適応するように設定すれば、スマホ用擬似スライドメニューの出来上がり。
サンプルは無いが、このブログを狭いウィンドウで開くと確認できる。
スライドメニューって何だっけ
このブログを改めてスマホで開いた人の頭の上に「？」が浮かんでいることかと思う。確かに隠れていたメニューがスライドして出現するが、「これってスライドメニューと言うのか？」という疑問だろう。
多分違う。ということで、実はこの記事はタイトル詐欺である。
やっていることは、メインカラムのwidthを100%にすることで、わざとサイドメニューが画面からはみ出すようなレイアウトにしているだけだ。
もちろん、一番上までスクロールしないとメニューが見えないという欠点はあるが、このブログは大して文量も多くないのでそこまで苦にならないと思う。
これをスライドメニューと呼ぶのは無理があるかもしれないが、僕個人としては、普段巡回しているサイトがこのような「スライドメニューもどき」を導入していても何とも思わない。
シンプルは正義、節約も正義
華麗な動作をWebで実現したいという気持ちはわかるが、目的と手段がごっちゃになっているんじゃないかと、世の大げさなUIに対して思ってしまう。
スライドメニューは、画面の小さいデバイスでもサイト閲覧をしやすくするためのUIである。なので、メニュー部分を隠すという機能がスライドメニューの本質だと僕は考える。
しかし「スライド」だから「アニメーション」ということで、手段が目的化してしまう思考がどっかにあるのではと考え、今回のように本質だけを抜き出す実験をしてみたわけだ。結果は各々が主観で判断すればいいと思う。
「こんなのスライドメニューじゃない！」と怒る人はバリバリjavascriptを書けばいいし、「これで十分だ」と共感してくれる人はシンプル道を突き進んで欲しい。
以前にも書いたが、僕は高機能で高負荷なウェブサイトが嫌いだ。ニュースサイトやブログに派手なアニメーションなんて求めてないし、そのためにPCリソースを使いたくない。というか、そもそも旧世代ノーパソに潤沢に使えるリソースなんて無い。
使用メモリが多いブラウザは、大抵の場合評価が下がる。そりゃアプリケーションとしては省メモリに越したことはないが、開いているWebサイト自体のメモリ使用量にも注目して欲しい。ポップアップを一つ実装するためだけに、何百行にも及ぶjsライブラリを読み込んでいるようなクソサイトはもっと厳しく批判されるべきだ。
