让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屋!