正解のコードが無い課題に挑戦！　デイトラWeb制作初級編Day21　【調べながら実装しよう】jQuery実践課題①

ハック

こんにちは、運営者のハックです。

今回はDay21とDay22の２回に渡り、デイトラWeb制作初級編「【調べながら実装しよう】jQuery実践課題」の学習記録を紹介します。今回は前半部分です。

スイーツサイトをベースにアニメーションを実装しよう
1. 課題①：ドロワーメニューの実装
2. 課題②：ページトップへ戻るボタンを付ける
次回は引き続きjQuery実践課題②に挑戦します

スイーツサイトをベースにアニメーションを実装しよう

今回の講義では、初級編でコーディングしたスイーツサイトをベースに、課題として提示されるアニメーションを自力で作成しました。

モナ

JavaScriptとjQueryをHTMLに読み込ませ、「script.js」ファイルを作成して準備が整ったら挑戦していきましょう。

課題①：ドロワーメニューの実装

Menuをクリックすると
新発売・おすすめ・期間限定のメニューを表示
開閉時間の指定は不要
ヒント：開閉ボタンなどのように、表示・非表示や再生・停止を操作するボタンのことをtoggleと呼びます。

//HTML
 <li class="header-nav-item header-nav-toggle">
     <a href="#" class="header-nav-link" id="nav-menu">Menu</a>
            <ul class="header-nav-sub-list">
                <li class="header-nav-sub-item">新発売</li>
                <li class="header-nav-sub-item">おすすめ</li>
                <li class="header-nav-sub-item">期間限定</li>
             </ul>
 </li>

/*　CSS　*/
.header-nav-toggle{
/*　要素に相対位置を指定　*/
  position: relative;　
}

.header-nav-sub-list {

/* 要素をページの通常の流れから外して、指定した位置に配置 */
  position: absolute;
  top: 100%;
  left: 50%;
/* 要素の幅の50%分だけ左に移動 */
  transform: translateX(-50%);
  background-color: #00000045;
  padding: 10px;
  border: none;
/* テキストは折り返されずに一行で表示 */
  white-space: nowrap;
  display: none;

}

.header-nav-sub-item{
  color:#ffffff;
  font-size: 12px;
  padding: 3px;
}

//jQuery
jQuery("#nav-menu").click(function(){
    jQuery(".header-nav-sub-list").slideToggle();
    jQuery(this).toggleClass();
 
});

モナ

途中まで自力で考えたのですが、ドロワーメニューが表示されなかったり、なぜか左上に表示されたり、横一列で表示されたり、上手くいかなかったのでググったりGPTに聞いたりしたのですが、色々試行錯誤しても上手くいきませんでした。

デイトラの「よくある質問」を確認して、コードを書くたびにサイトの様子を逐次確認しながら、ようやく課題と同じ（と思われる）ドロワーメニューを実装することができました。

ねこ奈

簡単に実装できるかと思ったら、意外と苦戦したみたいだにゃ。

ChatGPTも万能じゃないってよく分かったのにゃ。

課題②：ページトップへ戻るボタンを付ける

トップから80pxスクロールしたら
300ms（0.3秒）かけて
フェードイン・フェードアウトで表示・非表示
表示してる間はボタンはページ右下に固定
ボタンを押したら500ms（0.5秒）かけてページトップへ戻る

//HTML
 <p id="page-top"><a href="#">TOP</a></p>

/*　CSS　*/
/*ページトップへ戻るボタン*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  font-size: 14px;
  font-weight: 1000;
  background: #fff;
  text-decoration: none;
  color: #000000;
  width: 60px;
  padding: 23px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  transition: all .3s ease;
}

/* 好みでホバーしたら半透明になるようにしてます */
#page-top a:hover {
  text-decoration: none;
  opacity: .7;
}

//jQuery
jQuery(function(){
    var pagetop = jQuery('#page-top');
    pagetop.hide();
    jQuery(window).scroll(function () {
       if (jQuery(this).scrollTop() > 80) {
            pagetop.fadeIn(300);
       } else {
            pagetop.fadeOut(300);
       }
    });
    pagetop.click(function () {
        jQuery('body, html').animate({ scrollTop: 0 }, 500);
        return false;
     });
   });