超シンプル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についての知識が身につき、コードが自分で書けるようになります。