• TOP
  • NOTES
  • ハンバーガーメニューのサンプル集

NOTES

ハンバーガーメニューのサンプル集

ハンバーガーメニューをクリックした時のアクション例一覧です。


このエントリーをはてなブックマークに追加

HTML・CSS・jQueryを使ったハンバーガーメニューをクリックした時のアクションサンプルです。
コピペですぐにご使用いただけます。
※右側の「詳細へ」リンクをクリックすると各アクションの詳細へ遷移します。

上下のラインが斜線になって、クローズボタンを表示

クリックすると上下の横ラインが斜めになり、クローズボタンを表示します。
オーソドックスなハンバーガーメニューです。

上下のラインが収縮して、矢印ボタンを表示

クリックすると、上下2本の横ラインが短くなり矢印の一部になります。

ライン3本が中央にまとまって、クローズボタン表示

上下のライン2本が中央に集合したのち、クローズボタンになります

○に囲まれて、クローズボタンを表示

クリックすると○に囲まれて、真ん中のラインがフェードアウトしクローズボタンになります。