jQuery

HTML,CSS Javascript,jQuery スマートフォン

【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面用のローバルメニューを、ハンバーガーメニューボタンをタップ(クリック)したら表示し、再度タップすることでメニューを隠すといった風にできないかと相談されたので、作ってみました。
次から同じことを言われたらさくっとコピペで作成出来るよう、備忘録としてポストします。

ハンバーガーメニューを自作する方法

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

そもそも「ハンバーガーメニュー」とはなんぞや、という人はあまり居ないとは思いますが、一応。
スマホサイトの右上にある「三本線」メニューが、いわゆる「ハンバーガーメニュー」です。

ハンバーガーメニュー例


「3月のライオン」というアニメのWEBサイトでも見かけました。
ハンバーガーをタップすると、ラインがアニメーションで「×」になるという、分かりやすい演出。

ハンバーガーメニュー

↑ ということで、こんな感じに「三本線」から「X印」にアニメーションし、メニュー内容を表示するものを作ってみようというのが、今回のポスト内容です。

デモ

出来上がったデモはこちらから。
PCからでも閲覧可能です。

各種スクリプト

(グローバルナビ用)HTML

(スマホ用の)グローバルナビのHTML。
リストを使う至極単純な構造です。

(グローバルナビ用)CSS

装飾用と、メニューそのものを見えない位置に配置する内容となっています。

最後の activeクラス でグローバルメニューを上からスライドするようにします。

(ハンバーガー用)HTML

次に、ハンバーガー用のHTMLとCSSです。
spanタグを用い、タップ前の「三本ライン」を作ります。

(ハンバーガー用)CSS

(タップした後)CSS

タップした後の「X」の形とするためのCSSです。
transform というプロパティを使用します。

JS

ハンバーガーメニューをタップすることでactiveクラスを付与/削除するjQueryのスクリプト。
読めば納得の単純さです。

以上で、ハンバーガーメニューが出来上がります。

CSSの「transform」プロパティはなかなか使い勝手がありそうなものなので、近いうちに解説ポストを書いてみたいと思います。

デモ

デモはこちらから。

-HTML,CSS, Javascript,jQuery, スマートフォン
-, ,