概要
ハンバーガーメニューボタンのアニメーションをCSSのtransitionを利用して実装する方法を紹介。用途・要件
- ハンバーガーメニューボタンをクリック時に、クラスを付与。（jQuery）
- アニメーションはCSSのtransitionを利用。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
関連記事
ハンバーガーメニューボタンのアニメーション実装（シンプル）
テキスト付きハンバーガーメニューボタン
ハンバーガーメニューボタンのアニメーション実装（2本線かつ長さが異なる）
ハンバーガーメニューボタンのアニメーション実装（ボタン全体を90度回転させる）
ハンバーガーメニューボタンのアニメーション実装（メニュー全体が1回転しながらクローズボタンに変化）
ハンバーガーメニューボタンのアニメーション実装（メニュー全体が時計回りに1回転しながらクローズボタンに変化）
ハンバーガーメニューボタンのアニメーション実装（上下のラインが回転しながらクローズボタンに変化）
ハンバーガーメニューボタンのアニメーション実装（上下ラインが中央に移動後にクローズボタンに変化）
ハンバーガーメニューボタンのアニメーション実装（上下ラインが移動して矢印に変化）
ハンバーガーメニューボタンのアニメーション実装（全体が回転しながら上下ラインが移動して矢印に変化）
ハンバーガーメニューボタンのアニメーション実装（３本線かつ長さが異なる）
弁当メニューボタンのアニメーション実装（1）
弁当メニューボタンのアニメーション実装（2）
新着記事
[ ID : 12496 ]
【Vanilla JS】モーダルを開いてYouTube動画を再生する処理（Micromodal.js + YouTube IFrame Player API）
[ ID : 12490 ]
【Vanilla JS】flexで横並びにしたテキストと画像で対応するテキストのスクロール位置を取得し、画像をフェードで出現させる処理
[ ID : 12477 ]
【Vanilla JS】ナビとsvg画像が連動してホバーすると色が変化するSVGアニメーション
[ ID : 12467 ]
【Vanilla JS】hoverすると擬似要素がスケールし、カーソルに合わせて動くホバー効果の実装
[ ID : 12461 ]
【WordPress】datepickerで設定した日時が過ぎると特定の処理を行うPHPの実装
全ての記事を見る
