jQueryでサイトに動きをつけよう

jQueryとはJavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたものです。主にWebサイトやWebアプリケーションで使用されます。

今回は、jQueryを使った動きの一つを紹介します。

まずはじめに

jQueryのCDNを読み込む。bodyタグ内の最後に貼り付ける。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

ドロップダウンリスト

ドロップダウンは、クリックするとコースやメニューのような項目一覧表示させる動きです。
HTML

<li class="header-nav-item" id="toggle"><a href="#" id="course-nav">コース一覧</a> 
  <ul class="toggle-lists">
    <li><a href="https://jquery.com/" class="toggle-lists-item">初級</a></li>
    <li><a href="https://jquery.com/" class="toggle-lists-item" >中級</a></li>
    <li><a href="https://jquery.com" class="toggle-lists-item">上級</a></li>
  </ul>
</li>

CSS

#toggle {
    position: relative; /*これを基準にする*/
}

.toggle-lists {
    display: none;
    padding: 5px 0;
    width: 160px;
    border: solid 0.5px rgba(0, 0, 0, 0.15);
    position: absolute; /*これを使えば要素が浮く*/
    top: 40px;
    left:0;
    background-color: #fff;
    border-radius: 4px;
}

.toggle-lists li {
    padding-left: 30px;
}

.toggle-lists li a {
    display: block;
}

.toggle-lists li:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

jQuery(js)

$(function() {
    $("#toggle").click(function() {
        $(".toggle-lists").slideToggle();
    })

    // $("#toggle").on("click", function() {
    //     $('.toggle-lists').slideToggle();
    // })
});

コードをコピーして、それぞれの拡張子がついたソースコードにペーストすると、ドロップダウンリストが作れます