Question

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

看到演示

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

stable menu

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

css3 expansion

你能指点我一个教程，解释类似的效果吗？如果没有，那么如何实施它的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/

定位元素。
将CSS3转换添加到每个项目。
在悬停条件下添加CSS3转换。
添加CSS3过渡。

（我只在Chrome中对它进行了测试，这些转换可能很挑剔，只是一个抬头。）

Answer 3

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

到目前为止它适用于Webkit和Firefox，通过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偏移量。

希望这有助于实现这个想法

CSS3可扩展的菜单项

3 个答案: