【jQuery-33】スライドメニューを作ってみよう【実践編】

今回はスライドメニューを作っていきます。画面の端から飛び出してくるタイプで、スマホサイトでもよく使われる方法ですね。

こちらも仕組みはとても簡単です。いや、ちょっと難しいかも…

HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。

HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】   

コンテンツ

クリックで開閉するスライドメニューを作ってみる

完成形はこんな感じになります

See the Pen
Slide menu
by taichi (@taichi_na)
on CodePen.

画面内の click here の部分をクリックすると隠れていたメニューがスライドして表示されます。実際にクリックしてみて動きを確認してください。

今までにも似たような仕組みを作ったことがありますが、縦方向に全スペースを使って開閉するのが今回の特徴でしょうか。

では実際に作っていきましょう!

HTML, CSS でページの基本を作りましょう

See the Pen
Slide menu
by taichi (@taichi_na)
on CodePen.

まず開閉する <nav> 部分の記述を見ていきましょう。

position: fixed;

margin-left: -90px; 

マージンを-90pxとすることで、幅が80pxのメニューバーは完全に画面外に隠れます。

top: 0;

bottom: 0;

これで縦方向に最大まで要素が広がります。

width: 80px;

そのほかは特に難しい記述はないと思います。

今回は <h1> をクリックしたときに開閉をさせたいので、枠線をつけてわかりやすくしました。

jQuery で開閉の仕組みを実装する

See the Pen
Slide menu
by taichi (@taichi_na)
on CodePen.

さて、jQuery ですね。いつものように一列ずつ確認していきます。

1. var dis = 80;

変数 dis を定義します。なぜ 80 なのかというと開閉するメニュバーの幅が 80 だからです。それならわざわざ変数にする必要は無いのでは?と思うかもしれませんが、後ほどその答えがわかります。

2.  $(“h1”).click(function(){

h1 をクリックしたときに~という一行です。もうおなじみ。

 

3. $(“body”).children().animate({“margin-left” : “+=” + dis + “px”}, 200);

body 内の要素に一括で指示を出します。各要素の margin-left に変数 dis の値を代入してそれを animate でゆっくり動くようにしています。

画面全体が右方向に移動して、左の画面外に隠れていたメニューバーがニョロっと現れます。

4. dis *= -1;

最後に変数 dis に-1 を掛けておきます。なぜこんなことをするのか?

これは次にクリックされたときに閉じるためですね。そして閉じたときにも同じようにこの部分で -1 が掛けられるので、今度はプラスに戻ります。

80 → ー80 → 80 → ー80 と dis の値が変化していくということになります。

まとめ:ー1を掛けることによって逆の動作をさせました

ということでお疲れさまでした。今回はボリュームが少ないのでさっぱりと終了します。

コンテンツ