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

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

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習30日目⏩<br><br>Web制作コース中級編DAY5💻<br><br>学習時間:3時間５分⏳<br><br>学習内容:jQuery実践課題✏<br><br>学び📚<br>・ドロワーメニュー<br>・トップページヘ戻るボタンの実装<br><br>メニューとボタン作るだけで、３時間もかかってしまいました笑<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/xwtevonAHj">pic.twitter.com/xwtevonAHj</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1380375758489722888?ref_src=twsrc%5Etfw">April 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 【制作物】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【成果報告 PART5】<br><br>ドロワーメニューとトップページヘ戻るボタンを実装してみました💻<a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a> <a href="https://t.co/FunBJ6lNKA">pic.twitter.com/FunBJ6lNKA</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1380378576470466563?ref_src=twsrc%5Etfw">April 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



#　【学び】

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();
    });
});
```
⬇

![スクリーンショット 2021-04-09 13.12.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/36c2a68f-e3ad-ba72-a893-076c49e2a24b.png)


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;  //処理の最後に記述する
});
});

```

⬇

![スクリーンショット 2021-04-09 13.15.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/18b8ee4b-4d62-3a8c-93b3-50db11b9e7ff.png)