jquery - 下拉导航的最佳方法

Question

我目前有这个导航栏，由 CSS 和 HTML 制成，主要是 inline-block 元素：

我想要实现的效果与SOUNDCLOUD上的此导航菜单相同

一旦您单击导航中的 n 项，菜单就会下拉，显然可以为您提供更多选项并增加导航空间。这是我希望达到的状态：

由于我已经掌握了基本的 HTML 和 CSS，就功能而言，下一个最佳步骤是什么。

任何人都知道任何类似的 JQuery 可以适应这种类型的交互吗？

提前致谢。

克里斯

Answer 1

你不应该需要任何太花哨的东西。基本的 jQuery 会做到这一点。看看这个jsfiddle 例子

这是基本的想法：一个可点击的链接，它使另一个 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>

希望这可以帮助！