Question

我正在寻找一些关于如何制作像facebook的3个按钮（“朋友，通知，消息”）菜单的教程或说明。当你点击它显示一个菜单的元素时，我想创建类似的东西，当你点击这个元素外面时。我试图在谷歌搜索没有成功很多时间。谢谢你的时间。

Answer 1

可能很冗长！但要读它才能持续。

Facebook和谷歌以及许多其他网站都在使用jQuery。看看这个：

要隐藏的代码显示div：

<div class="friends" style="display: none;">Friends</div> <div class="messages" style="display: none;">Messages</div> <div class="notifications" style="display: none;">Notifications</div>

所有这些都是隐藏的。它们会在点击时显示，使用jQuery：

$(document).ready(function() { $(this).show(); }) $(".friends").blur(function() { // hide on blur $(this).hide(); }

您可能希望在此处了解更多信息：jQuery OFFICIAL Site或此处：W3schools。

加载数据的Ajax：

然后是主要想法，你希望div也可以填充数据。为此你可能想要阅读Ajax jQuery。

Ajax请求示例：

$.ajax({ url: "any_link_to_page", data: "mainly_the_query_strings", success: function(result) { $("some_div_class_or_id").html(result); } })

应该在ajax中使用的div必须是要填充的div;那些3的div！

div将由作为请求结果实现的数据填充。

以下是教程链接：jQuery Ajax - Documentation.

CSS Trianlges：

如果你想获得三角形，你应该阅读：css-tricks

他们使用的代码是：

.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }

向上箭头是该div或span的类，它将被转换为三角形。

我希望你能得到基本的想法。这就是我所能提供的一切。

Answer 2

它基本上是基于show / hide的东西：你有一个不同的项目ID ou class

的菜单

和一个收集菜单的容器：像这样：

<ul>
    <li id="notifications">menu item 1</li>
    <li>menu item 2</li>
    <li>menu item 3</li>
</ul>
<div id="container">
    <div id="menu_notifications" class="menu_content">your content</div>
</div>

当然你喜欢你喜欢的风格然后，如果您熟悉javascript或jquery，您可以将show hide方法绑定到菜单项以显示和隐藏cmenu内容divs

像facebook按钮一样的菜单下拉菜单

2 个答案: