Jquery 网站导航动画_Jquery_Html_Css

Jquery 网站导航动画

jquery html css

Jquery 网站导航动画,jquery,html,css,Jquery,Html,Css,我正在尝试从屏幕外到屏幕上设置导航动画，反之亦然。我的电脑上有jquery.min.js（最新版本），导航没有从左边开始设置动画。我所做的只是第一步：单击对象后设置导航动画。以下是我的想法：我将我的工作上传到JSFIDLE：这就是我目前的情况： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../CSS/Default.css

我正在尝试从屏幕外到屏幕上设置导航动画，反之亦然。我的电脑上有jquery.min.js（最新版本），导航没有从左边开始设置动画。我所做的只是第一步：单击对象后设置导航动画。以下是我的想法：我将我的工作上传到JSFIDLE：

这就是我目前的情况：

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

CSS:

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

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

请帮忙

通过使用

css3

转换添加

class

，可以更轻松地完成此操作

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

实际上最简单的答案是您在脚本中使用了“.open”，其中open是一个id。。。改变

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

这应该行得通

请在问题中发布您的代码。您实际上并没有在任何地方调用动画函数。您需要有一个带有OnClick属性的按钮。或者在JS中有一个事件处理程序。看看这把小提琴，它会让你朝着正确的方向开始。不过，您仍然需要弄清楚如何关闭菜单。谢谢大家！这很有帮助！CSS3转换也很有用！