Jquery 菜单下拉菜单，如facebook按钮

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

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

Facebook、谷歌和许多其他网站都使用jQuery来实现这一目的。看看这个：

要隐藏的代码显示div:

朋友

消息

通知

所有这些都是隐藏的。单击时将显示它们，请使用jQuery：

$（文档）.ready（函数（）{

$（this.show（）；

})

$（“.friends”）.blur（函数（）{//hide on blur

$（this.hide（）；

}

您可能希望在此处了解更多信息：，或在此处：

Ajax加载数据：

然后是主要思想，您希望div也填充数据，为此您可能需要阅读ajaxjquery

Ajax请求示例：

$.ajax（{

url:“任何指向页面的链接”，

数据：“主要是查询字符串”，

成功：函数（结果）{

$（“some_div_class_或_id”）.html（结果）；

}

})

ajax中应该使用的div必须是您想要填充的div；这3个div中的div

div将由作为请求结果获得的数据填充

以下是教程链接：

CSS试用版：

如果您也想得到三角形，您应该阅读以下内容：

他们使用的代码是：

。向上箭头{

宽度：0；

高度：0；

左边框：5px实心透明；

右边框：5px实心透明；

边框底部：5px纯黑；

}

Arrow up是该div或span的类，将转换为三角形

---

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

它基本上是基于显示/隐藏的东西： 你有一个菜单，菜单上有不同的项目

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

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

菜单项1
菜单项2
菜单项3

你的内容

当然，你可以随心所欲地设计你的html 然后，如果您熟悉javascript或jquery，可以将show hide方法绑定到菜单项，以显示和隐藏cmenu内容div