0

我想使用 www.arsenal.com 上的搜索框创建一个动画 div，但用于语言选择。关于如何处理这方面的 CSS，我可以得到一些帮助吗？基本上应该只有一个标志的图标，当点击它时，水平菜单会滑出，然后在不聚焦时折叠。

这是基本结构

<div class="flags">
    <ul>
        <li>flag 1 with image</li>
        <li>flag 2 with image</li>
        <li>flag 3 with image</li>
    </ul>
</div>

谢谢！

4

1 回答 1

0

在不使用 CSS3 过渡的情况下，您需要使用 Javascript 来实现这一点。我会推荐使用jQuery和animate()功能。简单到可以为width属性设置动画。

定位mousein和mouseout事件。

如果你想用 css3 做到这一点，它会是这样的：

HTML

<div class="flags">
    <a href="#menu">current flag image</a>
    <ul id="menu">
        <li>flag 1 with image</li>
        <li>flag 2 with image</li>
        <li>flag 3 with image</li>
    </ul>
</div>

CSS

#menu {
    opacity: 0;
    height: 0;
}
#menu:target {
    opacity: 1;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    height: auto;
}

请注意，这仅适用于:target伪类的 css-only。据我所知，您不能将鼠标悬停在某物上并将过渡应用到另一个元素。在这种情况下，您将需要 Javascript 来添加和删除类以应用 css 转换。

作为家庭作业，您可以修改上述内容以转换.flags创建“滑出”行为。

于 2013-06-24T19:53:32.253 回答