2015.04.16
超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし
アニメーション ・ サンプルあり ・ メニュー ・ リスト表示こちらの記事で書きましたシンプルアコーディオンメニューに、矢印(画像)をつけた方法のリクエストがありましたので、下記にご紹介します。
メニューの横に矢印の画像をつけて、サブメニューが開いているときは矢印が下を向き、サブメニューが閉じているときは矢印が横を向く仕様です。

矢印の画像は下記のを使っています。
なんてことない超シンプルな矢印ですが、もしよろしければ右クリックで保存して使ってくださいね。
では超シンプルアコーディオンメニューのソースを紹介していきます。
できるだけシンプルなソースにしましたのでCSS等でカスタマイズしてみてください。
jQueryを読み込む
head内に以下を記述。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
HTMLソース
<ul id="menu"> <li><div class="main_menu"><img src="画像のパス/arrow.png"> メニュー1</div> <ul class="sub_menu"> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul></li> <li><div class="main_menu"><img src="画像のパス/arrow.png"> メニュー2</div> <ul class="sub_menu"> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul></li> <li><div class="main_menu"><img src="画像のパス/arrow.png"> メニュー3</div> <ul class="sub_menu"> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul></li> <li><a href="#"><div class="main_menu"><img src="画像のパス/arrow.png"> メニュー4</div></a> </ul>
挿入する画像(矢印)のパスはそれぞれ記述してください。
CSSソース
a { text-decoration:none; } ul#menu, ul.sub_menu{ list-style:none; margin:0; padding:0; } #menu{ width:200px; margin:10px; border:1px solid #e5e4e6; border-bottom:none; } .main_menu{ background:#f4b3c2; color:#a22041; font-size:11pt; font-weight:bold; padding:13px 10px 0; margin:-1px 0 0 -1px; cursor:pointer; width:180px; height:35px; border:1px solid #e5e4e6; } .sub_menu li{ background:#dcd3b2; padding:13px 10px 0; border:1px solid #e5e4e6; font-size:11pt; font-weight:bold; width:180px; height:35px; margin:-1px 0 0 -1px; } .sub_menu li a{ color:#9e9478; display:block; } .main_menu img.rotate { transform: rotate(90deg); }
こちらから追加したのは最後の3行のみです。
jQueryソース
jQueryのソースはhead内のjQuery本体よりも下に記述するか、bodyタグのすぐ下に記述します。
<script type="text/javascript"> $(function(){ $('.sub_menu').hide(); $('.main_menu').click(function(){ $('img').removeClass('rotate'); $('ul.sub_menu').slideUp(); if($('+ul.sub_menu',this).css('display') == 'none'){ $('img',this).addClass('rotate'); $('+ul.sub_menu',this).slideDown(); } }); }); </script>
こちらのソースに、CSSで指定したrotateというクラスをjQueryで制御しているだけなので簡単です。
サブメニューが出るのと同時に画像が回転するようになっています。
そしてサブメニューが閉じるのと同時に画像が元に戻ります。
やはりjQueryはできるようになるとデザインの幅が広がりますね。
Memo:
ちなみに私は「Web制作の現場で使うjQueryデザイン入門」という本で初めてjQueryを勉強するようになりました。
CSSとHTMLが分かる人にはお勧めの本です。
jQueryについての知識が身につき、コードが自分で書けるようになります。
2016.02.08 2:11 AM
質問です。
はじめまして。現在HP勉強中の超初心者のものです。この度携帯用のHPを作成しようと思い「超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし」を使用させていただきました。
自分のパソコン上では滞りなく動くのですが、サーバーにアップ後アコーディオンは開くのですが、そこからのリンクがとばない状況となっています。
原因がわからず、質問させていただきました。ご教示よろしくお願いします。
2016.02.10 4:25 AM
いつ返信くるかな
2015.06.06 5:17 PM
アコーディオンメニューの勉強をしていて見させて頂いています。いつもCSS、lQueryについての考察、学びとなる記事をありがとうございます。
リンクを張っているウェブサイトのメニューについてアコーディオンのメニューの動きをみているのですが、これは海外のサイトですが日本人にとっては格納されるメニューはなかなか分かりづらいのが現状ではないかと思います。
最初はサイドメニューのアコーディオンが開いている状態からスタートするにはどうcssを調整すればいいのか分からず質問させて頂きました。
もしよろしければご教示くださいますようお願いいたします。