Weblasts

CSSだけで作るアニメーション付きのハンバーガーメニュー

AlexaTopSitesが、お前のサイトでハンバーガーメニューの記事がないのはもったいないよ!アニメーションも付けろよ!としつこく言ってくるので作ってみます。

この記事はHTMLとCSSでやります。

ハンバーガーメニューのボタンはいくつかアニメーションのサンプルを用意してあります

状況によってはjsを使わないといけない場面が出てきますがそこらへんは別の記事で

ハンバーガーメニューとは

googleで検索すると一番上にこう出てきます。

ハンバーガーメニューとは、サイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される仕組み。 主にスマートフォンのUIデザインとして用いられている。

ハンバーガーメニューには賛否あると思いますが、大体のデザイナーはこれを実装しろと言ってくるので作り方を覚えておいて問題はないと思います。

ハンバーガーメニューのボタン部分を作る

ハンバーガーメニューのボタン部分は画像をそのまま貼り付けているサイトだったり、クリック・タップしたらバツ印に画像が変わったりあると思いますが、この記事では要素を使ってボタンを作り、checked疑似クラスを使ってアニメーションするように実装していきます。

まずはHTMLから、

チェックボックスはクリック判定用に用意

label要素はその中に作るハンバーガーメニュー用のボタンとチェックボックスを関連付けるために用意しました。

HTMLの用意ができたらcssでボタンとなる部分を作っていきます。

ここまでのコードでよく見るハンバーガーメニューのボタンのようなものが出現します。
ここまでの見た目

見やすいように多少の小細工をしていますが、よく見るハンバーガーボタンができました。
ボタンクリックでチェックボックスの状態が変化するところも確認しておいてください

これで見た目だけは完成しました

ハンバーガーボタンのアニメーション

クリックしたときのアニメーションは、checked疑似クラスと~(チルダ)を組み合わせて設定していきます。

いくつかサンプルとコードを用意しておきましたので前述したコードに追加して確認してみてください

~(チルダ)を使ったセレクタ

~(チルダ)を使うと同じ階層にあるあとに記述してある要素を指定できるようになります。

『#menu_checkbox:checked ~ #menu_label』とすれば、チェックがついたチェックボックスのあとにある同じ階層の#menu_labelを操作できます。

#menu_labelの子要素まで絞り込むことができるので今回のケースでは便利です

シンプルなアニメーション

上と下の線が角度を変えてバツ印になりつつ、真ん中の線は消えるといった、よく見るシンプルなアニメーションであれば簡単だと思います。

transformプロパティを使って真ん中の線の位置に移動しつつ角度を変えてみましょう

シンプルなサンプル

※ 触ると動きます

いっぱいぐるぐる回るアニメーション

前述したシンプルなものの角度を調整すれば回転数を増やすことができます。

ぐるぐる回るサンプル

※ 触ると動きます

真ん中の線が横移動して消えるアニメーション

前述したシンプルなものをベースに真ん中のものが移動して消えるような動きも可能です。

必要に応じてoverfloWプロパティと組み合わせて使うといいと思います

真ん中の線が右に消えるサンプル

※ 触ると動きます

常時アニメーションさせておく

すこしずれてしまいますが、常時ハンバーガーメニューを利用させるようなサイトであればボタン自体をアニメーションで動かしておいても面白そうですね。

そのまま使えるようにしてあるのでちょっとコードは長め

常時アニメーションさせておくサンプル

※ 触ると動きます

色々と思いつくかと思ったのですが思いつきませんでしたので紹介できるのはこれだけです

工夫すれば色々な動きを出すことができると思うのでやってみてください

あとはこのボタンをサイト内に組み込んで状態に応じて要素を出したり消したりするだけです

ハンバーガーメニューのボタンをサイトに組み込む

とりあえずサンプルです。レスポンシブとかではなく、常時ハンバーガーメニューを表示しているタイプになります。

私がよく作る形だとこのような形のベースを作ります

チルダを使ってハンバーガーメニューのボタンがクリックされて、チェックボックスにチェックが入っている場合はナビゲーションを表示したり、チェックが入っていないときは非表示にしたり、cssを切り替えていきますのでそれを前提にコードを作る必要があります。

チェックボックス・閉じるための背景・ハンバーガーメニューのボタン・ナビゲーションが同一階層で兄弟になるようにマークアップしつつ、チェックボックスを長男の位置(先頭)に配置していきます

操作するものは同一階層にすることが、cssで作るハンバーガーメニューのキモになります。

cssはいらない要素を消すところから始めます。

ページを開いた状態では、チェックボックス・閉じるための背景・ナビゲーションメニューはハンバーガーメニューのボタンがクリックまたはタップされた時に表示したいので、一旦非表示にしておきます。

非表示にする場合、チェックボックスはシンプルに「display:none;」で非表示にしてしまえばいいと思いますが、アニメーションを付けたい閉じるための背景や、ナビゲーションメニューは「display:none;」を使わずに、「width」や「height」を0にしておくとアニメーションが付けやすいのでよくこの方法を使っています。

ウインドウに固定したり文字をいじったり余計なものも入っていますがそのへんはお好みで調整してください

最後にチェックボックスにチェックが入っているときのスタイルを追加したら完成になります。

これでcssだけで作るハンバーガーメニューは完成になりますが、ページ内リンクには対応できないので、ナビゲーションの中にページ内リンクが有る場合は、jsを使って制御するしかありません。

サイトの構造を選ぶ形にはなってしまいますが、簡単なjsで対応可能なので、ベースとして使ってもいいのではないかと思います。

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました