jquery - 来自按钮的 jQuery 或 CSS 弹出菜单的模式

Question

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

我想要这样的东西:

我什至不确定如何将其概念化，因此我们将不胜感激。如果需要，可以将其设为高级，但最好有一个工作示例 (JSFiddle)。

谢谢!

Answer 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'}) 来显示子菜单。

结果是这样的: