在网站中的导航动画

我试图从屏幕外向导航屏幕上反转导航，反之亦然。我在我的电脑上安装了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

在网站中的导航动画

回答

相关问题