今回はスライドメニューを作っていきます。画面の端から飛び出してくるタイプで、スマホサイトでもよく使われる方法ですね。
こちらも仕組みはとても簡単です。いや、ちょっと難しいかも…
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 の値が変化していくということになります。
まとめ：ー１を掛けることによって逆の動作をさせました
ということでお疲れさまでした。今回はボリュームが少ないのでさっぱりと終了します。
