How do Pinterest DropDown menu's work?


Tags: javascript,css,drop-down-menu

Problem :

I know there are many easy ways to create custom DropDown menus using various jquery or other similar packages. Setting all those aside.. I'm more curious as to how the folks at Pinterest have managed to create a very responsive menu where depths are not changed.. and css properties are not altered (yeah.. the dropmenu container shows css "display:none" even when it is visible!!!)

So far I've figured out that all the display elements are hard coded and the dropdown blocks are hidden in the base css under the rule : .HeaderContainer li ul { ... ; display:none; ...}

The thing that is boggling my mind is that this property never gets altered even when the menu is visible. I would have expected to have some javascript function added a style attribute to that element canceling out the display:none;

Can anyone explain to me how Pinterest is doing this? Here is their 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>


Solution :

this is a basic CSS dropdown menu.

the inside elements have their display property switched to "not none" (either block, inline or inline block or whatever) when the mouse goes over the parent menu item.

more precisely, this rule applies (pinboard_38edcc4c.css:379):

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

I think you see the display:none property because you are inspecting elements whenever the menu is not anymore dropped down. and most debuggers won't refresh the "CSS rules" view while hovering elements in the page. Seeing CSS rules while :hover is always tricky with debuggers.

I suggest you google "CSS dropdown menu how to" and give it a shot.


    CSS Howto..

    How to include library files (css/js) in angular-fullstack based app

    How to target last TD cell?

    How to use pseudo-class :target within an image map

    How to have dots as horizontal separator with inline text like in this screenshot?

    How to align a paragraph to center of cell in table

    How to create a pixel perfect divider using css border [closed]

    How to parse CSS font shorthand format

    CSS Dropdown menu - How to add thumbnails

    How can I do this menu using list and css?

    How to display form output in the same page by hiding the form

    How to position a div in the absolute center of a page?

    How to change img margin inside a table using css hover

    How to pinch the middle of a line in css

    CSS: How to omit the spacing between an h3 and a p element?

    How to disable scrollbars in Webmethods 8?

    How to change size of SVG circle

    jQuery addClass based on how far scrolled

    How to append an
  • to a
      and set css on the
    • at the same time with jquery
  • how to tint image in div when clicked for 0.5 seconds

    How to override font-size (em) in this condition?

    How to disable css transition for specific line of css?

    How to exclude last child in css psuedo class selector

    How to make changes in wordpress template. Css direct edit not working

    How to do like this list using
  • and CSS?
  • How to overlap elements inside of a ng-repeat list - position: absolute?

    How to set out css properly?

    CKEditor 4: How to add CSS stylesheet from plugin?

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    How put some horizontal offset to an element bottom border with CSS?

    CSS horizontal scroller, how to position “below” before “right”?