ドロワーメニューとトップページヘ戻るボタンの実装

#デイトラWeb制作コース中級編DAY5の学び

【この記事に書いてあること】

プログラミング学習30日目⏩

Web制作コース中級編DAY5💻

学習時間:3時間５分⏳

学習内容:jQuery実践課題✏

学び📚
・ドロワーメニュー
・トップページヘ戻るボタンの実装

メニューとボタン作るだけで、３時間もかかってしまいました笑#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/xwtevonAHj

— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 9, 2021

【制作物】

【成果報告 PART5】

ドロワーメニューとトップページヘ戻るボタンを実装してみました💻#プログラミング初心者#プログラミング学習#駆け出しエンジニアとつながりたい pic.twitter.com/FunBJ6lNKA

— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 9, 2021

#　【学び】

1

【ドロワーメニュー】

index.html

 <a href="#" class="drawer">コース一覧</a>
  　<ul class="drawer-list">
       　<li class="drawer-word"><a href="#title">初級</a></li>
         <li class="drawer-word"><a href="#title">中級</a></li>
         <li class="drawer-word"><a href="#title">上級</a></li>
    </ul>

style.css

.drawer-list {
    display: none;
    font-size: 15px;
    line-height: 36px;
    color: #082B48;
    text-align: center;
    background-color: #fafafa;
    border: 1px solid;
}

.drawer-word {
    border: 1px solid;
    font-weight: 600;
}

maiin.js

$(function () {
    $(".drawer").click(function () {
        $(".drawer-list").slideToggle();
    });
});

⬇

2

【トップページヘ戻るボタン】

index.html

  <div id="page_top">
    <a href="#">🔝</a>
  </div>

style.css

#page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 60px;
    background: #70aeed;
    opacity: 0.8;
    border-radius: 50%;
}

#page_top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    margin-top: 3px;
}

maiin.js

jQuery(function () {
    var pagetop = $('#page_top'); //page-topが「#pagetop」を取得

    pagetop.hide();//特定のHTML要素を非表示にする。

    $(window).scroll(function () { //widowをスクロースする

        if ($(this).scrollTop() > 80) {  //80pxスクロールしたら表示

            pagetop.fadeIn(300);//0.3秒かけてフェードイン
            
        } else {
            pagetop.fadeOut(300);//0.3秒かけてフェードアウト
        }
    });



    pagetop.click(function () {　//pagetopをクリックしたら

        $('body,html').animate({

            scrollTop: 0 //画面の最上部の位置に移動するという意味

        }, 500); //0.5秒かけてトップへ移動

        return false;  //処理の最後に記述する
});
});

⬇