アニメーション付きハンバーガーメニューを作るなら「Hamburgers」
2016年4月 9日
「ハンバーガーメニュー」という名称をご存知でしょうか。
スマートフォン用のサイトで良く見かける、メインメニューが格納されたメニューボタンのことです。 通常は三本の横線で表示されていますが、クリックしてメニューを開くと×ボタンに表示が変化する、というのが特長となっています。
そんなハンバーガーメニュー、ただ三本線と×とが切り替わるボタンよりは、変化のアニメーションがついていた方が、印象にも深く残りますよね。 本日は、そんなハンバーガーメニュー用のCSS3アニメーションコードを手に入れることができるライブラリ「Hamburgers」をご紹介します。
このサイトで用意されているのは、14パターンのハンバーガーメニュー用CSSアニメーションです。 どんなアニメーションがあるかプレビューしたい方は、好きなカラーブロックをクリックしましょう。
使いたいアニメーションが決まったら、後は
- 1. CSSファイルをダウンロードする
- 2. headタグ内にダウンロードしたCSSファイルをリンクさせるlinkタグを記述する
- 3. サイト内で紹介されているハンバーガーメニューに必要なソースコードを記述する
...という手順で作成することができます。
CSS3 3D Transformsが実装されているブラウザであれば、このアニメーションを表示することができます。 スマートフォン対応のサイト制作をしている方、ハンバーガーメニューをオリジナルサイト制作に導入したいと考えている方はぜひチェックしておいてくださいね。
関連サイト
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。
