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 get an HTML div to dynamically expand in a horizontal direction to fit window width?

    Font-family not showing correctly on my website

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to fast-blur in css/js?

    How to activate a CSS animation only when hovering - without javascript

    How to include Material Design libraries without npm

    Formatting text, Suggestions with how-to?

    How to disable external css stylesheet - Newbie

    HTML, CSS - I want to create a button “Preview” which will show user his input

    How can i refer to all of my tags in CSS?

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to Set custom text Color in QTextEdit?

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How to use Aural CSS?

    How to position a drop down list nav bar inside header in html css

    how to remove elements in document fragment after append

    How to select text, but not images, in CSS

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    CSS: How to override a class style with an enclosing div

    How to modify only via CSS a color already defined in HTML?

    How to select text under multiple “div-li-a href” using css in selenium web driver

    How to skew element but keep text normal (unskewed)

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How can I avoid CSS delay in Rails 3.2

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How to properly add margin to elements inside bxSlider

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    How can I set a css property to tags with specific attribute?

    How to correct CSS formatting problem in Visual Studio

    Border around tr element doesn't show?