1

I am using the following code to display menu and display submenu when hovered on the menus. I want to add some animation for the submenu when it is displayed like what slideUp and slideDown in jQuery. But I want to use pure CSS for this. What alterations should I make in the code do achieve it?

<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%;

}

Fiddle: http://jsfiddle.net/Midhun28/ZstjT/

4

2 回答 2

2

在纯 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

这是一个例子。我已经清理了你的一些 CSS，其中大部分是不需要的

于 2013-10-16T12:54:52.920 回答
0

我最近想看看 jQuery SlideUp 在属性样式中做了什么，所以我尝试截屏（比查看代码更容易看到：P）

这里是 ：） 元素样式属性更改的控制台视图

因此，可以使用 CSS3 复制此动画。只需对边距、内边距和高度进行动画处理，即可获得与 jQuery 相同的效果。

于 2015-03-16T09:37:50.837 回答