2013.07.21
javascript

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

アコーディオンのメニューはjQueryのプラグインでもたくさんあるのですが、ちょっとしたメニューだったらプラグインを使わずちゃちゃっと実装したいものです。

クリックするとサブメニューが出てくる、縦に伸び縮みするアコーディオンメニューのソースを紹介します。
本当にシンプルで基本的なものです。
CSSやイメージなどでカスタマイズすればいろいろ使えるかと思います。

MEMO:
同じようなアコーディオンのメニューで少し違う動きをするバージョンもこちらに書きました。

jquery010

1番基本的なアコーディオンメニュー

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">メニュー1</div>
  <ul class="sub_menu">
    <li><a href="#">サブメニュー</a></li>
    <li><a href="#">サブメニュー</a></li>
</ul></li>

<li><div class="main_menu">メニュー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">メニュー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">メニュー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;
}

CSSの説明

  • 21行目と35行目
  • ボーダーをダブらせないようにmarginトップとmarginレフトにマイナスの値を設定し、見た目のボーダーは1pxになるように調整しています。

  • 22行目
  • マウスオーバー時のカーソルを指マークにします。

jQueryソース

jQueryのソースはhead内のjQuery本体よりも下に記述するか、bodyタグのすぐ下に記述します。

<script type="text/javascript">
$(function(){
        $('.sub_menu').hide();        
        $('.main_menu').click(function(){
                $('ul.sub_menu').slideUp();
                if($('+ul.sub_menu',this).css('display') == 'none'){
                        $('+ul.sub_menu',this).slideDown();
                }
        });
});
</script>

jQueryの説明

  • 3行目
  • ページが表示された時は、.sub_menuは.hide()にします。アコーディオンメニューのサブメニューは最初は非表示という意味です。

  • 4行目~9行目
  • .main_menuをクリックしたときに起こるアクションを記述しています。

    • 5行目
    • ul.sub_menuをスライドアップして隠します。

    • 6行目~7行目
    • もしクリックした.main_menuの次のul.sub_menuが表示されていなかったら、スライドダウンして表示します。

    実際のアクションは6行目~7行目が先に起こり、5行目が次に起こるというのがイメージなのですが、繰り返し行われると想定して記述するため、この順序になります。
    慣れるまで分かりにくい部分です。

jQueryとCSS3は使いこなせるようになるとウェブデザインがとても楽しくなりますね。

関連する記事

コメント & トラックバック
  1. […] ■シンプルなアコーディオンメニュー jQueryプラグインなし http://ri-mode.com/rainbow/2013/07/21/simple_accordinon_menu/ […]


  2. mn

    分かりやすくて助かりました。ありがとうございます!

    1点お聞きしたいのですが、
    サブメニューの中に更にサブメニューを作る事は可能ですか?
    できれば、教えていただけると助かるのですが。。
    単純にサブメニューを増やすだけでは出来なかったもので(><)


  3. […] 以前こちらに書いた記事ですが、若干違うバージョンを作ってみました。 […]


コメントをどうぞ

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


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

*


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