This content originally appeared on Envato Tuts+ Tutorials and was authored by Joash Xu
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:
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 tags section and article here.
1 |
<article class="main-content"> |
2 |
<section>
|
3 |
<h2>What is Lorem Ipsum?</h2> |
4 |
<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> |
5 |
<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> |
6 |
<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> |
7 |
</section>
|
8 |
</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.
1 |
div.top-wrapper { |
2 |
height: 150px; |
3 |
background: linear-gradient(black, #616161); |
4 |
padding: 20px; |
5 |
position: relative; |
6 |
z-index: 999; |
7 |
box-shadow: 0 2px 5px black; |
8 |
}
|
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 had 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 in order to make the background more interesting instead of plain white.
1 |
body { |
2 |
background: repeating-linear-gradient( |
3 |
45deg, |
4 |
#424242 0px, |
5 |
#424242 5px, |
6 |
#6e6e6e 5px, |
7 |
#6e6e6e 7px |
8 |
);
|
9 |
}
|
Styling the Navigation Menu
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 for this particular situation.
Here is the CSS that we will apply to our unordered list, unordered list elements and unordered list element links:
1 |
nav ul { |
2 |
margin-left: 20px; |
3 |
list-style: none; |
4 |
display: flex; |
5 |
gap: 0.1rem; |
6 |
}
|
7 |
|
8 |
nav ul li { |
9 |
background: black; |
10 |
padding: 1.5rem 1rem 0.5rem 1rem; |
11 |
position: relative; |
12 |
border-radius: 0 0 10px 10px; |
13 |
top: -1.25rem; |
14 |
transition: 0.2s all; |
15 |
text-transform: uppercase; |
16 |
}
|
17 |
|
18 |
nav ul li a { |
19 |
color: white; |
20 |
text-decoration: none; |
21 |
}
|
Setting the display to flex for our unordered list places all the list elements side-by-side and setting the value of 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 the border-radius of 10px to 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 in making 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:
1 |
nav ul li:nth-child(1) { |
2 |
background: #ff9800; |
3 |
}
|
4 |
|
5 |
nav ul li:nth-child(2) { |
6 |
background: #c2185b; |
7 |
}
|
8 |
|
9 |
nav ul li:nth-child(3) { |
10 |
background: #1e88e5; |
11 |
}
|
12 |
|
13 |
nav ul li:nth-child(4) { |
14 |
background: #7cb342; |
15 |
}
|
16 |
|
17 |
nav ul li:nth-child(5) { |
18 |
background: #546e7a; |
19 |
}
|
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 is what we have got so far:
Styling the Article Content
Our navigation menu now looks just like we intended. However, the main article content is barely visible. Let's remedy that first. All we need to do to improve content visibility and appearance is to apply the following CSS:
1 |
article.main-content, nav { |
2 |
width: 90%; |
3 |
margin: 0px auto; |
4 |
}
|
5 |
|
6 |
section { |
7 |
background: white; |
8 |
padding: 2rem; |
9 |
border-radius: 0.5rem; |
10 |
position: relative; |
11 |
z-index: 999; |
12 |
top: -0.5rem; |
13 |
}
|
14 |
|
15 |
p { |
16 |
line-height: 1.5; |
17 |
margin: 1rem 0; |
18 |
}
|
Applying the same width and margin to our article and navigation aligns them properly. Remember that we assigned a margin-left of 20px earlier 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.
Animating the Navigation Menu
There are three properties that we want to animate for our navigation menu links. 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 top.
Third property that we animate is the border-radius which becomes 10px for the top left and top right corner. It becomes 0 for the bottom left and bottom right corner.
Here is the CSS that applies these changes whenever a user hovers over the menu items:
1 |
nav ul li:hover { |
2 |
top: 20px; |
3 |
padding: 0.5rem 1rem 1.5rem 1rem; |
4 |
border-radius: 10px 10px 0 0; |
5 |
}
|
All this animation happens within 0.2s because that's the duration we assigned to the transition property earlier.
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 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:
1 |
nav ul li::after { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
width: 100%; |
5 |
height: 20px; |
6 |
background: white; |
7 |
top: -30px; |
8 |
left: 0; |
9 |
border-radius: 0 0 10px 10px; |
10 |
}
|
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:
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 can be accomplished with just some CSS. Read these two posts to get inspired and learn more.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Joash Xu
Joash Xu | Sciencx (2014-01-20T00:57:31+00:00) Create a Cool Animated Navigation With CSS3. Retrieved from https://www.scien.cx/2014/01/20/create-a-cool-animated-navigation-with-css3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.