Webデザイン

jqueryでハンバーガーメニューを作る方法!レスポンシブ対応のスマホメニュー

panorama

Webデザインを行っていると、レスポンシブ対応を余儀なくされることが多いかと思います。

レスポンシブ対応をする上で一番気になるのは、「メニューバー」という方も多いでしょう。

サイズが小さいにも関わらず、メニューとしての機能を持たせないといけないのです。

しかし、あまり知識がないからといって、ダサいままにするわけにも…という声を多く頂いたので、今回jqueryでメニューを作成してみました。

スマホ対応メニューのコードサンプル

CODEPENで作成したので、そちらの埋め込みになります。

少しばかり重いですが、是非確認してみてください。

See the Pen nav-blur by Kurosu Ryo (@ryokurosu) on CodePen.0

お洒落に見えるように、背景にぼかしも入れておきました。

メニューバーに使うCSSのコツ

これから、細かくこのコードを解説していきます。まずはCSSのコツから。

今回のCSSでは、最初はメニューバーを画面からはみ出た右側に出現させています。それを、出現するタイミングでtranslateで移動させているのです。

細かくはこの部分のコードを見ていくと分かってきます。

重要になるのは、3ステップです。

positionをabsolute

まず、positionをabsoluteに指定します。これを指定しないと、他のHTML要素が邪魔をして適切に動きません。

もちろん、同時にrightとtopを指定してください。

transformで右側に移動

#gnav-spの方で、transformのプロパティを使って右側に隠してしまいましょう。

今回はtranslate3dを使っています。

細かくはここの部分です。

出現時に移動

最後に、出現するときのCSSを書きます。

今回では、classでopenが付くように設定しているので、その時はtransformの値が変わるようにしています。

jqueryでクラスを付ける

さて、ここからがjqueryの仕事になります。

jqueryで、イベントハンドラを設定(イベントを起こすように設定する)していきます。

今回、メニューバーの出現にともなってやりたいことが4つあります。

  • メニューバーを出現させる
  • 背景にぼかしをいれる
  • スクロールできなくする
  • 他の部分をタップすると戻れる

これらを実装していきます。

メニューバーを出現させる

これは、先程CSSで適応したようにclassを変更すればいいでしょう。

コードの中で見てみると、clickイベントを設定している部分にあたります。

このようにaddclassを指定してclassを追加します。

背景にぼかしを入れる

次は、背景にぼかしを入れる方法です。

今回のコードでは、メニューバーの出現時にbodyにclassを追加して、その時にCSSを使ってfilterのプロパティが適用されるようにしています。

クラスが追加されるjqueryのコードは上に記載されているので、CSSの部分だけ載せておきます。

スクロールできなくする

そして、スクロールできなくするためにはこれらのコードを利用しています。

この関数を利用することで、スクロールを固定しています。

この関数はarakazeさんの記事を参考に使わせていただいたものになります。ありがとうございました。

【参考ページURL】

Javascriptでスクロールを一時的に禁止する方法(PC・スマホ対応)

他の部分をタップすると戻れる

これは、jqeuryでclassがdammyのp要素を追加し、そのp要素にイベントハンドラを設定しています。

別の表現をすれば、メニューバーが出現した時に、bodyの上から何かマスクのようなものをかぶせていて

そのマスクをタップすると戻るという仕様です。

今回のメニューバーの作成ポイントと注意点

これで、中身の説明は終わりなのですが、今回のポイントと注意点をまとめておきます。

z-indexは適切に

今回のコードでは、要素のz-indexを適切に設定する必要があります。

デモでは、出現するメニューバーにz-index:10を設定しています。

ぼかしを入れる要素に親要素を入れない

ぼかしはfilterというプロパティを使うのですが、これを設定する場所を間違えると、メニューバーまでぼやけてしまいます。

filterを入れた要素と、その子要素全てに適用されるので、メニューバーの親要素には指定しないようにしましょう。

jqueryを使ったメニューバーの作成方法のまとめ

今回のコードは、jqueryを使ってメニューバーを横からスライドするサンプルでした。

最初はコピー&ペーストで作成してみて、徐々にオリジナリティを加えていくと楽しめるかと思います。最後まで読んでいただき、ありがとうございました。