2

我尝试制作一个菜单，其中包含 3 个菜单项和 1 个子项。如果我单击第二个项目，则应显示第一个子项目。但通常不会显示它。它应该为它设置动画并滑动它。我认为有办法，transition但我真的不知道 CSS3。我想要一个纯 CSS 解决方案。

这是我的 HTML 代码：

<div id="menu">
    <ul>
        <li><a href="#">First</a></li>
        <li class="active"><a href="#">Second</a>
            <ul class="child">
                <li><a href="#">First child</a></li>
            </ul>
        </li>
        <li><a href="#">Third</a></li>
    </ul>
</div>

我创造了这个小提琴。First child现在，如果单击菜单项，我想慢慢显示菜单Second项。

我之前唯一做的就是检查transition，但我就是不明白。

有人可以给我一个提示吗？

干杯

4

3 回答 3

2

查看您的 jsfiddle 更新http://jsfiddle.net/3kEg4/3/ 

#menu {
    height: auto;
    width: auto;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#menu ul li {
    float: left;
    position: relative;
}
#menu ul li a {
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 100px;
    height: 30px;
    border: thin solid #999;
    color: #FFF;
    background-color: #0CF;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#menu ul li a:hover {
    background-color: #0C3;
}
#menu ul li ul {
    position: absolute;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
    height: 0px;
    overflow:hidden;
}
#menu ul li:hover ul {
    height: 100px;
    -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}

（灵感来自http://jsfiddle.net/ashukasama/2BqGY/）

于 2013-10-17T21:49:07.923 回答
1

您可以使用一些 CSS3 动画来实现此效果。

#menu ul li ul{
  opacity:0;
  -webkit-transition: .6s ease;
  -moz-transition: .6s ease;
  -ms-transition: .6s ease;
  -o-transition: .6s ease;
  height: 0;
}

#menu ul li:hover ul {
  opacity: 1;
  height: 100px;
}

JSFIDDLE

无线电活跃状态

JSFIDDLE 电台

堆栈溢出问

jQuery

$('.subMenu').on('click', function() {
  $('.subMenu ul').slideToggle(1000);
});

JSFIDDLE jQuery

于 2013-10-17T21:34:25.790 回答
0

我认为这更好

#menu ul li ul{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
} 

#menu ul li:hover ul {
  visibility: visible;
  opacity: 1;
  position: relative;
}

效果也很好。请务必添加前缀。希望这可以帮助某人。

于 2016-09-02T08:34:59.150 回答