CSS仅下拉菜单 - CSS3过渡

时间:2013-11-20 14:22:36

标签: html css3 drop-down-menu responsive-design css-transitions

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

当用户将鼠标悬停在“菜单项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>

2 个答案:

答案 0 :(得分:6)

如果要进行平滑过渡,则需要使用隐藏不使用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

答案 1 :(得分:1)

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

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