Part 2 - creating an animated menu

In part 1 we went through the process of creating a menu icon that on hover animated to a cross. A solution that can be used for both mobile and desktop situations. You can view how this should look on my codepen.

For part 2, we are going to go through the process of creating the rest of our list, including the animation process.

This is what our final result will look like

See the Pen Pure CSS animated menu and icon on hover by Michael Tempest (@mike-tempest) on CodePen.

Basic styling of the menu

The first step we need to take, remembering that all our development should primarily work in it's most basic form, is to style our menu.

For my project, I want to have a fixed navigation on the left hand side of the page. (Please note, I will be making this mobile friendly in a subsequent blog post) With this in mind, I will get straight into the styling.

I am using the font face of Avenir for my project, which is provided by myfonts.com. However, I highly recommend you using Google Fonts for your own projects, they are highly reliable and best of all FREE!

To get our fixed positioning exactly halfway up the screen, we first need to top position by 50% on .nav. Then we need to adjust our list inside of .nav so that it is adjust to be in the correct position.

.nav {
  font-family:'Avenir LT W01 85 Heavy', helvetica, arial, sans-serif;
  position:fixed;
  top:50%;

  ul {
    list-style:none;
    margin:0 0 0 20px;
    @include vendor(transform, translate3d(0,-50%,0));
  }

  .nav__item {
    display:block;
  }

  a {
    color:$brand-color;
    @include font-size(14px);
    text-decoration:none;
  }
}

We also need to re-adjust the position of our menu button so it sits in the correct position next to the menu.

.menu-icon {
  display:block;
  width:40px;
  position:absolute;
  margin-top:-18px;
  right:-50px;
  top:0;
}

Time for a rejig

For the animation of the menu, I have decided that it should come into view simply on hover of the icon, this means our code is going to need a little rejig. There are a few options we could take for this:
- Restructure our DOM so that we can use the adjacent sibling (+) css selector. These are supported back to IE8, however they tie our DOM structure a bit too vigorously for my liking. - Use JavaScript to add a css class to our menu to trigger our animations. This is perfectly fine, but why not use a purely CSS solution as we intended. - Add the hover state to the global NAV block that we have created, then fire all our animations of of this state instead. This too is supported back to IE8.

With the above in mind, I have chosen to go with the last option, it means I don't have to change my DOM structure, which was written with Screen readers in mind. It also means that we don't have any ordering dependencies for our codebase to simply function. Meaning if later down the line we want to change things up or add elements our code will not break easily.

First, let's make our icon interaction work

This is definitely the first step we take so that all of our previous work is not undone. To do this, we simply need to move our hover states to within the .nav hover rather than the icon.

.nav {
  &:hover {
    .menu-icon {
      &:before {
        @include vendor(transform, rotate(45deg) translate3d(5px,10px,0));
      }

      .menu-icon__text {
        opacity: 0;
      }

      &:after {
        @include vendor(transform, rotate(-45deg) translate3d(5px,-10px,0));
      }
    }
  }
}

You should now see the same menu-icon animation when you hover anywhere on .nav.

Let's animate our menu!

This should be a fairly simple one being as we have done most of the work for setting up the menu with the correct default styling. All we need to do is translate our .nav off the screen, then use the same hover functionality to animate it back in. As our button has been positioned absolute out of the nav box with negative right position, this means it will not affect the nav width. Translating 100% will do the trick.

.nav {
  @include vendor(transform, translate3d(-100%,0,0));

  &:hover {
    @include vendor(transform, translate3d(0,0,0));
  }
}

Now that is working, all that's left to do is add our transition to the .nav so that animates in and out of this position.

.nav {
  @include vendor(transition, all .2s ease-out);
}

That's it, we are all done with our animated menu. It should like a little something like this.

All that's left for you to do is play around with animations now to make something a bit more unique for your own site.

Comments