我正在创建一个下拉菜单。非常简单适用于桌面。我需要使用相同的标记来响应。想象一下,当用户点击菜单图标时会出现菜单,然后只是所有列表项都堆叠在一起。
当用户将鼠标悬停在“菜单项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>
答案 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 */
}
答案 1 :(得分:1)
这对于很好的导航非常有用,尤其是在悬停等时出现的子级导航