Css 扩展用于语言选择的水平DIV

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

带图像的标志1
带图像的标志2
带图像的标志3

---

谢谢大家!

如果不使用CSS3转换，您将希望使用Javascript来实现这一点。我建议使用

jQuery

和

animate（）

函数。足够简单，可以设置

宽度

属性的动画

以

mousein

和

mouseout

事件为目标

如果您想使用css3，它应该是：

HTML

请注意，这仅适用于带有

：target

伪类的css。据我所知，不能将鼠标悬停在某个对象上，然后将转换应用到另一个元素。在这种情况下，需要使用Javascript添加和删除类来应用css转换

---

作为家庭作业，您可以修改上述内容以转换

.flags

创建“滑出”行为。

我明白了。对于动画，通常建议使用jQuery而不是CSS吗？对不起，我对这个还不太熟悉！CSS动画是大多数web浏览器的新功能。它们中的大多数都可以在Firefox、Chrome和IE10中使用，但任何使用旧版本的人都不会看到这种动画。jQuery动画几乎可以在任何启用javascript的浏览器上运行。

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

#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;
}