Question

我想用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>

谢谢！

Answer 1

如果不使用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。据我所知，你不能将鼠标悬停在某个东西上并将过渡应用到另一个元素。在这种情况下，您将需要Javascript来添加和删除类以应用css转换。

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

扩展水平DIV以进行语言选择

1 个答案: