【jQuery編】アコーディオンメニューの作り方

今回はデイトラの課題であった「アコーディオンメニュー」をjQueryで作ってみました。



ライブラリを使用せず、実装してみました。
まずはコードを記載しておきます。

HTML / CSS / jQueryのコード

<div class="header-right">
   <ul class="header-nav clear">
       <li class="header-nav-item"><a href="#">デイトラとは</a></li>
       <li class="header-nav-item">
         <a href="#">コース一覧</a>
         <ul>
           <li class="course-first"><a href="#">初級編</a></li>
           <li class="course-second"><a href="#">中級編</a></li>
           <li class="course-third"><a href="#">上級編</a></li>
        </ul>
       </li>
       <li class="header-nav-item"><a href="#">お問い合わせ</a></li>
   </ul>
</div>
.header-nav-item{
    float:left;
    margin-left:50px;

    @include mq(md){
        float: none;
        margin: 0;
    }

    a{
        font-size:15px;
        font-weight:600;
        line-height:36px;
    }

    ul{
        display:none;
    }
}
$(function () {
    $(".header-nav-item a").on("click", function () {
        $(this).next().slideToggle();
    });
});

コード解説

それぞれのコードを解説していきます。

HTMLの解説

今回はナビメニューをFlexboxを使用せず、floatを使って横並びにしています。

ここについては解説を省略します。

SCSSの解説

今回はCSSではなく、SCSSでコードを書いています。



SCSSを学んでない方は下のコードの意味が分からないかと思いますが、まずは「mixin」について調べてみてください。



下の記載でメディアクエリの記載がめっちゃ楽になります。

//マップ型変数breakpointsを定義
$breakpoints: (
//キー  値
 'sm': 'screen and (max-width: 576px)',
 'md': 'screen and (max-width: 768px)',
 'lg': 'screen and (max-width: 992px)',
 'xl': 'screen and (max-width: 1200px)'
) !default;

//メディアクエリ用のmixinを定義。デフォ値はmd
@mixin mq($breakpoint: md) {
    //map-get(マップ型変数, キー)で値を取得
      @media #{map-get($breakpoints, $breakpoint)} {
        //この中をカスタムできる
        @content;
 }
}



パソコンやスマホによって、Webサイトのレイアウトや見え方を変えるのがメディアクエリです。

.header-nav-item{
    float:left;
    margin-left:50px;

    @include mq(md){
        float: none;
        margin: 0;
    }

    a{
        font-size:15px;
        font-weight:600;
        line-height:36px;
    }

    ul{
        display:none;
    }
}

「@include mq(md){~」は〜768pxまでの場合、適用されるという意味です。


CSSのみでメディアクエリを書こうと思ったら、コードを全て書いた後に下記のように記載する必要がありますが、上に戻って見返すのがめんどくさいですよね。

@media only screen and (max-width:767px){....



jQueryの解説

下記3つのメソッドを使用しています。

$(function () {
    $(".header-nav-item a").on("click", function () {
        $(this).next().slideToggle();
    });
});
使用したメソッド一覧
  1. .on(“click”,function())
    →クリックされた時の動作を指定

    今回の場合、「header-nav-item」クラスの下の「a」タグをクリックされた時の動作です。
  2. .next
    →「next」の前の要素の次の要素に対する動作を指定します。

    今回の場合、「this」= 「header-nav-item」クラスの下の「a」の次の要素、つまり「ul」タグが対象です。

  3. slideToggle
    →ボタンをクリックしたりすれば、表示非表示になるものです。Webサイトでよく見るアコーディオンを作る際に使えます。


最後に

jQueryには便利なライブラリが存在しますが、実際にコードを書くことでメソッドやSassについての理解が深まると思います。


ここまで読んで頂いてありがとうございます。

一緒に頑張りましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です