下拉导航的最佳方法

Question

我目前有这个导航栏，由CSS和HTML组成，主要是内联块元素：

我想要达到的效果与SOUNDCLOUD

上的导航菜单具有相同的效果

如果单击导航中的n项，菜单会下降，显然会为您提供更多选项并增加导航空间。这是我希望实现的州：

因为我有基本的HTML＆amp; CSS，在功能方面将是下一个最好的步骤。

任何人都知道任何类似的JQuery可以容纳这种类型的互动吗？

提前致谢。

克里斯

Answer 1

你不应该太喜欢任何东西。基本的jQuery会做到这一点。看看这个jsfiddle example

这是一个基本的想法：一个可点击的链接，可以将另一个div设置为可见性 - 只是在HTML / CSS布局中，div位于被点击的元素上方：

$(document).ready(function() {
    $('#reveal').click( function() {
        $('#hidden').slideToggle();
    });
});

Answer 2

即使你没有提供任何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>

希望这有帮助！