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

NOTES

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

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

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

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

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

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

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

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

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

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

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

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

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

DXO株式会社では一緒に働く
仲間を募集しています!

DXO株式会社ではWeb開発エンジニア、Webディレクター、Webデザイナーなど様々な職種で一緒に働く仲間を募集しています。
募集要項・福利厚生など、詳しくはDXO株式会社採用サイトをご覧ください。

最大50万円のお祝い金を進呈中!

詳しくはこちら

関連記事