くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]横方向のアコーディオンメニュー

横方向に動くアコーディオンjQueryでできます。
今回はプラグインを使用しない方法です。

 

f:id:pleasure10501:20150508112352p:plain

f:id:pleasure10501:20150508112357p:plain

 

【HTML】

<dl class="accordion">
<dt>1</dt>
<dd><div>コンテント</div></dd>
<dt>2</dt>
<dd><div>コンテント</div></dd>
<dt>3</dt>
<dd><div>コンテント</div></dd>
<dt>4</dt>
<dd><div>コンテント</div></dd>
<dt>5</dt>
<dd><div>コンテント</div></dd>
</dl>

CSS

.accordion {
    width: 600px;
    height: 300px;
    margin: 50px auto;
    overflow: hidden;
}
.accordion dt {
    float: left;
    width: 20px;
    height: 300px;
    background: #9fb7d4;
    cursor: pointer;
    padding: 10px;
    border-right: 1px solid #fff;
}
.accordion dd {
    float: left;
    width: 374px;
    height: 300px;
    display: none;
    background: #ddd;
    border-right: 1px solid #fff;
}
.accordion dd div {
    width: 374px;
    height: 300px;
    overflow: hidden;
    display: block;
}

jQueryスクリプトを書き始める前に、HTMLとCSSの文法チェックをしましょう。

見た目もチェックしましょう。

 

CSSのリセットをしておくことがポイントです(このアコーディオンは特に)。
リセットをしないでいたら、レイアウトがこんなことに↓
(なにこの隙間は。)

f:id:pleasure10501:20150508113325p:plain

 

JavaScriptjQueryスクリプトを書き終えてチェックをすると、こんなエラーでも、スクリプトの間違いだと勘違いしかねません。
なので、その都度チェックするほうが圧倒的に効率的です。

 

スクリプト

1.jQuery本体を読み込み(またはGoogleAPIへリンク)

2.$(function() {
    $('.accordion dd').eq(0).show();
    $('.accordion dt').click(function() {
        $('.accordion dd').animate({width:'hide'},700);
        $(this).next().animate({width:'toggle'}, 700);
    });
});

 

クリックした時に他のメニューが微妙に動くのが難点です。

プラグインも色々あるので、次回使ってみたいと思います。

 

 

 

 

広告を非表示にする