如何创建一个下拉菜单，如谷歌的“更多”按钮？
在google主页上，如果单击“更多”按钮，就会在该按钮下面打开一个菜单，如下所示：
如何使用css/javascript/jquery对网站导航栏中的一个选项卡进行类似的操作？
编辑:更具体地说，我想知道如何完成CSS部分，即：
- 当下拉菜单被切换时，如何在选项卡上形成上下箭头图形显示。(也就是说，当切换时，显示向下箭头，当不是，向上箭头)。(我宁愿使用背景图像来切换箭头，而不是仅仅放置一个
<img>) - 如何使新列表在选项卡下面弹出并与其对齐。
回答 3
Stack Overflow用户
发布于 2012-06-16 19:36:41
这是一个可以这样做的例子。当然，您可以尝试不同的方法和东西，但这是一个基本的工作解决方案。
要通过单击链接来切换的下拉元素是非常好的。
<div id="topBar">
<a href="#" id="more">More
<span id="arrow">
<span id="arrdown">▼</span>
<span id="arrup">▲</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/
Stack Overflow用户
发布于 2012-06-16 19:20:41
对此有许多不同的方法，其中最简单的方法之一是：
创建一个隐藏的div，在单击菜单项时得到切换。
<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
$(".menu").on("click",function(){
$(".dropDown").toggle();
});
</script>JsFiddle
Stack Overflow用户
发布于 2012-06-16 19:20:57
有些人在谷歌上会发现你在网上有很多教程。我搜索了“在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。
https://stackoverflow.com/questions/11066311
复制相似问题
腾讯云开发者
