2014.01.23
jquery

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

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

前回はクリックすると他の部分が勝手に折りたたまれて、該当部分だけが伸びる構造でした。
今回は1度目クリックすると伸び、2度目クリックすると折りたたまれる・・・を繰り返すという構造です。
イマイチうまく説明できませんが、まずはサンプルをご覧ください。
jquery018

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

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:#B39FDF;
        color:#6F3BB0;
        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(){
                if($('+ul.sub_menu',this).css('display') == 'none'){
                        $('+ul.sub_menu',this).slideDown();
                }else {
		$('+ul.sub_menu',this).slideUp();
		}
	});	   
});
</script>

jQueryの説明

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

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

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

    • 7行目~9行目
    • クリックした.main_menuの次のul.sub_menuが表示されていたら、スライドアップして隠します。

前回の記事のソースとそれほど変わっていませんが、少しアレンジするだけで色々なことができるのがjQueryの良いところです。
CSS3は使いこなせるようになるとウェブデザインがとても楽しくなりますね。

関連する記事

コメントをどうぞ

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


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

*


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