按钮的 jQuery 或 CSS 弹出菜单的模式答案

【问题标题】：Patterns for a jQuery or CSS pop-up menu from a button按钮的 jQuery 或 CSS 弹出菜单的模式
【发布时间】：2010-11-11 03:35:45
【问题描述】：

我正在尝试找出在单击按钮时制作基于 jQuery 或基于 CSS 的弹出菜单的最佳模式。

我想要这样的东西：

我什至不确定如何对此进行概念化，因此我们将不胜感激。如果您愿意，可以将其设为高级别，但最好是一个工作示例（JSFiddle）。

谢谢！

【问题讨论】：

有很多可用的插件。你想从头开始创建它吗？
不一定。你介意指点我几个更好的插件吗？
你有没有成功解决过这个问题？您还需要这方面的帮助吗？
@drachenstern 我回答了我自己的问题（冗长地）并接受了它。如果您愿意，请投票，这样它就会上升到顶部。

标签： jquery css menu popup

【解决方案1】：

这实际上很容易弄清楚，非常感谢 IRC 上 #jquery 中的 @NateL 帮助我弄清楚了这方面的 CSS。

这是我实现的：

CSS

.all-checkboxes-menu
{
  position: absolute;
  width: auto;
  height: auto;
  display: none;
  top: 28px;
  left: 7px;
  background-color: white;
  z-index: 1;
  box-shadow: 0px 5px 5px #999;
  -moz-box-shadow: 0px 5px 5px #999;
  -webkit-box-shadow: 0px 5px 5px #999;
}

.tasks-submenu
{
  padding: 5px;
}

.tasks-submenu li
{
  list-style: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.tasks-submenu li:hover
{
  background-color: #fcf7bd;
}

HTML

        <div class="all-checkboxes-menu">
          <ul class="tasks-submenu">
            <li>All</li>
            <li>None</li>
            <li>Due Today</li>
            <li>Overdue</li>
          </ul>
        </div>

CSS 的关键部分是position: absolute，父 div 必须显式指定为position: relative。请注意，最初使用 display: none。在 jQuery 代码中，我调用 .css({'display': 'block'}) 来显示子菜单。

结果如下：

【讨论】：

嗯，这在 Firefox（也许还有其他）中效果很好，但在 IE 中不行；没有阴影，菜单很难看...

【解决方案2】：

我们在以下位置实现了该菜单

http://www.allposters.com/ 甚至 www.art.com ，因为它是 javascript 代码，您可以从其中一个 javascript 文件中复制代码。

它的 header_menu.js。

如果您想在没有 jquery 或 javascript 的情况下实现，请告诉我我们可以使用 CSS 实现，这也是 SEO 友好的。

但要获得好的效果最好通过 jquery 或 javascript 实现，如果您需要任何帮助，请告诉我，我可以为您提供所有详细信息。

【讨论】：

@josh ，请参阅我从 google 获得的这个链接，他们有很多示例 1stwebdesigner.com/resources/… ，开始编写代码，如果你遇到困难，请在此处更新。

【解决方案3】：

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DropDown/DropDown.aspx

查看该下拉菜单是否如您所愿。我不是要你使用那个特定的，我是问你是否喜欢这样的效果。

可搜索的术语是“sharepoint dropdownlist”，因为 sharepoint 使用相同的方法来生成可主题化的下拉列表。

【讨论】：