Jquery 我怎样才能让尸体回到原来的位置（左：'；0px'；）而不是（左：'；25%'；）？_Jquery_Html_Css

Jquery 我怎样才能让尸体回到原来的位置（左：'；0px'；）而不是（左：'；25%'；）？

jquery html css

Jquery 我怎样才能让尸体回到原来的位置（左：'；0px'；）而不是（左：'；25%'；）？,jquery,html,css,Jquery,Html,Css,当我在移动视图中单击菜单图标时，我的菜单会显示出来，但当我将屏幕（当菜单仍然打开时）调整到更大的视图（笔记本电脑屏幕）时，菜单会消失，我会看到页面上的空白而不是菜单。当设备屏幕较大时，我的菜单不是幻灯片菜单，因此菜单消失。我希望主体返回到其原始位置（左：'0px'），但主体保持在相同的位置（左：'25px'）。有人能帮我修一下吗？谢谢这是我的密码： HTML: CSS: 我宁愿使用padding left而不是left:请阅读@Banzay中关于Minimal的部分我试过了，但是动画不能使用“

当我在移动视图中单击菜单图标时，我的菜单会显示出来，但当我将屏幕（当菜单仍然打开时）调整到更大的视图（笔记本电脑屏幕）时，菜单会消失，我会看到页面上的空白而不是菜单。当设备屏幕较大时，我的菜单不是幻灯片菜单，因此菜单消失。我希望主体返回到其原始位置（左：'0px'），但主体保持在相同的位置（左：'25px'）。有人能帮我修一下吗？谢谢

这是我的密码：

HTML:

CSS:

我宁愿使用

padding left

而不是

left:

请阅读@Banzay中关于Minimal的部分我试过了，但是动画不能使用“padding left”。

<html>
<head>
    <title> DutchOrangeDesign: Webwinkel </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/home.css" />
    <script src="javascript/jquery.js" type="text/javascript"></script>
    <script src="javascript/javascript.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
    <img class="winkelwagen" src="afbeeldingen/winkelwagen.png">
    <nav>
        <img id='menu-icon'src='afbeeldingen/menu-icon.png'>
        <div class="menu">
            <ul>
                <li id="exit"> EXIT </li>
                <li class='kop' href='#'>Home </li>
                <li class='kop' href='#'>Webwinkel</li>
                <li class='kop' href='#'>Contact</li>
            </ul>
        </div>
    </nav>
</div>
<div class="midden">
    <style type="text/css">
        #intro {
            background-image: url(afbeeldingen/oranjemensen.jpg);
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
            z-index:4;
            height:100%;
        }
        #title {
            background-color:black;
            opacity:0.8;
            height:40%;
            top:16%;
            font-size:3vh;
            color:white;
            position:relative;
        }

        #titletext {
            text-align: center;
            position:relative;
            font-family:sans-serif;
            top:30%;
        }

        .informatie {
            width:80%;
            height:60%;
            background-color:white;
            margin:0 auto;
            margin-top:5%;

        }

        #kop1_info {
            color:orange;
            font-weight:bold;
            font-size:5vh;
            text-align:center;
            margin-top:5%;
            font-family:sans-serif;
            top:5%;
            position:relative;
        }
        #content1 {
            font-family:Arial;
            font-size:3vh;
            margin-top:10%;
            text-align:center;
        }

        .actie {
            width:100%;
            height:60%;
            background-color:#FF8000;
            margin:0 auto;
            margin-top:5%;

        }
        #kop2_info {
            color:white;
            font-weight:bold;
            font-size:5vh;
            text-align:center;
            margin-top:5%;
            font-family:sans-serif;
            top:5%;
            position:relative;
        }
        #content2 {
            font-family:Arial;
            font-size:3vh;
            margin-top:10%;
            text-align:center;
            color:white;
        }

        @media screen and (max-width: 750px){
            #title {
                font-size:2vh;
            }
            #kop1_info {
                font-size:2vh;
            }
            #content1 {
                font-size:1.5vh;
            }
            #kop2_info {
                font-size:2vh;
            }
            #content2 {
                font-size:1.5vh;
            }

        }
    </style>
    <div id="intro">
        <div id="title"> <h1 id="titletext">Welkom op de webshop: DutchOrangeDesign</h1>

        </div>
    </div>
    <div class='informatie'>
        <h1 id="kop1_info"> Informatie </h1>
        <p id="content1"> dsfdssssssssssssss
            sdffsddddddddddddddddddddddd
            fdsssssssssssssssssssss
            sfdddddddddddddddddddddddddddddddd
            dsffffffffffffffffff<p>
    </div>
    <div class='actie'>
        <h1 id="kop2_info"> Actie </h1>
        <p id="content2"> dsfdssssssssssssss
            sdffsddddddddddddddddddddddd
            fdsssssssssssssssssssss
            sfdddddddddddddddddddddddddddddddd
            dsffffffffffffffffff<p>
    </div>
