纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单

下面是详细讲解“纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单”的完整攻略。

简介

下拉菜单是网站中非常常见的一种菜单样式，三级下拉菜单相比于一二级下拉菜单，具有层次更加分明、展示内容更全面的特点。本文将详细讲解如何使用CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单。

初探

要实现三级下拉菜单，需要用到HTML和CSS两种语言来编写代码。首先，我们需要在HTML中设置三层列表，如下所示：

<ul class="nav">
  <li><a href="#">一级导航1</a></li>
  <li><a href="#">一级导航2</a>
    <ul>
      <li><a href="#">二级导航1</a>
        <ul>
          <li><a href="#">三级导航1</a></li>
          <li><a href="#">三级导航2</a></li>
          <li><a href="#">三级导航3</a></li>
        </ul>
      </li>
      <li><a href="#">二级导航2</a></li>
    </ul>
  </li>
  <li><a href="#">一级导航3</a></li>
  <li><a href="#">一级导航4</a></li>
</ul>

然后，我们需要使用CSS将三层列表的样式进行设置。首先，我们需要去掉默认的列表样式，并设置鼠标悬停时的背景颜色和显示下拉菜单的方式：

.nav {
  list-style: none;
}
.nav > li {
  position: relative;
  float: left;
  margin-right: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
}
.nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
.nav a:hover {
  background-color: #dcdcdc;
}
.nav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

设置完成后，我们需要使用CSS3动画效果来实现下拉菜单的飞行效果。我们使用@keyframes和animation来实现动画。首先，我们定义一个flyIn的动画效果，使下拉菜单从右上角飞入：

@keyframes flyIn {
  0% {
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(-15%) translateY(10%);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

然后，我们给下拉菜单设置这个动画效果：

.nav ul ul {
  top: 0;
  left: 100%;
  animation: flyIn 0.5s forwards;
}

这样就实现了三级下拉菜单的基本效果。但是，我们想要让菜单看起来更加飘逸洒脱，我们可以再加入一些特效，比如添加圆角、阴影等。具体代码如下：

/* 一级导航悬停效果 */
.nav > li:hover {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
}

/* 二级导航效果 */
.nav ul > li {
  position: relative;
}
.nav ul  > li:hover {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
}
.nav ul > li > ul {
  top: 0;
  left: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
  animation: flyIn 0.5s forwards;
}

/* 三级导航效果 */
.nav ul > li > ul > li:hover {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
}

示例

下面是两个示例，展示了三级下拉菜单的不同风格。第一个示例是一个简单的黑色菜单，第二个示例是一个蓝色菜单，带有阴影和圆角的特效。

示例1：黑色菜单

<ul class="nav black">
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a>
    <ul>
      <li><a href="#">Company</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
  <li><a href="#">Products</a>
    <ul>
      <li><a href="#">Cameras</a>
        <ul>
          <li><a href="#">DSLR</a></li>
          <li><a href="#">Mirrorless</a></li>
        </ul>
      </li>
      <li><a href="#">Lenses</a>
        <ul>
          <li><a href="#">Zoom lenses</a></li>
          <li><a href="#">Prime lenses</a></li>
        </ul>
      </li>
      <li><a href="#">Accessories</a>
        <ul>
          <li><a href="#">Bags and cases</a></li>
          <li><a href="#">Tripods</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.black {
  background-color: #222;
  color: #fff;
  box-shadow: 0 0 10px 0 #999;
}
.black li > a {
  color: #fff;
}
.black a:hover {
  background-color: #444;
}

示例2：蓝色菜单

<ul class="nav blue">
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a>
    <ul>
      <li><a href="#">Company</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
  <li><a href="#">Products</a>
    <ul>
      <li><a href="#">Cameras</a>
        <ul>
          <li><a href="#">DSLR</a></li>
          <li><a href="#">Mirrorless</a></li>
        </ul>
      </li>
      <li><a href="#">Lenses</a>
        <ul>
          <li><a href="#">Zoom lenses</a></li>
          <li><a href="#">Prime lenses</a></li>
        </ul>
      </li>
      <li><a href="#">Accessories</a>
        <ul>
          <li><a href="#">Bags and cases</a></li>
          <li><a href="#">Tripods</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.blue {
  background-color: #2980b9;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 #999;
}
.blue li > a {
  color: #fff;
}
.blue a:hover {
  background-color: #3498db;
}

总结

通过上面的讲解和示例，相信大家已经掌握了如何使用CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单了。值得注意的是，本文中的CSS代码只是实现该效果的一种方式，实际的实现方法还有很多，大家可以根据自己的需求和喜好来进行选择。