プログラミング学習

【デイトラ学習記録1】ドロワーメニュー Web制作コース中級編 jQuery 実践課題

TAKENTA
TAKENTA
【デイトラ】「Web制作コース中級編 jQuery 実践課題① ドロワーメニューの実装」の『学習記録』です。

本記事の内容

【デイトラ】「Web制作コース中級編 jQuery 実践課題① ドロワーメニューの実装」の『学習記録』

jQueryでのドロワーメニューの実装

【デイトラ】の「Web制作コース中級編 jQuery 実践課題①」では、ドロワーメニューの実装が課題になっています。

【デイトラ】でプログラミング学習を本格的に始めた私にとって、「答えの無い」初めての課題です。

本記事では、自分自身の学習記録として、ドロワーメニューの実装方法を説明しています。

ドロワーメニューの課題

今回の課題は以下です。

「コース一覧」をクリックすると、「初級」「中級」「上級」のドロワーメニューをjQueryコードを書いて自作します。(こちらは私が完成させたものです)

jQueryを読み込むScriptをHTMLに記述する

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に記述する

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に記述する

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)にドロワーメニューのコードを記述する

JavaScript

$(‘.header-course’).click(
function () {
$(‘.header-toggle’).slideToggle();
$(‘.header-toggle’).toggleClass(“active”);
});

ドロワーメニューは「toggle」と呼ぶみたいです。

これで、完成!動くはずです。

まとめ:【デイトラ】「Web制作コース中級編 jQuery 実践課題① ドロワーメニューの実装」の『学習記録』

何とか動きました(笑)

こういったコードをさくさく書ける日がくるのでしょうか?

コードがおかしかったり、不格好であったりするのなら、ご指摘をお願いします!