使用CSS为子菜单添加淡入效果

时间：2016-01-12 14:01:15

标签： css css3 css-transitions css-animations animate.css

我有一个简单的问题。我正在尝试向this page中的子菜单添加淡入效果，但我并不能很好地理解ul li ul选择器概念，因此它不是正确的。

看起来真的很难，但我做错了，我无法弄明白!!

如何添加此CSS过渡效果？我已经尝试过使用animate.css库，但是库的使用并不是强制性的，我也可以使用一个也没有使用它的解决方案。

.classname li:hover > ul{
  display:block;
  -moz-animation: fadeInUp .3s ease-in  ;
  -webkit-animation: fadeInUp .3s ease-in ;
  animation:fadeInUp .3s ease-in ;
}

.classname ul li:hover > ul{
  display:block;
  -moz-animation: fadeInRight .3s ease-in ;
  -webkit-animation: fadeInRight .3s ease-in ;
  animation:fadeInRight .3s ease-in ;
}

演示：以下是我目前正在尝试编码的代码段。

＆＃13;
＆＃13; 
/* MENU NAVIGATION */

#nav span {
  display: none;
}
#nav,
#nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  font-family: 'Josefin Sans', sans-serif;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  width: 98%;
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  display: none;
  left: 0;
  padding: 2%;
  position: absolute;
  top: 54px;
  width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  -moz-transition: all 300ms ease-in-out 0s;
  -ms-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
#nav li a {
  display: block;
  text-decoration: none;
  -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  color: #333333;
  display: block;
  line-height: 49px;
  padding: 0 15px;
  text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
  background-color: #F55856;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}
/* submenu */

#nav li:hover ul.subs {
  display: block;
}
#nav ul.subs > li {
  display: inline-block;
  float: none;
  padding: 10px 1%;
  vertical-align: top;
  width: 33%;
}
#nav ul.subs > li a {
  color: #777777;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 1.3em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  -moz-transition: padding 150ms ease-out 0s;
  -ms-transition: padding 150ms ease-out 0s;
  -o-transition: padding 150ms ease-out 0s;
  -webkit-transition: padding 150ms ease-out 0s;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}
＆＃13; 
<div class="container">
  <ul id="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#s1">Prodotti</a>
      <span id="s1"></span>
      <ul class="subs">
        <li><a href="#">Header a</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Header b</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Area Privata</a>
    </li>
    <li><a href="#">Contatti</a>
    </li>

  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

无需动画或单独的库来实现您所需的效果。这些可以通过使用转换和一些CSS转换来实现。

演示：（以下提供说明）。

/* MENU NAVIGATION */

#nav span {
  display: none;
}
#nav,
#nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  font-family: 'Josefin Sans', sans-serif;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  width: 98%;
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  left: 0;
  padding: 2%;
  position: absolute;
  top: 54px;
  width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  transition: all 300ms ease-in-out 0s;
}
#nav li a {
  display: block;
  text-decoration: none;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  color: #333333;
  display: block;
  line-height: 49px;
  padding: 0 15px;
  text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
  background-color: #F55856;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}
/* submenu */

#nav ul.subs > li {
  display: inline-block;
  float: none;
  padding: 10px 1%;
  vertical-align: top;
  width: 33%;
}
#nav ul.subs > li a {
  color: #777777;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 1.3em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}
#nav > li > ul {
  opacity: 0;
  transform: translateY(25%);
  transition: all 150ms ease;
  pointer-events: none;
}
#nav > li:hover > ul {
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
}
#nav > li > ul > li > ul {
  opacity: 0;
  transform: translateX(50%);
  transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul {
  opacity: 1;
  transform: translateX(0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <ul id="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#s1">Prodotti</a>
      <span id="s1"></span>
      <ul class="subs">
        <li><a href="#">Header a</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Header b</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Area Privata</a>
    </li>
    <li><a href="#">Contatti</a>
    </li>

  </ul>
</div>

代码说明：

为了产生与你链接的页面类似的效果（也就是说，第一级子菜单在悬停时进行淡入+上移，第二级子菜单进行淡入+移动留下悬停），需要做以下事情：

  • 目前，当您将鼠标悬停在PRODOTTI上时，您正在切换包含第一级子菜单的display的{​​{1}}属性。但是将值更改为ul属性是不可转换的，因此子菜单将立即出现。只需删除导致此问题的行。
display
  • 之后设置包含子菜单的#nav ul.subs { background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; /*display: none; comment out or remove this line */ left: 0; padding: 2%; position: absolute; top: 54px; width: 96%; } /* remove these */ #nav li:hover ul.subs { display: block; } 的初始状态为ul，并为其添加opacity: 1。这会将子菜单的容器向下推动其高度的25％。 
transform: translateY(25%)
  • 当PRODOTTI链接悬停时，将子菜单的#nav > li > ul{ opacity: 0; transform: translateY(25%); transition: all 150ms ease; pointer-events: none; } 更改为1并通过设置`transform：translateY（0％）将其转换回原始位置。这使得看起来好像子菜单正在淡入并且同时向上移动。
opacity
  • 对于第二级子菜单，会执行相同的步骤，但不是使用#nav > li:hover > ul{ opacity: 1; transform: translateY(0%); pointer-events: auto; } ，而是使用translateY，因为它必须向右移动而不是向下移动。
translateX
相关问题
最新问题