-1

私は現在、CSSとHTMLで作成されたこのナビゲーションバーを持っています。ほとんどがインラインブロック要素です。

ナビゲーションバー

私が達成したいのは、SOUNDCLOUDのこのナビゲーションメニューと同じ効果です

ナビゲーションでn項目をクリックするとメニューがドロップダウンする場所で、明らかに多くのオプションを提供し、ナビゲーションスペースを増やします。これが私が達成したい状態です：

SOUNDCLOUDメニュー

基本的なHTMLとCSSを入手したので、機能の面で次善のステップは何でしょうか。

このタイプの相互作用に対応する同様のJQueryを知っている人はいますか？

前もって感謝します。

クリス

4

2 に答える 2

1

派手すぎるものは必要ありません。基本的なjQueryがそれを行います。このjsfiddleの例を確認してください

基本的な考え方は次のとおりです。別のdivを可視化するクリック可能なリンク-HTML/CSSレイアウトでは、divはクリックされた要素の上にあります。

$(document).ready(function() {
    $('#reveal').click( function() {
        $('#hidden').slideToggle();
    });
});
于 2013-03-25T17:50:41.087 に答える
1

HTMLを提供していなくても、例としていくつか作成しました。

<div id="dropdown" style="display:none;">
<!-- slideToggle() finishes with display:none when hiding an element. specifying display:none beforehand simply makes it so that the element is hidden when the page loads. -->

    <!--Content here-->
</div>

<div class="navigationbar">
    <div class="button" id="more"></div>
<div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#more').click(function(){
            $('#dropdown').slideToggle();
        });
    });
</script>

お役に立てれば！

于 2013-03-25T17:54:58.567 に答える