在網站中的導航動畫

我試圖從屏幕外向導航屏幕上反轉導航，反之亦然。我在我的電腦上安裝了jquery.min.js（最新版本），導航欄不是從左側開始的。我所做的只是第一步：一旦點擊了一個對象，就會導航導航。以下是我想出了：我上傳了我的工作的jsfiddle：http://bit.ly/VQIXlF 在網站中的導航動畫

這是我SOFAR：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="../CSS/Default.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src="../JS/Script.js"></script> 
    </head> 
    <body> 
     <h1 class="menu-open" id="open">Open</h1> 
     <div class="nav" id="nav"> 
      <div class="menu"> 
       <h1>Menu</h1> 
       <div class="elements"> 
        <h2 class="home"><a href="#">Home</a></h2> 
        <h2 class="about"><a href="#">About</a></h2> 
        <h2 class="code"><a href="#">Products</a></h2> 
        <h2 class="design"><a href="#">Contact</a></h2> 
        <h2 class="gaming"><a href="#">Find Us</a></h2> 
        <h2 class="more"><a href="#">More</a></h2> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

的jQuery：

var main = function(){ 
    $('.open').click(function(){ 
     $('.nav').animate({ 
      left: "0px" 
     }, 200); 
    }); 
}; 
$(document).ready(main);

CSS：

body{ 
    margin: 0 auto; 
} 
.nav{ 
    top:0; 
    left: -300px; 
    z-index: 1; 
    position: fixed; 
    height:100%; 
    width:300px; 
    background-color: #336ca6; 
} 
.menu-open{ 
    position:absolute; 
    left:500px; 
    cursor: pointer; 
} 
.menu{ 
    font-family: arial; 
    width:300px; 
} 
.menu h1{ 
    position:relative; 
    left:100px; 
    color: #a0a0a0; 
} 
.menu h2 { 
    border-bottom: 1px solid #aaaaaa; 
    padding-left:20px; 
    padding-bottom:20px; 
    width:280px; 
} 
.menu .elements{ 
    margin-top:35px; 
} 
.menu a{ 
    text-decoration: none; 
    font-family: arial; 
    color:#efefef; 
    width:300px; 
} 
.menu a:hover{ 
    color:#aaaaaa; 
    transition:color 0.5s; 
} 
.menu .home{ 
    border-top: 1px solid #aaaaaa; 
    padding-top:20px; 
}

請幫忙！

來源

2014-08-27 MhMoudallal

發佈您的代碼中的問題，請。 – j08691 2014-08-27 16:16:57

你實際上不會在任何地方調用你的動畫函數。你需要有一個OnClick屬性的按鈕。或者在JS中有一個事件處理程序。看看這個小提琴它應該讓你開始正確的方向。你仍然需要弄清楚如何關閉菜單。 http://jsfiddle.net/dnu33c8c/ – GifCo 2014-08-27 16:27:08

其實最簡單的答案是，你曾用「還需要做更多更方便.open「在您的腳本whe重新開放的是一個id ...改變

$('#open').click(function() /* add the # instead of . */

應該工作

http://jsfiddle.net/a7fkp785/3/

來源

2014-08-27 16:32:36 Sai

這可以通過增加class與css3過渡

.nav{ 
    top:0; 
    left: -300px; 
    z-index: 1; 
    position: fixed; 
    height:100%; 
    width:300px; 
    background-color: #336ca6; 
    transition: all 0.5s;/*ADDED*/ 
} 
.slide-nav{ 
    left:0; 
}

JQUERY

$('#open').click(function(){ 
    $('.nav').toggleClass('slide-nav'); 
});

DEMO

來源

2014-08-27 16:24:53 Benjamin

謝謝大家！這非常有幫助！ CSS3轉換也很有幫助！ – MhMoudallal 2014-08-27 18:23:57

在網站中的導航動畫

回答

相關問題