我正在尝试用 css 和 jquery 制作一个菜单,它应该为每个菜单项显示一个图标,如果用户将菜单项悬停 0.5 秒,那么它应该慢慢向左滑动以显示菜单的名称。我的意思是实际上类似于 this plugin .我准备了一个jsfiddle here .由于我对网络前端开发还很陌生,所以我无法进一步了解它。我请求你的帮助。谢谢。
<div id="menuDiv">
<a href="#" id="home">App Home</a>
<a href="#" id="help">Help</a>
<a href="#" id="photos">See photos</a>
<a href="#" id="mail">Send a Mail</a>
</div>
最佳答案
我认为您将对您的代码进行“一些”更改
JSFiddle
HTML:
<div id="menuDiv">
<a href="#" id="home">
<span class="menuIcon"></span>
<span class="menuText">App Home</span>
</a>
<a href="#" id="help">
<span class="menuIcon"></span>
<span class="menuText">Help</span>
</a>
<a href="#" id="photos">
<span class="menuIcon"></span>
<span class="menuText">See photos</span>
</a>
<a href="#" id="mail">
<span class="menuIcon"></span>
<span class="menuText">Mail</span>
</a>
</div>
CSS:
body{
background-color: #E2E2E2;
}
*{
padding :0px;
margin: 0px;
}
#menuDiv{
padding:5px;
background: yellow;
display: inline-block;
float: right;
}
#menuDiv a {
background: pink;
width: 48px;
height: 48px;
float: right;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuDiv .menuIcon {
width: 48px;
height: 48px;
float: left;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuDiv a#home .menuIcon {
background: url("http://3.ii.gl/e95k6KER.png") no-repeat left center;
}
#menuDiv a#help .menuIcon {
background: url("http://3.ii.gl/E-E-GRnJt.png") no-repeat left center;
}
#menuDiv a#photos .menuIcon {
background: url("http://3.ii.gl/saNZbewlk.png") no-repeat left center;
}
#menuDiv a#mail .menuIcon {
background: url("http://3.ii.gl/eOns-8L.png") no-repeat left center;
}
#menuDiv .menuText {
width: 100px;
height: 48px;
line-height: 48px;
position: absolute;
padding-left: 16px;
text-decoration: none;
left: 48px;
}
#menuDiv a:hover {
width: 148px;
}
#menuDiv a:hover .menuIcon {
-webkit-transform: rotate(-1440deg);
transform: rotate(-1440deg);
}
关于带有图标的jquery向左滑动菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28832359/