因此，我正在尝试创建折叠动画，如该网站的移动视图所示：https://www.bwnwincpainting.com/
由于未正确设置浏览器的视口，因此您必须在手机上查看网站。这是一个Wix网站。
但是，当您点击汉堡菜单时，侧面菜单会翻转打开，然后翻转关闭，就像进来一样。
这是我的代码，我无法在任何地方找到有关如何执行此特定动画以进行打开和关闭的答案。任何帮助将不胜感激！
<!DOCTYPE html>
<html id="noScroll">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScoll">
<nav class="navbar animated fadeIn">
<span class="open-slide">
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
<header class="hero">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your
Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="animated fadeInRight href=">Learn More</a>
</div>
</div>
</header>
<main>
<div class="strip-2-back">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="flex-1">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 2 -->
<!-- ----------------------------------------------------------------------------------- -->
<div class="container">
<div id="strip-2">
<div class="st-2-center">
<h3 class="st-2-call">Give us a call!</h3>
<h3 class="st-2-number">(360)679-444</h3>
<p class="st-2-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
<a href="#">Contact Us</a>
</div>
<div class="st-2-emailus">
<h4 class="email-us">OR EMAIL US</h4>
<img src="images/email.jpg" alt="email screen on a phone" width="312" height="140">
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 3 -->
<!-- ----------------------------------------------------------------------------------- -->
<div id="strip-3-background">
<div class="container">
<div id="strip-3">
<div class="center-3-top">
<div>
<h4 class="">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction
guarantee.</p>
</div>
</div>
<div class="center-3">
<div class="local">
<i class="fas fa-map-pin fa-2x"></i>
<h2>LOCALLY OWNED</h2>
<p>With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<i class="fas fa-dollar-sign fa-2x"></i>
<h2>BEST VALUE</h2>
<p>We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<i class="fas fa-medal fa-2x"></i>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p>We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 4 -->
<!-- ----------------------------------------------------------------------------------- -->
<div class="strip-4-cont">
<div class="strip-4-1"></div>
<div class="strip-4-2-back">
<div class="strip-4-2">
<h3>Any Project,</h3>
<h3>Any Size</h3>
<div class="strip-4-p">
<p class="p-width">Our shop can handle projects from
<br>small to large. Over that last 30 years we have seen it all and done it all. </p>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 5 -->
<!-- ----------------------------------------------------------------------------------- -->
<div class="container">
<div class="strip-4">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br>
Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc@gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form>
<input type="text" name="name" placeholder="Full name" style="width: 571px; height: 30px"><br>
<input type="text" name="email" placeholder="Email" style="width: 571px; height: 30px"><br>
<textarea name="message" placeholder="Message" style="width: 569px; height: 126px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</main>
<!-- ----------------------------------------------------------------------------------- -->
<!-- FOOTER -->
<!-- ----------------------------------------------------------------------------------- -->
<div class="footer-color">
<footer>
<div class="flex-strip-5 container">
<div class="flex-5">
<h3>OVER 30 YEARS <br>EXPERIENCE</h3>
<p>We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee. </p>
</div>
<div class="flex-5">
<div class="list">
<h3 class="adjust">OUR SERVICES</h3>
<p>- Deck Work</p>
<p>- Pressure Washing</p>
<p>- Staining</p>
<p>- Doors and Cabinets</p>
<p>- Mill Work Specialists</p>
<p>- Interior/Exterior Painting</p>
</div>
</div>
<div class="flex-5">
<h3 class="adjust">ADDRESS</h3>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p>Phone: (360) 679-4444 <br>
Fax: (360) 679-5026 <br>
Email: bwnwinc@gmail.com</p>
</div>
</div>
<div class="facebook container">
<a href="https://www.facebook.com/brushworksnwinc/"><i class="fab fa-facebook-square fa-2x"></i></a>
</div>
<div class="copyright">
<p class="center">© 2019 Brushworks Inc. NW <br>
Designed by <a href="https://www.oakharborwebdesigns.com/">Oak Harbor Web Designs</a></p>
</div>
</footer>
</div>
</div> <!-- content-container -->
</div> <!-- container -->
<script>
function toggleNav() {
if (document.getElementById("side-menu").style.width != "25%") {
document.getElementById("side-menu").style.width = "25%";
document.getElementById("side-hidden").style.width = "75%";
document.getElementById("noScroll").style.overflow = "hidden";
} else {
document.getElementById("side-menu").style.width = "0";;
document.getElementById("side-hidden").style.width = "0";
document.getElementById("noScroll").style.overflow = "scroll";
}
}
</script>
</body>
</html>
body, html{
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
.container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 100px;
margin: 0;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 15px;
left: 30px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
}
.navbar-links a {
display: inline;
color: #444444;
text-decoration: none;
text-align: center;
margin: 0 5px 0 0;
font-size: 15px;
padding: 10px 17px;
}
nav .active {
background: #CE2026;
color: #FFFFFF;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
height: 100px;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
font-size: 1.4em;
}
#number {
float: right;
padding-right: 0;
margin-top: 50px;
margin-right: 85px;
font-size: 21px;
font-weight: normal;
}
#number {
float: right;
padding-right: 0;
margin-top: 50px;
margin-right: 85px;
font-size: 21px;
font-weight: normal;
}
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 100px;
margin: 0;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 15px;
left: 30px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
}
.navbar-links a {
display: inline;
color: #444444;
text-decoration: none;
text-align: center;
margin: 0 5px 0 0;
font-size: 15px;
padding: 10px 17px;
right: 25px;
}
nav .active {
background: #CE2026;
color: #FFFFFF;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
height: 100px;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
font-size: 1.4em;
}
#number {
float: right;
padding-right: 0;
margin-top: 50px;
margin-right: 85px;
font-size: 21px;
font-weight: normal;
}
#side-hidden {
background-color: #000;
opacity: 0.6;
height: 100%;
position: absolute;
transition: 0.5s;
top: 108px;
left: 0
margin: 0;
width: 0;
z-index: 3;
}
/* Responsive Menu*/
.open-slide {
float: right;
z-index: 5;
display: none;
}
.side-nav {
width: 0;
height: 100%;
z-index: 1;
position: fixed;
background-color: #fff;
transition: 0.5s;
right: 0px;
text-align: right;
display: block;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
z-index: 6;
/* Added this */
padding: 0;
}
/* Added this */
.nav-item {
display:block;
margin: 0;
}
.btn-close a {
display: block;
margin-bottom: 50px;
}
.side-nav ul a {
position: relative;
width: 100%;
/* Changed this */
/* padding: 10px 130px 10px 100px;*/
padding: 20px 15px;
text-decoration: none;
color: #000;
margin-right: 20px;
z-index: 6;
/* Removed this */
/* right: 30px; */
text-align: right;
/* Added these */
display: block;
box-sizing: border-box;
top: 60px;
}
.btn-close {
display: block;
position: absolute;
top: 0;
/* Changed this */
/* left: 22px; */
left: 0;
font-size: 36px;
text-decoration: none;
color: #ccc;
right: 7px;
top: 10px;
}
.side-nav .btn-close:hover {
color: #fff
}
.side-nav li a:hover {
color: #fff;
background: #CE2026;
}
@media only screen and (max-width: 999px) {
.navbar-links {
display: none;
}
.open-slide {
display: block;
margin-right: 5%;
margin-top: 3.5%;
transition: 0.5s ease;
}
}
@media only screen and (min-width: 1000px) {
#side-hidden,
.side-nav {
display: none;
}
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- LANDING STRIP -->
<!-- ----------------------------------------------------------------------------------- --*/
.hero {
height: 550px;
width: 100%;
position: relative;
top: -38px;
background:url("images/Landing.jpg") no-repeat center center fixed;
padding: 0;
margin: 0;
}
#logo {
height: 291px;
width: 296px;
float: left;
position: relative;
top: 125px;
left: -20px;
margin: 0;
padding: 0;
animation-delay: 0.8s;
}
.heroText {
position: relative;
top: 140px;
left: 5px;
color: #FFFFFF;
}
#home-h {
font-weight: 900;
font-size: 53px;
margin-bottom: 0px;
}
#home-p {
font-size: 21px;
font-weight: normal;
animation-delay: 0.3s;
}
.heroText a {
display: inline-block;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
font-size: 17px;
margin-top: 10px;
padding: 15px 55px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
}
.heroText a:hover {
background: #fff;
border-color: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: default;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- RED STRIP -->
<!-- ----------------------------------------------------------------------------------- --*/
#strip-1 {
display: flex;
text-align: center;
font-size: 1em;
flex-basis: 33%;
line-height: 1.4em;
color: #FFFFFF;
position: relative;
font-weight: 300;
align-content: center;
margin: 0;
}
.strip-2-back {
background: #CE2026;
margin: 0;
padding: 0;
position: relative;
top: -39px;
}
.strip-1-center {
display: flex;
flex-direction: row;
width: 980px;
height: 188px;
justify-content: space-around;
align-content: center;
align-items: center;
animation-delay: 0.5s;
}
h3 {
font-size: 20px;
}
.flex-1 {
width: 240px;
}
.line {
display: flex;
align-items: center;
border-right: 2px solid #FFFFFF;
height: 66px;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- GIVE US A CALL -->
<!-- ----------------------------------------------------------------------------------- --*/
#strip-2 {
height: 475px;
background: #FFFFFF;
display: flex;
text-align: center;
align-items: center;
justify-content: space-around;
}
#strip-2 a {
margin-top: 15px;
padding: 10px 130px;
border: 2px solid #323232;
text-align: center;
text-decoration: none;
border-radius: 20px;
position: relative;
top: 10px;
color: #323232;
font-size: 13px;
}
#strip-2 a:hover {
background: #CE2026;
color: #fff;
border-color: #CE2026;
transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
}
.email-us {
background: #CE2026;
padding: 15px 0;
margin: 0;
font-size: 20px;
color: #fff;
font-weight: normal;
}
.email-us:hover {
background: #831517;
cursor: pointer;
}
.st-2-center {
width: 446px;
position: relative;
margin-left: 110px;
top: -45px;
}
.st-2-emailus {
margin-right: 20px;
position: relative;
top: -45px;
margin-bottom: 20px;
margin-left: 20px;
}
.st-2-p {
position: relative;
font-size: 16px;
line-height: 1.2em;
letter-spacing: normal;
color: #605E5E
height: 76px;
font-weight: 300;
margin-top: 20px;
margin-bottom: 25px;
}
.st-2-call, .st-2-number {
margin-bottom: 0;
margin-top: 3px;
padding-bottom: 0;
font-size: 28px;
font-weight: 400;
letter-spacing: 1.4px;
color: #2F2E2E;
}
.st-2-call {
margin-bottom: 8px;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 3 WITH ICONS -->
<!-- ----------------------------------------------------------------------------------- --*/
#strip-3 {
background: #EEF0E4;
height: 600px;
position: relative;
font-weight: normal;
text-align: center;
left: 10px;
}
.center-3-top {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
flex-direction: column;
position: relative;
top: 90px;
text-align: center;
}
.center-3 {
display: flex;
width: 980px;
height: 188px;
justify-content: space-around;
align-content: center;
align-items: center;
animation-delay: 0.5s;
margin-top: 180px;
}
i {
color: #CE2026;
}
.center-3 h2 {
font-size: 18px;
color: #2f2e2e;
font-weight: 1200;
margin: 35px;
}
.center-3 p {
margin: 30px;
font-weight: 300;
font-size: 1em;
}
.qualified h2 {
margin-right: 15px;
margin-left: 15px;
text-align: center;
}
.center-3-top h4 {
display: flex;
align-content: center;
flex-direction: column;
text-align: center;
width: 619px;
font-size: 28px;
color: #2f2e2e;
font-weight: 700;
margin: 0;
}
.center-3-top p {
font-size: 18;
color: #2f2e2e;
font-weight: 300;
width: 900px;
}
#strip-3-background {
height: 600px
margin: 0;
padding: 0;
background: #EEF0E4;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 4 PARALLAX -->
<!-- ----------------------------------------------------------------------------------- --*/
.strip-4-cont {
display: flex;
flex-direction: row;
flex-basis: 50%;
text-align: left;
height: 700px;
align-content: center;
align-items: center;
width: 100%;
background: #CE2026;
}
.strip-4-1 {
background-image: url("images/paint-shop.jpg");
width: 50%;
height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.strip-4-2 {
background: #CE2026;
margin-left: 50px;
color: #fff;
width: 50%;
height: 100%;
}
.strip-4-2 h3 {
font-size: 70px;
font-weight: 700;
margin: 0;
margin-top: 10px;
width: 400px;
margin-bottom: 10px;
}
.strip-4-p {
line-height: 2em;
margin-top: 40px;
font-weight: 300;
margin-bottom: 25px;
}
.read {
display: inline-block;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
font-size: 15px;
padding: 5px 45px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
margin-top: 20px;
}
.read:hover {
background: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- STRIP 4 PARALlAX -->
<!-- ----------------------------------------------------------------------------------- --*/
#adress {
text-align: left;
font-size: 1em;
margin-left: 69px;
}
.strip-4 {
display: flex;
flex-direction: row;
flex-basis: 50%;
align-content: center;
justify-content: space-between;
align-items: center;
vertical-align: center;
height: 570px;
}
.red {
color: #CE2026;
margin-bottom: 0;
margin-top: 0;
}
.regular {
color: #605E5E;
font-weight: 300;
margin-top: 5px;
margin-bottom: 0;
}
.form {
width: 578px;
font-size: 14px;
}
.form h6 {
font-size: 28px;
color: #605E5E;
text-align: center;
margin-top: 0;
margin-bottom: 28px;
font-weight: 700;
}
input, textarea {
margin: 3px;
font-size: 14px;
font-family: 'Raleway', sans-serif;
}
input[type=submit] {
background: #CE2026;
color: #fff;
font-size: 14px;
float: right;
padding: 7px 13px;
margin: 0;
border: none;
}
input[type=submit]:hover {
background: #831517;
cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome */
color: #605E5E;
opacity: .5;
padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- FOOTER -->
<!-- ----------------------------------------------------------------------------------- --*/
.flex-strip-5 {
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
background: #2F2E2E;
height: 372px;
vertical-align: center;
}
.flex-5 {
width: 200px;
position: relative;
left: 25px;
margin-top: 92px;
}
.flex-5 h3 {
font-size: 18px;
font-weight: 700;
color: #A0A09F;
}
.flex-5 p {
color: #A0A09F;
font-size: 14px;
line-height: 1.5em;
}
.list {
height: 130px;
}
.list p {
line-height: 1.5em;
margin: 0;
}
.adjust {
height: 42px;
}
.facebook {
display: flex;
justify-content: space-around;
}
.facebook i {
color: #3b5998;
margin-bottom: 40px;
}
.footer-color {
background-color: #2F2E2E;
}
.copyright {
display: flex;
justify-content: space-around;
background: #242323;
height: 68px;
color: #A0A09F;
text-align: center;
vertical-align: center;
font-size: 14px;
line-height: 1.5em;
}
.copyright a {
text-decoration: none;
color: #A0A09F;
}
.copyright a:hover {
color: #fff;
}
script {
}