如何使用Pinterest下拉菜单'’s的工作

How do Pinterest DropDown menu's work?

本文关键字：工作 何使用 Pinterest 下拉菜单      更新时间：2023-09-26

我知道有很多简单的方法可以使用各种jquery或其他类似的包创建自定义的DropDown菜单。把这些都放在一边。。我更好奇的是，Pinterest的用户是如何创建出一个响应速度非常快、深度不变的菜单的。。并且css属性没有更改（是的…下拉菜单容器显示css"display:none"，即使它是可见的！！）

到目前为止，我已经发现所有的显示元素都是硬编码的，下拉框隐藏在基本css中，规则是：.HeaderContainer li ul｛…；display:none；…｝

让我难以置信的是，即使菜单可见，这个属性也从未被更改。我本来希望有一些javascript函数为取消显示的元素添加一个样式属性：none；

有人能向我解释一下Pinterest是怎么做到的吗？这是他们的导航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>

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

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

更准确地说，这个规则适用于（pinboard_38edcc4cs.css:379）:

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

我认为您看到了display:none属性，因为每当菜单不再下拉时，您都在检查元素。大多数调试器在悬停页面中的元素时不会刷新"CSS规则"视图。在while:hover中查看CSS规则对于调试器来说总是很棘手的。

我建议你在谷歌上搜索"CSS下拉菜单如何操作"并尝试一下。

相关文章：