让display：none elem slideRight（）; [英] Let display:none elem slideRight();
问题描述
我想在CSS中创建一个菜单，其中只有图标显示为按钮，但当您将鼠标悬停在其上时，必须显示图标旁边的文本。事情是，我想动画显示文本的效果与一个slideDown（）像效果，只有到右边。
HTML（其中包括fontawesome图标）：
< body&
< nav>
< ul>
< li>< a href =＃>< i class =fa fa-home>< / i>< span>首页< / 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>
CSS：
nav {
position：fixed;
top：20px;
背景：＃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 {
背景：＃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 。
理想的解决方案是纯CSS，但我不知道这是否可能。所以如果不可能，一个有jQuery的解决方案将是一个很好的结果。
必须为 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; / *对于Safari 3.1到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; / *对于Safari 3.1到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 ;
}）;
}）;
- 您需要包含jQuery库。
- 您可以更改CSS中的动画。
I'm trying to make a menu in CSS where only icons are visible as buttons, but when you hover over them, the text next to the icon must be shown. The thing is that I want to animate the effect of showing the text with a slideDown() like effect, only then to the right.
The HTML (which includes fontawesome for the icons):
<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;
}
I also included a JSFiddle.
The ideal solution would be pure CSS, but I'm not sure if that's possible. So if it's not possible, a solution with jQuery would be a good outcome.
You can do that with CSS3 animation but you have to specify fixed width to the a elements. That will make it less dynamic.
jQuery can be used to update the width value and the CSS3 animation will be triggered by that. I have modified your CSS and added simple JS function to update the width value.
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;
}
And the Javascript code:
$(function(){
$("nav ul li a").hover(function(){
$(this).css("width", $(this).find("span").innerWidth() + 50);
}, function(){
$(this).css("width", 60);
});
});
- You need to include the jQuery lib.
- You can change the animation in your CSS.
这篇关于让display：none elem slideRight（）;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
