Create a cool animated navigation using CSS3

In the old days of web development, developers relied on Adobe’s Flash whenever they needed to create any kind of animation for their website. Over time, people abandoned Flash and started doing many of these things with the help of CSS and JavaScript. Finally, with CSS3 and the broad browser support it now enjoys, we can do some pretty amazing things using just some CSS3 and nothing else.

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

Excited about implementing menus? let's start.

Decision mark

HTML5 introduces many new tags and features. This means we no longer need to use div elements to wrap everything we want to style. Our markup can now be more sensible and semantic.

Let’s start with the title section of the website. We wrap it inside a header element as shown below.

<header>
  <div class="top-wrapper">
  </div>
  
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">services</a></li>
      <li><a href="#">solutions</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

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

Now, we will write some markup for the main content of the web page. 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>

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

Set title style

As I mentioned before, our page's header will contain a space-filler div element at the top. Since this will be a blank space in our example, we will give it a height of 150px. Below 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 placed partially over the navigation link. That's why we applied the z-index of 999. However, this property does not work for statically positioned elements, so we need to change position to relative. The box-shadow property gives us a subtle 3D effect with the filler div actually sitting above our navigation menu.

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

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

Set the style of the navigation menu

Links in the navigation menu need to be placed side by side horizontally, with even spacing between them. There are multiple ways to achieve this, but we're going to use Flexbox because it's the simplest and most efficient for this particular case.

Here is the CSS we will apply to unordered lists, 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 of an unordered list to flex will place all list elements side by side and set the value of the gap attribute to 0.1 rem will introduce extra spacing between them.

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

Why do we want to offset the top position of the list element? This is because we will animate them to a lower position on hover. transition properties help us make the animation smooth instead of abrupt.

By default, links within list elements will have a light blue color and are underlined. We get rid of them by setting color to white and text-decoration to none.

Finally, we will use the following CSS to make the menu more colorful:

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 don't have to assign a separate class to each navigation menu link. We can style them individually just by using the nth-child selector. This is what we have so far:

设置文章内容的样式

我们的导航菜单现在看起来正是我们想要的。然而，主要文章内容几乎看不见。现在我们来解决这个问题。为了提高内容的可见性和外观，我们需要做的就是应用以下 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;
}

将相同的 width 和 margin 应用于我们的文章，导航将它们正确对齐。还记得我们之前为无序列表分配了 20px 的 margin-left 吗？这将使我们的导航菜单稍微位于文章左边缘的右侧。

此处的 z-index 属性也适用于在悬停动画时将内容保留在菜单链接上方。

动画导航菜单

我们想要为导航菜单链接设置三个属性的动画。第一个是我们将菜单项垂直移动到较低位置的位置。

我们还更新了填充属性，使顶部填充减少到 0.5rem，而底部填充增加到 1.5rem。顶部和底部填充值基本上颠倒了，因为导航菜单链接现在将在底部而不是顶部被切断。

我们设置动画的第三个属性是 border-radius，左上角和右上角变为 10px。左下角和右下角变为 0。

以下是每当用户将鼠标悬停在菜单项上时应用这些更改的 CSS：

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

所有这些动画都在0.2s内发生，因为这是我们之前分配给 transition 属性的持续时间。

为伪元素设置动画

现在我们唯一要做的就是导航链接顶部的白框的创建和动画。我们借助伪元素来实现这一点。我们使用 ::after 伪类来创建伪元素。这个伪元素成为我们原始选择器的最后一个子元素。

这是我们用来创建伪元素的 CSS：

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

为 content 属性提供一个值很重要，即使该值是空字符串。我们将 position 设置为 absolute 以将该元素从正常文档流中取出并按照我们想要的方式定位。 100% 的宽度可确保所有伪元素与其各自导航链接的 width 相匹配。

最终结果如下所示：

最终想法

在本教程中，我们仅使用一些 CSS3 属性创建了一个很酷的动画导航菜单，而无需编写任何 JavaScript 代码。您可以通过多种有趣的方式使用 CSS3 为网页上的内容添加动画效果。虽然一些非常复杂的场景可能需要使用 JavaScript 来实现动画，但您会惊讶地发现仅使用一些 CSS 就能完成这样的事情。阅读这两篇文章以获得灵感并了解更多信息。

The above is the detailed content of Create a cool animated navigation using CSS3. For more information, please follow other related articles on the PHP Chinese website!