October 12, 2016 | 23 Feedbacks Navigation

A morphing dropdown that animates according to the size of its content.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

A few weeks ago launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes.

We thought it would be interesting to explain how this effect is achieved, therefore we created our own version of Stripe navigation.

Original version:

Creating the structure

The HTML structure is composed of two main elements: the nav.main-nav for the top navigation items and the div.morph-dropdown-wrapper wrapping the dropdown elements.
For each list item in the nav.main-nav element, a li.dropdown is created inside the .morph-dropdown-wrapper.

An additional has been created inside the div.morph-dropdown-wrapper and is used to create the dropdown morphing background.

Adding style

On small devices, the div.morph-dropdown-wrapper is hidden by default; when a user clicks the menu icon, the .nav-open class is added to the .cd-morph-dropdown to reveal the navigation.

On bigger devices (viewport width more than 1000px), the .dropdown-list and the li.dropdown elements are hidden by default.

When a user hovers over one of the elements inside the nav.main-nav, the .is-dropdown-visible class is added to the .cd-morph-dropdown and the .dropdown-list visibility is changed to visible. At this point, the dropdown wrapper is visible, but its content is still hidden. To reveal the content selected by the user, the .active class is added to the selected li.dropdown element (the one with an id equal to the data-content of the navigation item the user is hovering over).

Since the li.dropdown elements have an absolute position, they do not actually take space inside their parent (div.dropdown-list), that means the div.dropdown-list width and height do not change according to the visible content. Since its overflow property is set to hidden (so that no content is visible outside the dropdown wrapper), we use JavaScript to change its height and width to make sure the selected dropdown content is always visible.

To create the dropdown background, we use the It has an absolute position, width and height equal to 1px and opacity of zero. When the .is-dropdown-visible class is added to the .cd-morph-dropdown, its opacity is changed to one and it is scaled up (using JavaScrip) to fit the visible content area.

When the user moves from a navigation item to a different one, the scaleX and scaleY values of the are changed (using JavaScript) to create the morph effect.

Events handling

To implement this navigation, we created a morphDropdown object and used the bindEvents method to attach event handlers to the proper elements.

The bindEvents method is used to detect the mouseenter/mouseleave events on the .has-dropdown and .dropdown elements.

The showDropdown method takes care of changing the height, width and translateX values of the .dropdown-list and to scale up/down the .bg-layer element.



Oct 12, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • René Stalder

    The effect is nice, but there would be a better way to make this and make it work for keyboard only users. Also I didn’t test it on touch, but I guess it will not work.

    • John Rivs

      I just checked in my iPad. iOS 10, Safari. Works just fine.

    • A. M. Douglas

      > “The effect is nice, but there would be a better way to make this and make it work for keyboard only users.”

      This would be relatively straightforward to implement. I’ve been making something similar to this Codyhouse example, because I was also rather taken with the effect Stripe uses.

      I’ve been using plain Javascript, and I don’t favour prototypal inheritance, so for my version my keyboard-handling code looked roughly like this:

      window.addEventListener( ‘keyup’, function(){
      showDropdown( document.activeElement.parentNode );
      }, false);

      which, in the case of this Codyhouse example, would look more like this:

      $(window).on( ‘keyup’, function(){
      morphDropdowns[0].showDropdown( $( document.activeElement.parentNode ) );

      > “but I guess it will not work”
      What the hell? There is a touch handler, see main.js # L42-L48

      • Farzad


  • A. M. Douglas

      Very nice work, by the way your implementation has the same bug with the zoom (cf the message of Stephen Hocker in this thread).
      Keep up the good work.

  • Dave Beirne

    Amazing Work as usual! and so quick after Stripe released their new version of the website.


    Great article !
    do you have a tips on how to implement a vertical version of this menu effect ?

  • Stephen Hocker

    Is that how it is supposed to be?
    I wonder why there is a difference of width between the white and the shadow?

    • Farzad

      What browser is this on? It seems to work perfectly fine on most browsers I’ve tested so far :)

      • Stephen Hocker

        Happens (still) to me on Chrome and on Firefox, both of them most recent versions.
        Not sure if it matters, but it is on a 3840×2160 4k Monitor and on the “marvellous” Windows 10

        • Farzad

          This is how it looks on my computer, mine is both up-to-date! Not quite sure why it doesn’t renders properly for you mate :(

          It’s worth resizing your web browser to 1200 x 900 and restarting it…

        • Farzad

          Stephen, I was able to replicate the same problem, basically what I did was set the zoom level to 75%, I had to zoom out due to my monitor been quite small…

          So for some reason it seems the stylesheet doesn’t renders beyond certain size… I’ve to look into this later tonight, but at least I was able to replicate the error!

          So technically speaking if you resize down your browser to something normal then you are at least able to look at it for now!


          • Stephen Hocker

            Smart move to set a zoom level, would not have come up with that.Tip to the head.
            Happy to have been helpful and to be able to give at least something back.
            This site is a real gem to all of us!

  • Californ Lov

    That’s pretty cool!

  • Farzad

    Thank you, awesome tutorial as always :) really appreciate your time and efforts both of you guys :)

  • Simon

    Great work! Thank You very much!

    One Problem on iPad Air 2 (mobile safari) IOS 10.0.1:
    The Menu can’t be closed with Touch.

    Rounded corners for the Box with the Child nav items would also be nice..

  • Araz Rawshani

    Any simple way of turning that into a wordpress thingy? :-)

  • Richard Wiggins

    I’m having real problems applying a border radius to the dropdown, which looks to be caused by the wrapper. Is there a way of getting this working?

    • Rafał

      got the same problem, been trying to add it to every element.

      • Conor James Barclay

        I was able to add a border radius to the dropdown with a little bit of hacking. Essentially, it involves wrapping the menus in another div and applying overflow: hidden and your border-radius to that, and then copying the same Javascript that sizes and transforms the menus, to transform and size this new wrapper as well — so it follows the menu around. Not the most efficient, but it works and looks good!