如何创建谷歌的“更多”按钮等下拉菜单？

Question

在谷歌主页上，如果您点击更多按钮，则会在该按钮下方打开一个菜单，如下所示：

如何使用css / javascript / jquery在我网站导航栏中的其中一个标签上做类似的事情？

编辑：更具体一点，我想知道如何完成CSS的这一部分，即：

• 切换下拉列表时，如何在选项卡上显示向上/向下箭头图形。 （即切换时，显示向下箭头，否则，向上箭头）。 （而不是仅仅使用<img>而是使用背景图像来切换箭头）

• 如何在选项卡下方弹出新列表并与其对齐。

Answer 1

这是一个可以做到这一点的方法的例子。当然，你可以尝试使用diff方法和东西，但这是一个基本的工作解决方案。

通过点击链接切换的下拉元素非常好。

<div id="topBar">
    <a href="#" id="more">More
        <span id="arrow">
            <span id="arrdown">&#x25BC;</span>
            <span id="arrup">&#x25B2;</span>
        </span>
    </a>
    <div class="dropdown">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
    </div>
</div>​

然后你用JS点击切换它。

$('#more').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown').toggle();
    return false;
});

$('.dropdown a').click(function() {
    return false;
});

的CSS：

body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }

以下是CSS的实例：http://jsfiddle.net/ZUPBj/

Answer 2

有许多不同的方法，最简单的方法之一：

创建一个隐藏的div，在单击菜单项时切换。

<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
    $(".menu").on("click",function(){
        $(".dropDown").toggle();
    });
</script>​​​​

JsFiddle

Answer 3

一些谷歌搜索会在网上找到大量的教程。我搜索了“在html中构建下拉菜单”。下面的这些链接是我发现的一些更好的教程。

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/

http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/

基本上他们正在做的是当用户将鼠标悬停在菜单的第一级时显示隐藏的div。