jquery - 使用 CSS3 的可扩展菜单项

Question

我在时尚的网站上看到了一种新风格的实现菜单：可扩展的菜单项。您可以在g4interactive.com上查看演示

一个稳定的菜单看起来像一个垂直的图像列表：

当您将鼠标悬停在其中任何一个上时，菜单项会通过 CSS3 技巧扩展为：

你能指点我一个教程，解释类似的效果吗？如果没有，一个 2-3 句关于如何实施它的“路线图”就足够了。提前致谢。

Answer 1

I managed to mock something up on jsfiddle very quickly that should get you started. With CSS transitions, you can certainly animate the elements to show and hide well. This is the CSS I used:

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;
}

And the HTML for the navigation was:

<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>​

To take it further and get the angles you require, you would need to take a look at CSS's transform property that allows you to rotate elements too.

Hope that's enough to get you started!

Answer 2

为此，请使用 CSS3 转换 [和转换，如果您愿意的话]。

这样的事情有帮助吗？http://jsfiddle.net/hvQhM/1/

1. 定位元素。
2. 为每个项目添加 CSS3 转换。
3. 在悬停条件下添加 CSS3 变换。
4. 添加 CSS3 过渡。

（我只在 Chrome 中测试过，这些转换可能很挑剔，只是提醒一下。）

Answer 3

试试这个小提琴：http: //jsfiddle.net/fcalderan/pmETG/

到目前为止，它可以通过 CSS3 在 Webkit 和 Firefox 上运行，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即可。

希望这有助于理解