2015.04.16
jquery

超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし

超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし

こちらの記事で書きましたシンプルアコーディオンメニューに、矢印(画像)をつけた方法のリクエストがありましたので、下記にご紹介します。

メニューの横に矢印の画像をつけて、サブメニューが開いているときは矢印が下を向き、サブメニューが閉じているときは矢印が横を向く仕様です。

超シンプルjQueryアコーディオンメニュー with矢印

矢印の画像は下記のを使っています。
arrow

なんてことない超シンプルな矢印ですが、もしよろしければ右クリックで保存して使ってくださいね。

では超シンプルアコーディオンメニューのソースを紹介していきます。
できるだけシンプルなソースにしましたので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についての知識が身につき、コードが自分で書けるようになります。

関連する記事

コメント & トラックバック
  1. yukimura

    質問です。

    はじめまして。現在HP勉強中の超初心者のものです。この度携帯用のHPを作成しようと思い「超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし」を使用させていただきました。
    自分のパソコン上では滞りなく動くのですが、サーバーにアップ後アコーディオンは開くのですが、そこからのリンクがとばない状況となっています。
    原因がわからず、質問させていただきました。ご教示よろしくお願いします。


  2. 吉田

    アコーディオンメニューの勉強をしていて見させて頂いています。いつもCSS、lQueryについての考察、学びとなる記事をありがとうございます。
    リンクを張っているウェブサイトのメニューについてアコーディオンのメニューの動きをみているのですが、これは海外のサイトですが日本人にとっては格納されるメニューはなかなか分かりづらいのが現状ではないかと思います。

    最初はサイドメニューのアコーディオンが開いている状態からスタートするにはどうcssを調整すればいいのか分からず質問させて頂きました。
    もしよろしければご教示くださいますようお願いいたします。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP