使用CSS3擴展菜單項

Question

我在時尚網站上看到了一種新式的實現菜單：可擴展的菜單項。你可以看到在g4interactive.com

演示一個穩定的菜單看起來就像圖像的垂直列表：

當您將鼠標放在其中任何一個，菜單項是通過CSS3技巧擴展至：

你能指點我一個教程，其中類似的效果被解釋了嗎？如果沒有，如何實施它的2-3句「路線圖」就足夠了。提前致謝。

Answer 1

我設法很快地在jsfiddle上嘲弄一些東西，以便讓你開始。通過CSS轉換，您當然可以將元素動畫化以顯示和隱藏。這是我使用的CSS：

a span { 
    display: inline-block; 
    overflow: hidden; 
    width: 0; 
    white-space: nowrap; 
    transition: width 1s ease-in; 
    -webkit-transition: width 1s ease-in; 
} 
a img { 
    height: 16px; 
    width: 16px; 
} 
a:hover span { 
    width: 75px; 
} 

而且對於導航的HTML是：

<ul> 
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" /><span>Link 1 text</span></a></li> 
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" /><span>Link 2 text</span></a></li> 
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" /><span>Link 3 text</span></a></li> 
</ul>​ 

採取進一步並獲得您所需要的角度，你需要看看CSS的變換屬性，允許您旋轉元素。

希望這足以讓你開始！

Answer 2

使用CSS3轉換[和轉換，如果你喜歡]爲此。

這樣做有幫助嗎？ http://jsfiddle.net/hvQhM/1/

1. 定位元素。
2. 將CSS3轉換爲每個項目。
3. 在懸停條件下添加CSS3轉換。
4. 添加CSS3轉換。

（我只在Chrome測試了它和那些變換可以挑剔的，只是擡起頭）

Answer 3

試試這個小提琴：http://jsfiddle.net/fcalderan/pmETG/

到目前爲止，它通過作用於WebKit和火狐CSS3 transitions和transforms（我只用-webkit-和-moz-前綴），以便添加儘可能多的前綴，你需要

的Html

<ul> 
    <li>1 <a href="#">item 1</a></li> 
    <li>2 <a href="#">item 2</a></li> 
    <li>3 <a href="#">item 3</a></li> 
    <li>4 <a href="#">item 4</a></li> 
    <li>5 <a href="#">item 5</a></li> 
    <li>6 <a href="#">item 6</a></li> 
    <li>7 <a href="#">item 7</a></li> 
</ul> 

的CSS

ul { 
    margin  : 80px 0 0 0; 
    padding  : 0; 
    white-space : nowrap; 
} 

li a { 
    padding-left: 10px; 
} 

li { 
    display  : block; 
    padding  : 2px 10px 2px 40px; 
    margin  : 0 0 15px 0; 
    background : #666; 
    width  : 0; 
    overflow : hidden; 
    cursor  : pointer; 

    -webkit-transform  : rotate(-45deg) translateX(-22px); 
    -webkit-transform-origin : 0 0; 
    -webkit-transition  : all 0.33s linear 0s; 

    -moz-transform   : rotate(-45deg) translateX(-22px); 
    -moz-transform-origin : 0 0; 
    -moz-transition   : all 0.33s linear 0s; 
} 


li:hover { 
    background : #fff; 
    width  : 180px; 
} 

當然

，我已經把簡單的數字，你會放置圖標圖像代替。只需調整和調整您想要的translateX偏移量即可。

希望這有助於獲得的想法