扩大语言选择

水平DIV我想创建一个动画的div与在www.arsenal.com搜索框这样做，但对语言选择。我可以得到一些关于如何处理这个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>

谢谢！

来源

2013-06-24 Joe

而不使用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; 
}

请注意，这是唯一可能只CSS与:target伪类。据我所知，你不能将目标悬停在某个物体上，并且应用到另一个元素的过渡。在这种情况下，您将需要使用Javascript添加和删除类以应用css转换。

功课，你可以修改上面的改造.flags创建“滑出”的行为。

来源

2013-06-24 19:53:32

我明白了。一般建议使用jQuery over CSS来制作动画吗？对不起，我对此很新！ – Joe

CSS动画是大多数网页浏览器的一项新功能。他们中的大多数将在Firefox，Chrome和IE10中工作，但任何旧版本的用户都不会看到该动画。几乎所有的浏览器都支持jQuery动画。 –

扩大语言选择

回答

相关问题