</div>
<div class="footer">
    <ul class="buttons">
        <a href="https://www.facebook.com/dutchorangedesign"> <li class="facebook"></li> </a>
        <a href="https://twitter.com/dutchorangedesign"> <li class="twitter"></li> </a>
        <a href="https://instagram.com/dutchorangedesign"> <li class="instagram"></li> </a>
    </ul>
</div>
</body>
</html>

$(document).ready(function(){
    $("#menu-icon").click(function(){
        $('body').animate({
            left: '25%'
        }, 200);
        $('.menu').animate({
            left: '0%'
        }, 200);
    });
    $("#exit").click(function(){
        $("body").animate({
            left:'0%'
        }, 200);
        $('.menu').animate({
            left: '-25%'
        }, 200);
    });



    $(".twitter").mouseenter(function(){
        $(this).removeClass("twitter");
    });
    $(".twitter").mouseenter(function(){
        $(this).addClass("twittera");
    });
    $(".twitter").mouseleave(function(){
        $(this).addClass("twitter");
    });
    $(".twitter").mouseleave(function(){
        $(this).removeClass("twittera");
    });
    $(".instagram").mouseenter(function(){
        $(this).removeClass("instagram");
    });
    $(".instagram").mouseenter(function(){
        $(this).addClass("instagrama");
    });

    $(".instagram").mouseleave(function(){
        $(this).addClass("instagram");
    });
    $(".instagram").mouseleave(function(){
        $(this).removeClass("instagrama");
    });

    $(".facebook").mouseenter(function(){
        $(this).removeClass("facebook");
    });
    $(".facebook").mouseenter(function(){
        $(this).addClass("facebooka");
    });

    $(".facebook").mouseleave(function(){
        $(this).addClass("facebook");
    });
    $(".facebook").mouseleave(function(){
        $(this).removeClass("facebooka");
    });
})

$(window).resize(function() {
    if (window.width > 750) {
        $("body").animate({
            left:'0%'
        }, 200);
    }
});

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0 auto;
  width: 100%;
  height:100%;
  clear: both;
  top:0;
  background-color:f2f2f2;
  position:relative;
}

.header {
  background-color:black;
  width:100%;
  height:10%;
  z-index:1;
  font-size:3vh;
  position:relative;
}

#exit { display:none;}

#menu-icon {
  display:none;
}

@media screen and (max-width: 750px){
  nav li {
    text-align:center;
    width:100%;
    margin:0;
  }


  .menu {
    height:100%;
    width:25%;
    background-color:#0A1B2A;
    color:#EFF5FB;
    left:-25%;
    top:0px;
    margin:0px;
    padding:0px;
    position:fixed;
  }

  .menu ul {
    list-style: none;
  }

  #menu-icon{
    display:block;
    width:30px;
    height:30px;
    padding-left:3%;
    top:2%;
  }

  #kop{
    border-bottom: 1px solid #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    line-height: 20%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-top: 2%;
    cursor:pointer;
    width:25%;
  }
  #exit {
    border-bottom: 1px solid #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    line-height: 40px;
    cursor:pointer;
    display:block;
  }
}

.midden {
  width:100%;
  position:relative;
}
.winkelwagen {
  width:5%;
  height:50%;
  float:right;
  margin-right:3%;
  margin-top:2%;
}
nav ul li{
  display:inline-block;
  padding:5%;
  font-family: Helvetica;
  color:white;
  margin-top:-4%;
}

nav ul {
  list-style: none;
  padding:0;
}

.footer {
  top:0;
  left:0;
  position:relative;
  background-color:black;
  width:100%;
  height:20%;
}

.facebook {
  background-image: url("../afbeeldingen/facebook-logo.png");
  opacity:0.5;
}
.twitter {
  background-image: url("../afbeeldingen/twitter-logo.png");
  opacity:0.5;
}
.instagram{
  background-image: url("../afbeeldingen/instagram-logo.png");
  opacity:0.5;
}

.facebooka {
  background-image: url("../afbeeldingen/facebook-logo.png");
  opacity:1;
}
.twittera {
  background-image: url("../afbeeldingen/twitter-logo.png");
  opacity:1;
}
.instagrama{
  background-image: url("../afbeeldingen/instagram-logo.png");
  opacity:1;
}
.buttons li {
  width:60px;
  height:60px;
  display:inline-block;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:15%;
}
.buttons {
  list-style-type:none;
  text-decoration:none;
  position:relative;
  top:30%;
  margin-left:45%;
}

a {
  text-decoration:none;

}

@media screen and (max-width: 750px){
  .header {
    font-size:2vh;
  }
  .buttons li {
    width:30px;
    height:30px;
  }
}