Animated Navigation With CSS3 And Sass

12 Jan 2013

This is just exercising the new tools in CSS3 and Sass, so let's get right into it. If you're new to Sass, take a look at my introduction. There's a Codepen sample at the bottom of the article if you want to see it in action before reading the article.

Start with basic HTML5 navigation. Make sure to include the "foo" class on your links.

<header>
  <nav>
    <ul>
    <li><a class="foo" href="#">One</a></li>
    <li><a class="foo" href="#">Two</a></li>
    <li><a class="foo" href="#">Three</a></li>
    <li><a class="foo" href="#">Four</a></li>
    <li><a class="foo" href="#">Five</a></li>
    </ul>
  </nav>
</header>

Now we'll start our Sass file which we'll write in SCSS. First let's declare a few variables so we don't have to remember the hex codes over and over again.

$light:#DBEAF8;
$dark:#0066CC;
$small:1.4em;
$big:1.8em;

The first thing we'll style is the navigation. Set up the nav selector and nest the ul, li, and a selectors inside of it. This is a cookie-cutter navigation style, so I won't go farther into why I chose these properties.

nav {

  ul {
    display:inline;
    list-style-type:none;
    width:70%;
    margin:auto;
  }

  li {
    float:left;
    }



  a {
    display:block;
    width:60px;
    text-decoration:none;
    text-align:center;
    color:#fff;
  }

}

Now we'll style the "foo" class that we added to our links. We'll use this to create the transitions. None of these are hard and fast so play around with them until they are to your liking.

.foo {
  padding: 20px 100px;
  background: $dark;
  font-size: $small;
  color:$light;
  border-radius:0px;

  &:hover {
    background: lighten($dark, 10%);
    border-radius:0 120px 0 0;
  }
}

Note how we're using the variables that we declared at the top of our Sass code. This allows us to do math on the properties. The lighten() function is really convenient for making changes without having to enter a ton of hex codes. This way can be much more manageable when you have a lot of shades of a single color on your site, and you have large scale changes to make to your CSS. With this, you can simply tweak the variable and all of the different shades will adjust themselves.

Now we'll attach the transitions to the foo class. This is how we'll set them up.

  -PREFIX-transition-property: background;
  -PREFIX-transition-duration: 0.5s;
  -PREFIX-transition-timing-function: ease;

So if you want to account for Webkit, Firefox, and Opera, your foo class will look like this.

.foo {
  padding: 20px 100px;
  background: $dark;
  font-size: $small;
  color:$light;
  border-radius:0px;

  -webkit-transition-property: background;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: background;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -o-transition-property: background;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: ease;
  transition-property: background;
  transition-duration: 0.5s;
  transition-timing-function: ease;

  -webkit-transition-property: border-radius;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: border-radius;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -o-transition-property: border-radius;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: ease;
  transition-property: border-radius;
  transition-duration: 0.5s;
  transition-timing-function: ease;

  &:hover {
    background: lighten($dark, 10%);
    border-radius:0 120px 0 0;
  }
}

Now you'll have a nice little animated navigation without having to using Javascript or any of its libraries, which should help keep your code lighter and your website faster. Take a look at the Codepen below to try it out yourself.