Question

我知道有很多简单的方法可以使用各种jquery或其他类似的包创建自定义DropDown菜单。将所有这些放在一边..我更好奇Pinterest的人们如何设法创建一个非常灵敏的菜单，其深度不会改变..并且css属性不会改变（是的.. dropmenu容器显示css“显示：没有“即使它是可见的!!!）

到目前为止，我已经发现所有显示元素都是硬编码的，并且下拉块隐藏在规则下的基本css中：.HeaderContainer li ul {...;显示：无; ...}

令人难以置信的是，即使菜单可见，此属性也不会被更改。我本来希望有一些javascript函数为该元素添加了一个样式属性，取消了display：none;

任何人都可以向我解释Pinterest是如何做到这一点的吗？这是他们的Nav HTML

<ul id="Navigation">
    <li><a onclick="Modal.show('Add'); return false" class="nav" href="#">Add<span class="PlusIcon"></span></a></li>

    <li>
      <a class="nav" href="/about/">About<span></span></a>
      <ul>
        <li><a href="/about/help/">Help</a></li>
        <li><a href="/about/goodies/">Pin It Button</a></li>
        <li class="beforeDivider"><a href="/about/copyright/">Copyright</a></li>
        <li class="divider"><a href="/about/careers/">Careers</a></li>
        <li><a href="/about/team/">Team</a></li>
        <li><a href="http://blog.pinterest.com/">Blog</a></li>
     </ul>
    </li>

    <li id="UserNav">
      <a class="nav" href="/guacamoly/"><img alt="img" src="http://media-cdn.pinterest.com/avatars/guacamoly-72.jpg">Amol<span></span></a>
      <ul>
        <li><a href="/invites/">Invite Friends</a></li>
        <li class="beforeDivider"><a href="/invites/facebook/">Find Friends</a></li>
        <li class="divider"><a href="/guacamoly/">Boards</a></li>
        <li><a href="/guacamoly/pins/">Pins</a></li>
        <li><a href="/guacamoly/pins/?filter=likes">Likes</a></li>
        <li class="divider"><a href="/settings/">Settings</a></li>
        <li><a href="/logout/">Logout</a></li>
       </ul>
    </li>
</ul>

Answer 1

这是一个基本的CSS下拉菜单。

当鼠标移过父菜单项时，内部元素的显示属性切换为“not none”（块，内联或内联块或其他）。

更确切地说，此规则适用（pinboard_38edcc4c.css：379）：

.HeaderContainer li:hover ul {
  display: block;
}

我认为您会看到display：none属性，因为只要菜单不再被删除，您就会检查元素。并且大多数调试器在页面中悬停元素时不会刷新“CSS规则”视图。在使用调试器时看到CSS规则：hover总是很棘手。

我建议你谷歌“CSS下拉菜单如何”并试一试。

Pinterest DropDown菜单如何工作？

1 个答案: