使用CSS3扩展菜单项
使用CSS3扩展菜单项
提问于 2012-04-05 20:05:33
我在时髦的网站上看到了一种新的实现菜单风格:可扩展的菜单项。你可以在g4interactive.com上看到一个演示
一个稳定的菜单看起来像一个垂直的图像列表：
当您将鼠标悬停在其中任何一个上时，菜单项将通过CSS3技巧扩展为：
你能给我指个教程，里面解释了类似的效果吗？如果没有，一个2-3句话的如何实现它的“路线图”就足够了。提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-05 20:42:03
我设法很快地在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的transform属性，该属性也允许您旋转元素。
希望这足以让你入门！
Stack Overflow用户
发布于 2012-04-05 20:52:17
如果您愿意，可以使用CSS3变换和过渡。
这样的东西有帮助吗？http://jsfiddle.net/hvQhM/1/
- 定位元素。
- 向每个项目添加CSS3转换。
- 在悬停条件下添加CSS3转换。
- 添加CSS3转换。
(我只在Chrome上测试过它，这些转换可能会很挑剔，只是提醒一下。)
Stack Overflow用户
发布于 2012-04-05 20:54:03
试试这个小提琴：http://jsfiddle.net/fcalderan/pmETG/
到目前为止，它可以通过CSS3、transitions和transforms在Webkit和Firefox上运行(我只使用了-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偏移。
希望这篇文章能帮助你理解这个想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10028252
复制相关文章
相似问题
腾讯云开发者
