Question

我正在创建一个下拉菜单。非常简单适用于桌面。我需要使用相同的标记来响应。想象一下，当用户点击菜单图标时会出现菜单，然后只是所有列表项都堆叠在一起。

当用户将鼠标悬停在“菜单项1”上时，会出现“子菜单”。目前我只是让它出现并在悬停时消失。它看起来不太好看。我想知道是否有一种简单的方法可以使用CSS3过渡来很好地降低这种效果。

由于

CSS

.sub-menu{
 display:none;
}

li.sub-menu-parent:hover .sub-menu {
 display: block;
}

HTML

 <nav>
   <ul>
     <li class="sub-menu-parent"><a href="#">Menu Item 1</a>
       <ul class="sub-menu">
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
       </ul>
     </li></ul>
     <li><a href="#">Menu Item 2</a></li>
     <li><a href="#">Menu Item 3</a></li>
     <li><a href="#">Menu Item 4</a></li>
     <li><a href="#">Menu Item 5</a></li>
   </ul>
 </nav>

Answer 1

如果要进行平滑过渡，则需要使用隐藏不使用display: none的方法。浏览器无法从none转换为block，因此它是即时切换。

隐藏.sub-menu的一种方法是在悬停状态下使用visibility: hidden;然后visibility: visible;，但这会使转换变得更加困难。如果你只是transition: all 0.5 ease，那么菜单会顺利淡入，但只要它丢失了，就会很快消失：悬停。

有一个full article贯穿执行此操作，但要点是在可见性中添加transition-delay，然后在悬停状态下删除transition-delay。

.sub-menu-parent { position: relative; }

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -10%;
  transition: all 0.5s ease 0s, visibility 0s linear 0.5s; /* the last value is the transition-delay for visibility */
}

.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  left: 0;
  transition-delay: 0s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

DEMO： http://codepen.io/shshaw/pen/gsFch

Answer 2

这对于很好的导航非常有用，尤其是在悬停等时出现的子级导航

http://www.justinaguilar.com/animations/

CSS仅下拉菜单 - CSS3过渡

2 个答案: