0

スタイリッシュなWebサイトの周りに見られる新しいスタイルの実装メニューがあります。それは拡張可能なメニュー項目です。g4interactive.comでデモを見ることができます

安定したメニューは、画像の垂直リストのように見えます。

安定したメニュー

それらのいずれかにマウスを合わせると、メニュー項目はCSS3のトリックを介して次のように拡張されます。

css3拡張

同様の効果が説明されているチュートリアルを教えていただけますか？そうでない場合は、それを実装する方法の2〜3文の「ロードマップ」で十分です。前もって感謝します。

4

3 に答える 3

4

私はあなたが始めるはずの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の変換プロパティを確認する必要があります。

それがあなたが始めるのに十分であることを願っています！

于 2012-04-05T12:42:03.260 に答える
1

これには、CSS3トランスフォーム[および必要に応じてトランジション]を使用します。

このようなものは役に立ちますか？http://jsfiddle.net/hvQhM/1/

  1. 要素を配置します。
  2. 各アイテムにCSS3トランスフォームを追加します。
  3. ホバー条件でCSS3変換を追加します。
  4. CSS3トランジションを追加します。

（私はChromeでのみテストしましたが、これらの変換は厄介なものになる可能性があります。

于 2012-04-05T12:52:17.407 に答える
1

このフィドルを試してください：http：//jsfiddle.net/fcalderan/pmETG/

これまでのところ、CSS3transitionsを介してWebkitとFirefoxで動作し、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オフセットしたいように調整して調整するだけです。

これがアイデアを得るのに役立つことを願っています

于 2012-04-05T12:54:02.920 に答える