jquery滑动图标的左侧菜单

我想做一个菜单与css和jquery应该显示每个菜单项的图标，如果用户悬停菜单项为0.5秒，那么它应该慢慢向左滑动以显示菜单..我的意思实际上是类似于this plugin。我准备了一份jsfiddle here。由于我对web前端开发非常陌生，所以我无法进一步了解它。我向你求助。谢谢。jquery滑动图标的左侧菜单

<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>

来源

2015-03-03 gabby

为什么不通过你链接的教程？那样你就可以真正了解发生了什么，以及如何重现它？ – Patrick 2015-03-03 13:06:11

是的你是对的。我已经检查了它，但我失去了js和css文件..好吧，如果没有人会帮助我，我会尽力去做。 – gabby 2015-03-03 13:08:22

至少试一试，然后发布你想出的代码。我认为一旦你表现出了一点努力，人们就会更愿意提供帮助。祝你好运。 – Patrick 2015-03-03 13:09:16

我想你会做 “一些” 改变你的代码

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

来源

2015-03-03 13:35:08

谢谢你的回答。这几乎是我所需要的。不过，我想不要突然打开菜单文本..如果悬停是0.5秒，那么它应该打开文本，否则它不应该打开它。 – gabby 2015-03-03 13:52:30

所以，只需设置'transition-delay'。 http://www.w3schools.com/cssref/css3_pr_transition-delay.asp – 2015-03-03 13:55:06

它完美的工作..好吧:)我的最后一个问题。我的一些菜单项对于宽度来说太长：100px;我不想让它200px，因为一些其他的菜单项会太短200px ..你知道如何使宽度只是包装文本？ – gabby 2015-03-03 14:47:13

你能做到不使用CSS 3的转换延迟，像JS：

body{ 
 
\t background-color: #E2E2E2; 
 
} 
 
*{ 
 
\t padding :0px; 
 
\t margin: 0px; 
 
} 
 
#menuDiv{ 
 
\t padding:5px; 
 
\t background: yellow; 
 
\t display: inline-block; 
 
} 
 

 
#menuDiv a{ 
 
\t display: inline-block; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t width:48px; 
 
\t line-height: 48px; 
 
\t white-space:nowrap; 
 
\t margin: 8px; 
 
\t text-indent:50px; 
 
    
 
    -webkit-transition-delay: .5s; 
 
    -moz-transition-delay: .5s; 
 
    -o-transition-delay: .5s; 
 
    transition-delay: .5s; 
 
    
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
    
 
     -webkit-transition-property: text-indent; 
 
     -moz-transition-property: text-indent; 
 
     -o-transition-property: text-indent; 
 
     transition-property: text-indent; 
 
} 
 
#menuDiv a:hover { 
 
    text-indent: 0; 
 
} 
 

 
#menuDiv a#home{background: pink url("http://3.ii.gl/e95k6KER.png") no-repeat left center;} 
 

 
#menuDiv a#help{background: pink url("http://3.ii.gl/E-E-GRnJt.png") no-repeat left center;} 
 
#menuDiv a#photos{background: pink url("http://3.ii.gl/saNZbewlk.png") no-repeat left center;} 
 
#menuDiv a#mail{background: pink url("http://3.ii.gl/eOns-8L.png") no-repeat left center;}

<div id="menuDiv"> 
 
\t <a href="#" id="home">App Home</a> 
 
\t <a href="#" id="help">Help</a> 
 
\t <a href="#" id="photos">See photos</a> 
 
\t <a href="#" id="mail">Send a Mail</a> 
 
</div>

在这个例子中，我动画文本缩进，适应你的愿望。

来源

2015-03-03 13:11:35

jquery滑动图标的左侧菜单

回答

相关问题