css - 如何创建像谷歌的“更多”按钮这样的下拉菜单？

Question

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

如何使用 css/javascript/jquery 对我的网站导航栏中的选项卡之一做类似的事情？

编辑：更具体地说，我想知道如何完成其​​中的 CSS 部分，即：

• 切换下拉菜单时如何在选项卡上显示向上/向下箭头图形。（即切换时显示向下箭头，不切换时显示向上箭头）。（而不是仅仅放一个<img>我宁愿使用背景图像来切换箭头）

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

Answer 1

这是可以做到这一点的一种方式的示例。当然，您可以尝试不同的方法和东西，但这是一个基本的工作解决方案。

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

<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; }

​</p>

这是一个使用 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>​​​​

提琴手

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-horizo​​ntal-dropdown-menu-with-html-css-and-jquery/

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

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