带有图标的jquery向左滑动菜单

Question

我正在尝试用 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>

Answer 1

我认为您将对您的代码进行“一些”更改

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);
}