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滑動圖標的左側菜單

回答

相關問題