4

我有一个我正在建立供个人使用的网站。这个网站有一个由 CSS3 动画制作的下拉菜单。我非常喜欢结果的外观和感觉，直到我意识到无序列表中的列表项相对于下拉列表的高度不可见/不可见。我寻求的信息是解决此问题的方法。这很烦人，尤其是考虑到我已经投入了一些看起来如此简单的事情......

相关的HTML：

<ul class="dMaster">
    <li class="dChild"><a href="index.php" class="bItem" id="homeItem">Home</a></li>
    <li class="dChild" style="cursor: default;">About
        <ul class="dMaster2">
            <li class="dChild2"><a href="about.php" class="bItem" id="gAboutItem">General</a></li>
            <li class="dChild2"><a class="bItem" id="twItem" target="_blank">Twitter</a></li>
            <li class="dChild2"><a class="bItem" id="ytItem" target="_blank">YouTube</a></li>
        </ul>
    </li>
</ul>

相关的CSS：

@keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
} @-webkit-keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
}
.dMaster {
    margin: 0;
    padding: 0;
    text-align: center;
} .dChild {
    margin: 0;
    padding: 0;
    height: 19px;
    width: 60px;
    float: left;
    list-style: none;
} .dChild:hover {
    color: #000;
    background: #C60;
    border: 1px solid #FFF;
    border-top: none;
    text-shadow: 1px 1px 5px #FFF;
} .dMaster2 {
    padding: 0;
    position: absolute;
    min-width: 60px;
    text-align: center;
    background: #C60;
    border: 1px solid #FFF;
    margin: -2px 0  0 -1px;
    visibility: hidden;
} .dChild2 {
    opacity: 0.5;
    padding: 2px 5px;
    list-style: none;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
} .dChild2:hover {
    opacity: 1.0;
} ul li:hover ul {
    color: #FFF;
    visibility: visible;
    animation: dropdown 0.2s ease-out;
    -webkit-animation: dropdown 0.2s ease-out;
}

我已经尝试了一两个小时，使用了许多不同的技术，但无济于事。如果需要，这里有一个 JSFiddle 。非常感谢任何帮助！

旁注：下拉菜单位于关于。起初可能不明显，但当 UL 向下延伸时，列表项非常明显。

4

2 回答 2

3

只需在代码中添加一行，就可以了：

.dMaster2 {
    /*...*/
    overflow:hidden;
}

旁注：

为了可用性起见，您应该将动画减少到最大值。1秒。用户不想等待 2 秒来展开下拉菜单。

此外，您不需要关键帧来执行此操作，只需为 ul 元素的 height 属性设置动画即可。

.dMaster2 {
    /*...*/
    visibility:hidden; /* <- remove this line! */
    overflow:hidden;
    transition:height .3s; /*add height transition, use ~ .5s */
    /* if you add the transition to the root element both, mousein and mouseout
       will be animated, which is not the case if you put it on the :hover */
    height:0;              /*add height property */
}
ul li:hover ul {
    color: #FFF;
    visibility: visible;
    height:102px;        /*add height property */
    /* if you put the transition here, only the mousein will be animated */
}

你修改过的小提琴

于 2013-06-05T11:53:18.990 回答
2

这可能是你要找的吗？

transition-delay基本上它对每一行使用不同的。

我努力使这把小提琴的一切都更清楚，而我在最后一个小提琴中没有。你真的应该检查第二个是否有一个好的点。

目标是实现一次显示一个。两种解决方案：

  1. 每行一个唯一的 id
  2. 使用第 n 个孩子来获取每一行。

假设我们有 3 个项目要在 3 秒内显示。这是我们的时间线：

t      Action
_____________
0 | The rectangle begins to display.
  |
1 | Rectangle at 1/3 of its height. We display our item n° 1.
  |
2 | Rectangle at 2/3 of its height. We display our item n° 2.
  |
3 | Rectangle at 3/3 of its height. We display our item n° 3.
  v

让我们回顾一下代码：

HTML

<a>Hover me</a>

<ul>
    <li>Hey</li>
    <li>Hi</li>
    <li>Ho</li>
</ul>

我们的目标很简单：

我们希望，如果我们将鼠标拖到<a>标签上，它会逐渐显示<ul>不同的<li>元素。<a>此外，我们希望鼠标在菜单上时它保持不变，但如果鼠标离开or则立即消失<ul>。

CSS

基本

ul { /* Hidden and width no height */
    visibility: hidden;
    background-color: white;
    height: 0px;
    border: 1px solid black;
}

a:hover ~ ul { /* When the mouse goes over the <a> it becomes visible and begins the transition */
    visibility: visible;
    background-color: orange;
    height: 60px;
    transition: height 3s;
}

现在我们进入“棘手的部分”：

a:hover ~ ul li { /* Default behaviour for appearing */
    opacity: 1;
    transition: opacity 0.2s;
}

/* And now for each child, its custom delay :*/

a:hover ~ ul li:nth-child(1) {
    transition-delay: 1s;
}

a:hover ~ ul li:nth-child(2) {
    transition-delay: 2s;
}

a:hover ~ ul li:nth-child(3) {
    transition-delay: 3s;
}

和TADAAAAM！十分简单 ！

在另一边，为了避免它们逐渐消失：

/* To make the depop instantly */

a ~ ul li {
    opacity: 0;
    transition-delay: 0s;
}

a ~ ul li:nth-child(1) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(2) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(3) {
    transition-delay: 0s;
}

给你。当然，它不是很有活力，如果你需要为每个孩子都这样做，很快就会很无聊。但是您可以使用脚本来生成该代码。:)

希望它有所帮助。

于 2013-06-05T10:15:53.177 回答