Create a Cool Animated Navigation With CSS3

In the old days of web development, developers relied on Adobe's Flash whenever they needed to do any kind of animation for their website. As time progressed, people ditched Flash and started accomplishing many of those things with the help of CSS and JavaScript. Finally, with the help of CSS3 and the wide browser support that it enjoys now, we can do some pretty amazing things by simply using some CSS3 and nothing else.

In this tutorial, I will show you how to create a cool animated navigation menu with CSS3. You can see it in action in the CodePen demo below:

Please accept marketing cookies to load this content.

Excited to implement the menu? Let's get started.

Deciding the Markup

HTML5 has introduced a lot of new tags as well as features. This means that we no longer need to use the div element to wrap everything that we want to style. Our markup can now be a lot more sensible and semantic.

Let's begin with the header section of the website. We will wrap it inside a header element, as shown below.

1	<header>
2	<div class="top-wrapper">
3	</div>
4
5	<nav>
6	<ul>
7	<li><a href="#">home</a></li>
8	<li><a href="#">about</a></li>
9	<li><a href="#">services</a></li>
10	<li><a href="#">solutions</a></li>
11	<li><a href="#">contact</a></li>
12	</ul>
13	</nav>
14	</header>

The header element contains an empty div that just acts as a space filler. After that, we have a nav element which contains our main navigation. The navigation links are basically part of an unordered list that we will style later.

Now, we will write some markup for the main content of the webpage. We will use the section and article tags here.

<article class="main-content">
  <section>
    <h2>What is Lorem Ipsum?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida felis et fringilla aliquam. Phasellus erat lorem, efficitur sed facilisis non, scelerisque a metus. Nam sit amet fermentum felis, vitae ultrices purus. Ut dui ligula, sagittis ut blandit ac, interdum ut urna.</p>
    <p>Cras quis magna sit amet dui ultrices elementum. Suspendisse laoreet sem nisi, pretium vestibulum sapien commodo cursus. Sed et gravida tellus. Suspendisse nec dapibus mi, quis dignissim massa. Sed sit amet velit scelerisque, tristique ipsum in, tristique orci.</p>
    <p>Aliquam dictum pretium orci, at molestie augue euismod non. Nam ac lobortis mauris, eu ultrices leo. Etiam facilisis arcu non libero molestie, eget vestibulum urna rhoncus. </p>
  </section>
</article>

The article tag contains the main content of the webpage, i.e. the blog post, while the section tag contains different sections of the blog post.

Styling the Header

As I mentioned earlier, the header of our webpage will contain a space filler div element at the top. Since this is going to be empty space in our example, we will assign it a height of 150px. Here is all the CSS applied to the div element.

