本記事の内容
【デイトラ】「Web制作コース中級編 jQuery 実践課題① ドロワーメニューの実装」の『学習記録』
jQueryでのドロワーメニューの実装
【デイトラ】の「Web制作コース中級編 jQuery 実践課題①」では、ドロワーメニューの実装が課題になっています。
【デイトラ】でプログラミング学習を本格的に始めた私にとって、「答えの無い」初めての課題です。
本記事では、自分自身の学習記録として、ドロワーメニューの実装方法を説明しています。
ドロワーメニューの課題
今回の課題は以下です。
「コース一覧」をクリックすると、「初級」「中級」「上級」のドロワーメニューをjQueryコードを書いて自作します。（こちらは私が完成させたものです）
jQueryを読み込むScriptをHTMLに記述する
<script src=”https://code.jquery.com/jquery-3.4.1.js”></script>
<script src=”./js/script.js”></script>
上記のコードをbodyの閉じタグ（</body>）の直前に記述しましょう。
また、「script.js」が自作コードを書き込むJavaScriptファイルになります。
ドロワーメニューになる、リストタグをHTMLに記述する
<div class=”header-right”>
<ul class=”header-nav clear”>
<li class=”header-nav-item”><a href=”#”>デイトラとは</a></li>
<li class=”header-course header-nav-item”><a href=”#”>コース一覧</a>
<ul class=”header-toggle”>
<li>初級</li>
<li>中級</li>
<li>上級</li>
</ul>
</li>
<li class=”header-nav-item”><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
上記コードの、
<li class=”header-course header-nav-item”><a href=”#”>コース一覧</a>
<ul class=”header-toggle”>
<li>初級</li>
<li>中級</li>
<li>上級</li>
</ul>
</li>
この部分がドロワーメニューのリストタグにあたり、class名を「header-toggle」としました。↓
ドロワーメニューのデザインをCSSに記述する
.header-toggle {
position: absolute;
display: none;
font-size: 15px;
font-weight: 600;
background-color: #000;
color: #fff;
width: 100px;
}
ドロワーメニュー（header-toggle）のデザインをCSSに記述します。
JavaScript（script.js）にドロワーメニューのコードを記述する
$(‘.header-course’).click(
function () {
$(‘.header-toggle’).slideToggle();
$(‘.header-toggle’).toggleClass(“active”);
});
ドロワーメニューは「toggle」と呼ぶみたいです。
これで、完成！動くはずです。
まとめ：【デイトラ】「Web制作コース中級編 jQuery 実践課題① ドロワーメニューの実装」の『学習記録』
何とか動きました（笑）
こういったコードをさくさく書ける日がくるのでしょうか？
コードがおかしかったり、不格好であったりするのなら、ご指摘をお願いします！
