jquery - Menu dropdown like facebook buttons

Question

I'm looking for some tutorial or explanation about how to make a menu like the 3 buttons of facebook ("Friends,Notification,Messages"). I would like create something like that when you click on element it show a menu, and when you click outside the element this close. I tried to search on google without success for a lot of time. Thank you for the time.

Answer 1

可能会很长！但一定要读到最后。

Facebook 和 Google 以及许多其他网站为此目的使用 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 官方网站，或在这里：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 - 文档。

CSS 三角函数：

如果你也想得到三角形，你应该阅读这个：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

它基本上基于显示/隐藏的东西：你有一个包含不同项目 ID ou 类的菜单

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

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

当然，您可以根据需要设置您的 html 样式，然后如果您熟悉 javascript 或 jquery，您可以将显示隐藏方法绑定到菜单项以显示和隐藏 cmenu 内容 div