CSSで作ってみよう!動くメニューボタン

CSSで作ってみよう!動くメニューボタン

こんにちは、ハマーです。

季節は7月に入り夏真っ盛り。海開きされたので早速浜辺まで行ってきました。
海パン一丁で腹筋に力を入れてお腹の脂肪を隠しつつ、来年は割れた腹筋で来ようと誓うのでした。あ、去年も誓った気がするけど気のせいですね。

さて、今回はCSSで作る動くメニューのお話です。

その前に

まずURLのハッシュ(#)についてお話ししておきます。ハッシュとはURLの末尾についている「#~」みたいな記述です。
例) http://example.net/#menu

ハッシュは元々ページ内リンクを作成する時に利用されていました。同一ページ内の別の場所に移動したい場合にリンクのURLにハッシュを加えるといった感じです。

ですがハッシュは、ページ内リンク以外にCSSの記述にも利用することが出来るのです。

CSSでハッシュを使う

CSSでハッシュを利用するには、次のようにセレクタに「:target」と記述します。

これはtarget疑似クラスというセレクタの記述方法で、ハッシュの値がスタイルの適用に影響するようになります。

target疑似クラスではハッシュの値とidが一致している要素に対してスタイルが適用されます。

疑似クラスですので、セレクタに加えて記述することが可能です。
例えば、次のようにCSSを記述すれば、idが「menu」の要素の見た目のみをハッシュの値で変えるといったことが可能です。

これを利用してCSSで表示を切り替えるメニューが作成できます。
下の図の「メニュー」を押してみてください。

See the Pen wWpwNE by r-edit (@efonavi) on CodePen.

さらにアニメーションを加える

突然現れるだけでは物足りないので、さらにアニメーションを加えます。
CSSでアニメーションを行うには「transition」を使います。
今回はtransition-durationの値を設定します。

アニメーションのポイントは二つです。
・transition-durationを設定すること
・-500pxに設定されたtopの位置が、target疑似クラスの付いたスタイルが適用された時に10pxになっていること

これらの記述によって-500pxから10pxに変更された時に、transition-durationで指定された時間をかけて、以下のサンプルのように下に移動するように表示されます。

See the Pen bZabJQ by r-edit (@efonavi) on CodePen.

まとめ

Webページに動きを付けるにはjavascriptを使うのが定石ですが、CSSでもこのようなことが可能なのです。
ぜひ、応用してみてください。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...