javascript - クリック時に非表示のヘッダードロップダウン

Question

私が取り組んでいるサイトでは、ここhttp://shop.jack-hughes.com/と同様のドロップダウン効果を使用して、情報をクリックすると非表示のdivがドロップダウンします。

CSS3またはJavascript/CSSだけを使用しているかどうかはわかりませんが、誰かが私を正しい方向に向けたり、効果の名前を教えたりすることができます。非常に単純だと思いますが、私の人生では別の例を見つけることができません。

Answer 1

おそらくjQueryを使用しています。何かのようなもの：

http://api.jquery.com/toggle/

Answer 2

彼らには、これを行う小さなJavascriptがあり、どのWebサイトでも簡単に実行できます. 基本的に、ページの上部に非表示の div が必要です。リンクをクリックすると、単に div が表示されます。

彼らが使用したコードは次のとおりです。

Event.observe('info', 'click', function(){
    $('aside').toggleClassName('open');
});

しかし、jqueryを見ると、要素の操作が非常に簡単であることがわかります。

openさらに、クラスで CSS3 トランジションを使用しています。

.aside {
     transition: all 0.3s ease-out 0s
}

これがスムーズなトランジション効果の原因です。したがって、jQuery または CSS3 遷移のいずれかを使用でき、どちらも同じ効果をもたらします。CSS3 トランジションの方が優れていると思いますが、トランジションをサポートしていない特定のブラウザーを疎外することになります。

Answer 3

CCS3とjsの組み合わせ

参考にしたサイトで使われているものはこちら

js :

Event.observe(window, 'load', function () {
    Event.observe('info', 'click', function () {
        $('aside').toggleClassName('open');
    });
});

Event.observeプロトタイプフレームワークからのものです - http://prototypejs.org/doc/latest/dom/Event/observe/

たとえば、jQuery ( http://jquery.com/ ) で同等のものは次のようになります。

$(document).ready(function () {
    $('.info').click(function () {
        $('aside').toggleClass('open');
    })
});

css :

aside.open {
    height: 21.25em;
}

aside {
    position: relative;
    background-color: #3f4642;
    width: 100%;
    color: white;
    letter-spacing: 0.1em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

HTML要素はあり<aside>....</aside>ますが、divを選択しても違いはありません。

Answer 4

Deif が発見したことに加えて、彼らは CSS トランジションも使用しています。

transition: all 0.3s ease-out;

また、"::selection" 疑似クラスを "aside" クラスに使用します。developer.mozilla.org を参照してください。