div.top-wrapper {
  height: 150px;
  background: linear-gradient(black, #616161);
  padding: 20px;
  position: relative;
  z-index: 999;
  box-shadow: 0 2px 5px black;
}

We want the div element to be partially placed over the navigation links. That's why we applied a z-index of 999. However, this property won't work on statically positioned elements, so we need to change the position to relative. The box-shadow property gives us the subtle 3D effect that the filler div is actually above our navigation menu.

We can also apply a repeating linear gradient to our body element to make the background more interesting.

body {
  background: repeating-linear-gradient(
    45deg,
    #424242 0px,
    #424242 5px,
    #6e6e6e 5px,
    #6e6e6e 7px
  );
}

The links in the navigation menu need to be placed side by side horizontally, with even spacing among them. There are multiple ways to achieve that, but we will be using flexbox because it is the easiest and most effective method for this particular situation.

Here is the CSS that we will apply to our unordered list, unordered list elements, and unordered list element links:

nav ul {
  margin-left: 20px;
  list-style: none;
  display: flex;
  gap: 0.1rem;
}

nav ul li {
  background: black;
  padding: 1.5rem 1rem 0.5rem 1rem;
  position: relative;
  border-radius: 0 0 10px 10px;
  top: -1.25rem;
  transition: 0.2s all;
  text-transform: uppercase;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

Setting the display to flex for our unordered list places all the list elements side by side, and setting the value of the gap property to 0.1rem introduces additional spacing between them.

We have also applied uneven padding to our list elements. You can see that the top padding is set to 1.5rem, while the bottom padding is just 0.5rem. We are compensating for the offset value assigned to the top property. We also want the bottom to be rounded, so we applied a border-radius of 10px to the bottom-right and bottom-left corners.

Why are we offsetting the top position of our list elements? This is because we will be animating them to a lower position on hover. The transition property helps us to make the animation smooth instead of abrupt.

The links inside the list elements will have a light blue color and an underline by default. We get rid of them by setting the color to white and the text-decoration to none.

Finally, we will make the menu more colorful with the CSS below:

nav ul li:nth-child(1) {
  background: #ff9800;
}

nav ul li:nth-child(2) {
  background: #c2185b;
}

nav ul li:nth-child(3) {
  background: #1e88e5;
}

nav ul li:nth-child(4) {
  background: #7cb342;
}

nav ul li:nth-child(5) {
  background: #546e7a;
}

As you can see, we did not have to assign separate classes to each of our navigation menu links. We were able to style them individually by simply using the nth-child selectors. Here's what we have so far:

Please accept marketing cookies to load this content.

Styling the Article Content

Our navigation menu now looks just how we intended. However, the main article content is barely visible. Let's remedy that now. All we need to do to improve the content visibility and appearance is to apply the following CSS:

article.main-content, nav {
  width: 90%;
  margin: 0px auto;
}

section {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  position: relative;
  z-index: 999;
  top: -0.5rem;
}

p {
  line-height: 1.5;
  margin: 1rem 0;
}

Applying the same width and margin to our article and navigation aligns them properly. Remember that we assigned a margin-left of 20px to our unordered list earlier? That will keep our navigation menu slightly to the right of the left edge of our article.

The z-index property here is also applied to keep the content above the menu links when they animate on hover.

There are three properties that we want to animate for our navigation menu links. The first is the position where we move the menu items to a lower position vertically.

We also update the padding property so that the top padding reduces to 0.5rem while the bottom padding increases to 1.5rem. The top and bottom padding values are basically reversed because the navigation menu links will now be cut off at the bottom instead of the top.

The third property that we animate is the border-radius, which becomes 10px for the top left and top right corners. It becomes 0 for the bottom left and bottom right corners.

Here is the CSS that applies these changes whenever a user hovers over the menu items:

nav ul li:hover {
  top: 20px;
  padding: 0.5rem 1rem 1.5rem 1rem;
  border-radius: 10px 10px 0 0;
}

All this animation happens within 0.2s because that's the duration we assigned to the transition property earlier.

Please accept marketing cookies to load this content.

Animating the Pseudo-Elements

The only thing left for us to do now is the creation and animation of the white box at the top of the navigation links. We accomplish this with the help of pseudo-elements. We use the ::after pseudo-class to create a pseudo-element. This pseudo-element becomes the last child of our original selector.

Here is the CSS that we use to create the pseudo-elements:

nav ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background: white;
  top: -30px;
  left: 0;
  border-radius: 0 0 10px 10px;
}

Providing a value for the content property is important, even if this value is an empty string. We set the position to absolute to take the element out of the normal document flow and position it the way we want. A width of 100% makes sure that all the pseudo-elements match the width of their respective navigation links.

The final result looks like this:

Please accept marketing cookies to load this content.

Final Thoughts

In this tutorial, we created a cool animated navigation menu using just a few CSS3 properties, without writing a single line of JavaScript. There are a lot of interesting ways in which you can use CSS3 to animate content on a webpage. While some very complicated scenarios might warrant the use of JavaScript for animation, you will be surprised what you can accomplish with just some CSS. Read these two posts to get inspired and learn more.

Create a Cool Animated Navigation With CSS3

Deciding the Markup

Styling the Header

Styling the Navigation Menu

Styling the Article Content

Animating the Navigation Menu

Animating the Pseudo-Elements

Final Thoughts