我正在尝试在 CSS 中制作一个菜单，其中只有图标作为按钮可见，但是当您将鼠标悬停在它们上方时，必须显示图标旁边的文本。问题是我想用类似 SlideDown() 的效果来动画显示文本的效果，然后才到右侧。
HTML（其中包括图标的 fontawesome）：
<body>
<nav>
<ul>
<li><a href="#"><i class="fa fa-home"></i><span>Home</span></a>
</li>
<li><a href="#"><i class="fa fa-users"></i><span>Team</span></a>
</li>
<li><a href="#"><i class="fa fa-comments"></i><span>Management</span></a>
</li>
<li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
</li>
<li><a href="#"><i class="fa fa-envelope"></i><span>Mail Jobs</span></a>
</li>
</ul>
</nav>
</body>
The CSS:
nav {
position:fixed;
top:20px;
background:#701313;
border-radius:0 30px 30px 0;
font-family:'Open Sans', sans-serif;
}
nav ul {
margin:0px;
padding:0px 20px;
width:56px;
}
nav ul li {
font-size:23px;
display:block;
width:3000px;
margin:40px 0;
}
nav ul li a {
background:#2e2e2e;
border-radius: 30px;
padding:15px 17px;
color:#FFF;
text-decoration: none;
}
nav ul li a:hover span {
display:inline;
}
nav ul li i {
font-size:28px !important;
}
nav ul li span {
display:none;
padding:0 20px;
}
我还包括了一个JSFiddle http://jsfiddle.net/8kLkguzq/1/.
理想的解决方案是纯 CSS，但我不确定这是否可行。因此，如果不可能，使用 jQuery 的解决方案将是一个很好的结果。
您可以使用 CSS3 动画来做到这一点，但您必须为动画指定固定宽度a元素。这会降低它的动态性。
jQuery 可用于更新宽度值，CSS3 动画将由此触发。我修改了你的 CSS 并添加了简单的 JS 函数来更新宽度值。
nav ul li a {
background:#2e2e2e;
border-radius: 30px;
padding:15px 0;
color:#FFF;
text-decoration: none;
overflow:hidden;
width:60px;
display:inline-block;
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
}
nav ul li a:hover {
}
nav ul li a:hover span {
opacity: 1;
}
nav ul li i {
margin-left:16px;
font-size:28px !important;
}
nav ul li span {
position:absolute;
padding:0 20px;
opacity: 0;
-webkit-transition: opacity 0.9s; /* For Safari 3.1 to 6.0 */
transition: opacity 0.9s;
}
以及 JavaScript 代码：
$(function(){
$("nav ul li a").hover(function(){
$(this).css("width", $(this).find("span").innerWidth() + 50);
}, function(){
$(this).css("width", 60);
});
});
- 您需要包含 jQuery 库。
- 您可以更改 CSS 中的动画。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
