HTML / CSS

【WordPress / jQuery】アコーディオンメニューを「jQuery」と「CSS」で作る【アコーディオン / メニュー】

 

アコーディオンメニューを「jQuery」と「CSS」で作る

①. まずは、「CDN」の「jQUERY」を「読み込む設定」をする

⇒　header.php の「head」内に下記リンクを設置、保存。

※このことによって、いちいち、jQueryをダウンロード → サーバーにアップ → HTMLで読み込んで、ということではしなくても、Webフォントのように、CDNはWeb上にあるもので「CDNへのリンクを設定するだけ」です。

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

 

②. HTMLを書く

<ul class="acmenu">
    <li class="acmenu__item">
        <a class="acmenu__item__link js-acmenu__item__link" href="">メニュー（クリックで開閉）</a>
        <ul class="subacmenu">
            <li class="subacmenu__item">
                <a href="">サブメニューA</a>
            </li>
            <li class="subacmenu__item">
                <a href="">サブメニューB</a>
            </li>
            <li class="subacmenu__item">
                <a href="">サブメニューC</a>
            </li>
        </ul>
    </li>
</ul>

 

③. CSSを書く

.acmenu__item {
  background: #000000;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.acmenu__item__link {
  color: #fff;
  display: block;
  padding: 1rem;
}
 
.subacmenu {
  background: #e7e7e7;
  display: none;
}
.subacmenu__item {
  border-bottom: 1px solid #000000;
  color: #333;
  padding: 1rem;
}

 

③. jQueryを書く

⇒　footer.php に書いて保存（事前バックアップ必須）

※ <script>下記jQuery</script>と「script」で挟み込んで記述。

 1行目の、

$(function(){

は、

jQuery(function($) {

に置き換えて記述。

jQueryをWordPressに書くときはこうする決まり。

$(function(){
    $('.js-acmenu__item__link').each(function(){
        $(this).on('click',function(){
            $("+.subacmenu",this).slideToggle();
            return false;
        });
    });
});

↓

jQuery(function($) {
    $('.js-acmenu__item__link').each(function(){
        $(this).on('click',function(){
            $("+.subacmenu",this).slideToggle();
            return false;
        });
    });
});

↓

acmenu__item__link を押すと、subacmenu が開きますよという意味。

 

※参考

https://webdesignday.jp/inspiration/technique/css/5670/

RELATED POST