26.jQuery実践課題① ～調べながら実装する～
本日からjQueryの実践課題と言うことで、
ドロワーメニューの実装
をやっていきたいと思います。
色々な情報を自分で拾い集めて、実装できる…解決力を養うことが目的の課題ですね。
本題に入る前に、「実装」について調べたので書いておきます。
「実装」とは「じっそう」と読み、
新しいものを作ったり、機能を追加したりすることだそうです。
いつもながら、しつこく調べていくスタイルですｗ
では、気を取り直して進んでいきます。
ドロワーメニューの実装
そもそも、ドロワーメニューって何でしょうか。
ドロワーとは「引き出し」の意味で、
ドロワーメニューはクリックした時に
「引き出し」のような動きで開閉するメニューのことだそうです。
ゴリゴリコードさんのページが分かりやすかったです。
参考までに下記を御覧下さい。
上記のメニューを作ります。
下記は引用させていただいたHTMLです。
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item" id="toggle"><a herf="#">メニュー1</a>
<ul class="toggle-list">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>
<li><a href="#">テキスト3</a></li>
</ul>
</li>
<li class="header-nav-item"><a href="#">メニュー2</a></li>
<li class="header-nav-item"><a href="#">メニュー3</a></li>
</ul>
</nav>
処理を言葉にすると
- メニュー１がクリックされたら、
- テキスト1～３を含むリストをアニメーションをつけて開閉させる
です。
１つずつ見ていきましょう。
クリックされたことを知りたい要素にid属性を設定
ここでは「メニュー１」がクリックされた事を知りたいので、
ページに１つしか存在できないid属性を使って、要素を特定します。
今回は「メニュー１」のテキストが書かれている「li」タグに「id="toggle"」を設定。
そして、この段階でjQueryに落とし込むと下記のようになります。
$('#toggle').click(function(){});
言葉にすると、
id属性がtoggleの要素がクリックされたら、処理を実行。
ですね。
必要なCSSを設定
親要素と子要素にCSSのpositionプロパティを設定
さらに子要素は最初は非表示にしたいのでdisplayプロパティを設定します。
ここでは開閉メニューの表示をざっくり整えます。
子要素はテキスト1～3を含む「ul」タグです。
ulタグにクラス「toggle-list」を設定して、クラスに対してCSSを適用します。
CSSの内容は
.toggle-list{
position : absolute;
left : 0px;
top : 40px;
display : none;
}
です。
そして親要素の「li」タグにも「position」プロパティを設定します。
#toggle{
position : rerative;
}
これで、
親要素に対して左側寄せで
上から40pxの位置に表示される
最初は非表示状態のリスト
CSSが適用できました。
positionプロパティについてはこちらのサイト様がおすすめです。
開閉動作をjQueryで記述
最後に、クリックされた時の開閉動作の処理をjQueryで記述します。
開閉させたい部分はクラス「toggle-list」が設定されている「ul」タグです。
ですので、
$('.toggle-list')で要素を取得して、
要素の開閉動作をさせるメソッドslideToggle()を使います。
slideToggle()メソッドは、
指定した要素が非表示の場合はスライドダウンのメソッドを
指定した要素が表示されている場合はスライドアップのメソッドを
実行するという、優れたメソッドです。
自分で書くとしたら、
指定したdisplayの値を取得して、その値が～だったら～する
みたいな処理を書かないといけないんですよね…。
jQuery様々です。
ということで、最終的なjQueryのコードは
$('#toggle').click(function(){ $('.toggle-list').slideToggle() });
となります。
言葉で説明すると、
id属性にtoggleが設定されている要素がクリックされたら、
クラス名がtoggle-listの要素を取得し、そのdisplay値に従って、
スライドダウン、スライドアップを実行する。
となります。
動きの部分はこれで終了です。必要なデザインはCSSを追記していくだけですね。
今日のまとめ
- ドロワーメニューとは「引き出し」の様な動きをするメニュー
- slideToggle()メソッドを使って、開閉の両方の動作を実現できる
- slideToggleメソッドは指定した要素のdisplayプロパティで動作が変わる
今日はドロワーメニュー実装について学習しました。
ページに動きがついてくると俄然面白くなってきますね！
では、また。
