CSS3で拡張可能なメニュー項目

Question

スタイリッシュなWebサイトの周りには、拡張可能なメニュー項目である新しい実装スタイルのメニューがあります。あなたは安定したメニューは、画像の垂直方向のリストのように見えるg4interactive.com

でデモを見ることができます：

：それらのいずれかの上にあなたのマウスは、メニュー項目がにCSS3のトリックを経由して拡張され

あなたは、同様の効果が説明されているチュートリアルに私を指すことができますか？もしそうでなければ、それを実施する方法の2〜3文 "ロードマップ"で十分であろう。前もって感謝します。

Answer 1

私は非常に迅速にjsfiddleに何かを模擬することができました。 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は：：これは私が使用したCSSで

<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のとFirefox経由で動作しますCSS3 transitionsとtransforms（私は-webkit-と-moz-プレフィックスを使用）ので、できるだけ多くのプレフィックスを追加するには

Htmlの

を必要とします私はあなたの代わりにアイコン画像を配置する単純な数字を配置しているもちろん

の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オフセットを調整して調整するだけです。

希望これは単なる-webkit-変換を試みることが対角線にするためにアイデア