jQueryでスマホ用の上からぬるっと出てくるメニューの作り方

ヘッダー部分にどのページを開いても表示されるメニューがあるサイトは多いと思います。

僕のサンプル用のページもあるのですが、スマホで表示すると変に改行されてしまいます。

PCで表示時がこちらです。

これをスマホで開くとこうなります。

これではださいですね(笑)

と言ってもデザインセンスは全然ないので、技術的に上からにゅるっと出てくるメニューの作り方に絞って解説します。

スマホ用の上からぬるっと出てくるメニューのコード

実際に作成したサンプルコードはこちらです。

スマホで開くか、デベロッパーツールを使って表示してください。

HTML

CSS

jQuery

コードの解説

HTMLに関しては、10行目にスマホ表示時のメニューを開くボタンと、42行目にスマホ表示時に開いたメニューを閉じるためのボタンを追記しました。

それ以外のメニューはPCで表示していたものをそのまま使います。

スマホメニュー用にHTMLを追加したりはしていないです。

CSSはポイントになるのは、9～15行目の #headernav の表示位置を position: absolute; で画面上部に固定表示しています。

そして初期表示時は非表示なので display: none; を設定しています。

それ以外はデザイン的な部分です。メニュー1つ1つを横幅いっぱいにして縦に並ぶようにしています。

それとサブメニューはPC表示時はオンマウスで開きましたが、スマホの場合はマウスが無いので全て表示しています。

メニューが多い場合には親メニューをクリックするとサブメニューが開くようにしても良いかもしれませんが、あまりユーザーに操作をさせる必要が無いようにするためには最初から開いている方がいいと思います。

jQueryは、画面上部に表示されたメニューを開くボタン #spmenu をクリックしたらメニューを開きます。

閉じる場合は、開いたメニューの一番下にある閉じるボタン #menuclose をクリックでメニューを閉じます。

上からにゅるっと出てくるようにするために slideDown や slideUp を使っていますが、fadeIn を使えばふわっと出てくるようになります。

まとめ

CSSはメディアクエリを使い、PC表示時は何も変えずスマホ表示時にだけ画面上部に縦並びで表示します。

あとは、開くボタンと閉じるボタンを用意して、それらをクリックしたときの処理を追加する。

これだけでスマホ用のメニューは簡単に作れます。

余裕があればデザイン的な部分をもっと手を入れたり、表示・非表示の動きをこだわったりすればもっと良いものになるでしょう。