仕事でスマホサイトを作っているのですが、
その際にモックアップとして作ったアコーディオンメニューがありますので、
コードをシェアします。
解説しながら、お伝えできればと思います。
JQueryが少しでも読めると、カスタマイズするのに便利なことを実感しました！
JQueryはかじった程度なのですが、
これがわかると、ちょっとした挙動を変えることができます。
オススメです。
スポンサードリンク
MFI対応とは。
Moblie First Indexの略で、Googleがスマートフォンページのインデックスを主とした方式に変更を行うことをモバイルファーストインデックスと呼びます。
GOOGLE公式ブログ
アコーディオンメニューの作り方
まずは、デモをご覧ください。
DEMO
挙動を動画にしてみました
カスタマイズさせていただいたサイトはこちらです。
http://php.o0o0.jp/article/jquery-multiaccordion
これにCSS、アコーディオンJSを書き加えた形です。
使用するJQueryコード
GoogleのJqueryスクリプトをHead内に記述します。それから、スマホに対応するためにメディアクエリを記述します。
1 2 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width; initial-scale=1.0"><!--メディアクエリ--> |
HTML
JQueryで機能しCSSで形を整えるために、各要素にクラスを割り振ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <ul class="acMenu"> <li> <dl> <dt class="menu-ttl"><i class="fa fa-leaf" aria-hidden="true"></i> メニュー</dt> <dd> <ul> <li class="acMenu2"> <p class="sub-menu-ttl">メニュー </p> <ul class="acMenu3"> <li>サブメニュー１</li> <li>サブメニュー２</li> <li>サブメニュー３</li> <li>サブメニュー４</li> <li>サブメニュー５</li> <li>サブメニュー６</li> <li>サブメニュー７</li> <li>サブメニュー８</li> </ul> </li> <li><p class="sub-menu-ttl">ミニメニュー１ </p></li> <li><p class="sub-menu-ttl">ミニメニュー２ </i></p></li> </ul> </dd> </dl> </li> <li> <dl> <dt class="menu-ttl"><i class="fa fa-heart" aria-hidden="true"></i> メニュー</dt> <dd> <ul class="acMenu2 menu-link"> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt class="menu-ttl"><i class="fa fa-star" aria-hidden="true"></i>メニュー </dt> <dd> <ul class="acMenu2 menu-link"> <li>サブメニュー</li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> </ul> </dd> </dl> <dl><dt class="menu-ttl">メニュー</dt></dl> <dl> <dt class="menu-ttl"><i class="fa fa-star" aria-hidden="true"></i>サブメニュー </dt> <dd> <ul class="acMenu2 menu-link"> <li>サブメニュー</li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> <li><a href="#non">サブメニュー</a></li> </ul> </dd> </dl> </li> </ul> |
CSS
ここは、形を整えるためですので、アコーディオンの動きと直接関係があるわけではありません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | .acMenu {width:320px; margin:0 auto; border:1px solid #ccc; border-radius:10px; padding:0px; background: #fff;} .acMenu li { list-style: none; padding:0px; } .acMenu a {text-decoration: none;} .acMenu li ul { padding:0px; } .menu-ttl { border-bottom: 1px solid #ccc; text-align: center; padding-bottom: 15px; } .sub-menu-ttl { border-bottom: 1px solid #ccc; text-align: center; padding-top:15px; padding-bottom: 15px; background:#DDE9CB; margin:0px; } dd { margin:0px; } .acMenu2 li { text-align:center; } .acMenu3 { text-align: center; } .acMenu3 li,.menu-link li { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; background: none; } .acMenu dt.open { /* background: #ccc;*/ } .acMenu dt:after { content:"\f078"; font-family:fontAwesome; margin-left:20px; } .acMenu dt.open:after {content:"\f077"; font-family:fontAwesome; margin-left:20px;} .sub-menu-ttl:after { content:"\f078"; font-family:fontAwesome; margin-left:20px; } .sub-menu-ttl.openAcd:after {content:"\f077"; font-family:fontAwesome; margin-left:20px;} @media screen and (max-width:620px){ .acMenu { width:100%; } } |
JQuery
＜head＞内に書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script> function acdMenu() { //デフォルトでアコーディオンの中身を非表示 $(".acMenu dd").css("display", "none"); $(".acMenu2 ul").css("display", "none"); //第2階層のアコーディオン $(".acMenu dt").click(function() { $(".acMenu dt").not(this).next().slideUp("fast"); $(this).toggleClass("open").next().slideToggle("fast"); }); //第3階層のアコーディオン $(".acMenu2 p").click(function() { $(this).toggleClass("openAcd").next().slideToggle("fast"); }); } $(function() { acdMenu(); }); </script> |
clickすると、slideUpし、
toggleClassは、指定したclassのオン(設定)、オフ(削除)の切り替えを行います。
ここではアコーディオンを開きながら、クラスをふり、閉じるとクラスが消えるという便利なコードです。
openまたは.openAcdというクラスは、開閉する矢印を機能させるために使います。
JQueryの勉強にオススメ
オススメの書籍はこちら
やさしくはじめるWebデザイナーのためのjQueryの学校
最後に
いかがでしたか？コードが多めですが、ぜひお試しください。
投稿者プロフィール
- Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
- 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
この記事へのコメントはありません。