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でもこのようなことが可能なのです。
ぜひ、応用してみてください。

コメント