7款风格新颖的jQuery/CSS3菜单导航分享

《7款风格新颖的jQuery/CSS3菜单导航分享》是一篇文章，里面介绍了7种不同风格的菜单导航，这些导航都是由jQuery和CSS3实现的。下面是对这篇文章的详细讲解：

概述

本文介绍的7款菜单导航，均是由jQuery和CSS3技术实现的。在本文中，我们将详细介绍每一种菜单导航的实现原理，并且提供完整的代码示例和演示链接。

菜单导航一：FadeIn-MicroMenu

这款菜单导航由两个部分构成：一个微型菜单和一个蒙层。当用户点击微型菜单时，蒙层会出现并且逐渐变亮，同时显示出完整的菜单。当用户离开菜单时，蒙层会逐渐变暗并且消失。

演示链接：https://codepen.io/uno/pen/czrLI

代码示例：

HTML:
<div class="overlay"></div>
<nav>
   <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
   <a href="#" class="close-button">×</a>
</nav>

CSS:
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
   z-index: 100;
   opacity: 0;
}
.overlay.active {
   opacity: 1;
}
.menu {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
   z-index: 101;
   opacity: 0;
   transition: opacity 0.5s ease-in;
}
.menu.active {
   opacity: 1;
}
.menu li {
   margin-bottom: 20px;
}
.menu li a {
   display: inline-block;
   padding: 10px 20px;
   text-decoration: none;
   color: #fff;
   font-size: 24px;
   font-family: 'Raleway', sans-serif;
   position: relative;
   transition: all 0.25s ease-in-out;
}
.menu li a:hover::before {
   position: absolute;
   content: "";
   top: 50%;
   left: -20px;
   width: 10px;
   height: 10px;
   background-color: #fff;
   border-radius: 50%;
   transform: translate(0,-50%);
}

.close-button {
   position: absolute;
   top: 20px;
   right: 20px;
   color: #fff;
   font-size: 36px;
   font-weight: 300;
   text-decoration: none;
   transition: all 0.25s ease-in-out;
}
.close-button:hover {
   color: #f00;
   transform: rotate(180deg);
}

菜单导航二：Fullscreen Popup Menu

这款菜单导航由一个全屏的蒙层和一个出现在中央的菜单组成。当用户点击菜单按钮时，蒙层出现并且逐渐变亮，同时菜单呈现在用户前方。当用户点击菜单中的某个链接或是蒙层时，蒙层会逐渐变暗并且消失。

演示链接：https://codepen.io/virgilpana/pen/ZYbOag

代码示例：

HTML:
<div class="menu-button-container"><a href="#" class="menu-button">Menu</a></div>
<nav class="menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
   <a href="#" class="close-button">×</a>
</nav>
<div class="overlay"></div>

CSS:
.menu {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-family: 'Open Sans', sans-serif;
   font-size: 280%;
   color: #fff;
   list-style: none;
   padding: 0;
   margin: 0;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   z-index: 500;
}
.menu.active {
   opacity: 1;
   visibility: visible;
}
.menu li {
   text-align: center;
   margin-bottom: 20px;
   cursor: pointer;
}
.menu li a {
   color: #fff;
   text-decoration: none;
   cursor: pointer;
}
.menu li a:hover {
   color: #f00;
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0,0,0,0.8);
   z-index: 400;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}
.overlay.active {
   opacity: 1;
   visibility: visible;
}

.close-button {
   position: absolute;
   top: 20px;
   right: 20px;
   color: #fff;
   font-size: 36px;
   font-weight: 300;
   text-decoration: none;
   transition: all 0.25s ease-in-out;
}
.close-button:hover {
   color: #f00;
   transform: rotate(180deg);
}

.menu-button-container {
   position: fixed;
   top: 20px;
   left: 20px;
   z-index: 700;
}
.menu-button {
   font-size: 20px;
   padding: 8px 16px;
   background-color: rgba(255,255,255,0.9);
   color: #333;
   text-decoration: none;
   border-radius: 50%;
   transition: all 0.3s ease;
}
.menu-button:hover {
   background-color: #f00;
   color: #fff;
}

以上是针对两种菜单导航的详细讲解，其他5种菜单导航的详细描述和代码实现可以参考原文：https://www.hongkiat.com/blog/css3-jquery-navigation-menu/