擴大語言選擇

水平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動畫。 –

擴大語言選擇

回答

相關問題