使用纯CSS的slideUp/slideDown

我使用下面的代码来显示菜单并在菜单上徘徊时显示子菜单。当它显示为像jQuery中的slideUp和slideDown时，我想为子菜单添加一些动画。但我想为此使用纯CSS。我应该在代码中做什么修改来实现它？使用纯CSS的slideUp/slideDown

<div id="main_nav"> 
    <ul> 
     <li > 
      <a href="#" >Item 0</a> 
     </li> 
     <li> 
      <a href="#"> 
       Item 1 
      </a> 
      <ul class="sub-menu"> 
       <li><a href="#">Item 1 0</a></li> 
       <li><a href="#">Item 1 1</a></li> 
       <li><a href="#">Item 1 2</a> 
        <ul class="sub-menu"> 
         <li> 
          <a href="#">Item 1 2 0</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"> 
       <span>Item 3</span> 
      </a> 
      <ul class="sub-menu"> 
       <li><a href="#">Item 3 0</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 




#main_nav ul,#main_nav ul ul{ 
    margin:0; 
    list-style:none; 
    padding:0; 
} 
#main_nav ul ul{ 
    display:none; 
    position:absolute; 
    left:0; 
    top:100%; 
    background-color:#1b1b1b; 
    padding:0 10px 10px; 
} 
#main_nav ul li:hover>*{ 
    display:block; 
} 
#main_nav ul li{ 
    position:relative; 
    display:block; 
    white-space:nowrap; 
    font-size:0; 
    float:left; 
} 
#main_nav ul li:hover{ 
    z-index:1; 

} 
#main_nav ul ul ul{ 
    position:absolute; 
    left:100%; 
    top:0; 
} 
#main_nav ul{ 
    font-size:0; 
    z-index:999; 
    position:relative; 
    display:inline-block; 
    padding:0; 
    display:inline; 
} 
* html #main_nav ul li a{ 
    display:inline-block; 
} 
#main_nav ul>li{ 
    margin:0; 
} 
#main_nav ul a{ 
    display:block; 
    vertical-align:middle; 
    text-align:left; 
    text-decoration:none; 
    font-size:12px; 
    color:#000; 
    cursor:pointer; 
    padding:10px; 
    background-color:#FFFFFF; 
} 
#main_nav ul ul li{ 
    float:none; 
    margin:10px 0 0; 
} 
#main_nav ul ul a{ 
    text-align:left; 
    padding:4px; 
    background-color:#1b1b1b; 
    font-size: 12px ; 
    color:#FFF; 
} 
#main_nav ul li:hover>a{ 
    background-color:#000000; 
    color:#2b97dd; 
    opacity:90%; 
} 
#main_nav ul ul li:hover>a{ 
    background-color:#000000; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
    opacity:90%; 

}

小提琴：http://jsfiddle.net/Midhun28/ZstjT/

来源

2013-10-16 Midhun Mathew

纯粹的CSS方式是使用CSS转换。 –

你能举个例子吗？ –

http://jsfiddle.net/8252c/ –

一种可能的方式伪造它以纯CSS是通过动画的top属性：

li{ 
    z-index: 10; /* <- must appear above the animation */ 
} 

ul ul{ 
    visibility: hidden; 
    top: -100%; 
    z-index: -5; 
    opacity: 0; 
    transition: visibility 0s linear 0.4s, opacity .3s linear, top .3s ease-out;   
} 

li:hover > ul{ 
    visibility: visible; 
    opacity: 1;  
    top: 58px; 
    transition-delay: 0s; 
}

并隐藏菜单容器上的overflow，或把一些元素在菜单上方更高的z-index并用颜色填充。

Here's an example.我已经清理了一些你的CSS中，很大一部分是没有必要

来源

2013-10-16 12:54:52

我最近想看看有什么是jQuery的效果基本show的属性风格做，所以我试图采取截图（更容易看到比看代码：P）

这:) Console view of element style attributes changing

因此，有可能复制这种动画与CSS3。只需设置边距，填充和高度的动画，就可以获得与jQuery相同的效果。

来源

2015-03-16 09:37:50 miguelmpn

使用纯CSS的slideUp/slideDown

回答

相关问题