const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
window.sr = ScrollReveal();
sr.reveal('.info', {
duration: 2000,
origin: 'bottom'
})html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(https://picsum.photos/id/1016/3844/2563);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*------ABOUT------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #edb12f;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background-color: red;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
/*------MENU------*/
.menu-section {
background-color: #edb12f;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}
.menu-section h1 {
font-size: 9.5rem;
margin-top: 0;
position: absolute;
left: 200px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 190px;
left: 195px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 50px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #edb12f;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.burrito {
position: absolute;
transform: rotate(-45deg);
top: -20px;
right: 200px;
width: 300px;
height: 300px;
z-index: 11;
background-image: url(https://picsum.photos/id/1025/4951/3301);
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*------HOURS------*/
.hours-section {
background-color: green;
width: 100%;
height: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mexican Restaurant</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="nav-wrap">
<div class="nav-box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Hours</a>
<a href="#">Contact</a>
<a href="#">Location</a>
<i class="fas fa-times" id="menu-close"></i>
</div>
</div>
<div class="info-wrap">
<p class="info">Authentic Mexican Food</p>
<div class="logo-wrap">
<div>YOUR</div>
<div>LOGO</div>
<div>HERE</div>
</div>
</div>
</div>
</header>
<main>
<div class="about-section">
<h1 class="about-h1">About Us</h1>
<div class="about-line"></div>
<div class="about-wrap">
<div class="about-info">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
</div>
<div class="image-slider-wrap">
<div class="image-slider">
<i class="fas fa-sort-up" id="left"></i>
<i class="fas fa-sort-up" id="right"></i>
</div>
</div>
</div>
</div>
<div class="menu-section">
<div class="design-left">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<div class="design-right">
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
<div class="design-wrap">
<div class="top">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-top"></div>
</div>
<div class="top-middle">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-right move"></div>
</div>
<div class="bottom">
<div class="arrow-left"></div>
<div class="arrow-top"></div>
</div>
</div>
</div>
<div class="burrito"></div>
<h1>Menu</h1>
<div class="menu-line"></div>
<div class="column-left">
<div class="column">
<h2 class="menu-h2" id="combo-platter">Combination Platters</h2>
<div class="row">
<div>
<p>2 Beef Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Enchiladas</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Tostada & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Taco & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Burrito & Enchilada</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Beef Burritos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>2 Carne Asada Tacos</p>
<p class="price">$6.99</p>
</div>
<div>
<p>Carne Asada</p>
<p class="price">$6.69</p>
</div>
<div>
<p>Chorizo</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Machaca</p>
<p class="price">$6.35</p>
</div>
<div>
<p>Carnitas</p>
<p class="price">$5.89</p>
</div>
<div>
<p>2 Fish Tacos</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Chiles Rellenos</p>
<p class="price">$5.95</p>
</div>
</div>
<h2 class="menu-h2">Burritos</h2>
<div class="row">
<div>
<p>Beef Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Pork Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Carne Asada Burrito</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Chicken Burrito</p>
<p class="price">$5.49</p>
</div>
<div>
<p>California Burrito</p>
<p class="price">$6.69</p>
</div>
<div>
<p>Red Chili Burrito</p>
<p class="price">$4.89</p>
</div>
<div>
<p>Machaca Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Mixed Burrito</p>
<p class="price">$5.89</p>
</div>
<div>
<p>Chorizo Burrito</p>
<p class="price">$5.99</p>
</div>
<div>
<p>Bacon and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Sausage and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Chorizo and Egg</p>
<p class="price">$4.99</p>
</div>
<div>
<p>Picodegallo and Egg</p>
<p class="price">$4.99</p>
</div>
</div>
</div>
</div>
<div class="column-middle">
<div class="column">
<h2 class="menu-h2">Enchiladas</h2>
<div class="row">
<div>
<p>2 Cheese</p>
<p class="price">$4.55</p>
</div>
<div>
<p>2 Beef</p>
<p class="price">$4.65</p>
</div>
<div>
<p>2 Chicken</p>
<p class="price">$3.55</p>
</div>
</div>
<h2 class="menu-h2">Side Orders</h2>
<div class="row">
<div>
<p>Carne Asada Fries</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Jalepenos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Quesadilla</p>
<p class="price">$3.55</p>
</div>
<div>
<p>Ham Quesadilla</p>
<p class="price">$4.55</p>
</div>
<div>
<p>1/2 Pint of beans</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1/2 Pint of rice</p>
<p class="price">$4.55</p>
</div>
<div>
<p>Super Nachos</p>
<p class="price">$4.65</p>
</div>
<div>
<p>1 Tamale</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Extra Cheese Quacamole</p>
<p class="price">$1.65</p>
</div>
<div>
<p>Supreme Quesadilla</p>
<p class="price">$3.95</p>
</div>
<div>
<p>Chips and Quacamole</p>
<p class="price">$1.65</p>
</div>
<div>
<p>1 Chiles Rellano</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Chips and salsa</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Churros</p>
<p class="price">$3.65</p>
</div>
</div>
<h2 class="menu-h2">Breafast Plates</h2>
<div class="row">
<div>
<p>Huevos Rancheros</p>
<p class="price">$6.55</p>
</div>
<div>
<p>Steaks Rancheros</p>
<p class="price">$6.65</p>
</div>
<div>
<p>Scrambled Eggs w/Ham</p>
<p class="price">$5.55</p>
</div>
<div>
<p>Scrambled Eggs w/Sausage</p>
<p class="price">$5.55</p>
</div>
<div>
<p>Chorizo Omelette</p>
<p class="price">$6.35</p>
</div>
<div>
<p>Carne Asada Omelette</p>
<p class="price">$6.45</p>
</div>
<div>
<p>Eggs and Bacon</p>
<p class="price">$3.55</p>
</div>
</div>
</div>
</div>
<div class="column-right">
<div class="column">
<h2 class="menu-h2">Drinks</h2>
<div class="row">
<div>
<p>Coca-cola</p>
<p class="price">$1.55</p>
</div>
<div>
<p>Jarrito</p>
<p class="price">$1.95</p>
</div>
<div>
<p>Sangria</p>
<p class="price">$1.95</p>
</div>
</div>
<h2 class="menu-h2">Tacos</h2>
<div class="row">
<div>
<p>Carne Asada Taco</p>
<p class="price">$2.55</p>
</div>
<div>
<p>Beef Taco</p>
<p class="price">$2.85</p>
</div>
<div>
<p>Pork Taco</p>
<p class="price">$2.85</p>
</div>
<div>
<p>Chicken Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Fish Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Carnita Taco</p>
<p class="price">$2.55</p>
</div>
<div>
<p>Cabeza Taco</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Adobada Taco</p>
<p class="price">$4.65</p>
</div>
</div>
<h2 class="menu-h2">Tortas</h2>
<div class="row">
<div>
<p>Carne Asada</p>
<p class="price">$4.09</p>
</div>
<div>
<p>Machaca</p>
<p class="price">$4.09</p>
</div>
<div>
<p>Ham</p>
<p class="price">$4.65</p>
</div>
<div>
<p>Chorizo</p>
<p class="price">$4.95</p>
</div>
<div>
<p>chicken</p>
<p class="price">$4.95</p>
</div>
</div>
<h2 Class="menu-h2">Tostadas</h2>
<div class="row">
<div>
<p>Pork</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Beef</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Fish</p>
<p class="price">$2.65</p>
</div>
<div>
<p>Carne Asada</p>
<p class="price">$2.65</p>
</div>
</div>
</div>
</div>
</div>
<div class="hours-section">
</div>
</main>
<footer>
</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>
因此，我的菜单区域顶部有一个墨西哥卷饼的图像。菜单部分具有一个clip-path：多边形属性，以使顶部显示为倾斜。我希望此卷饼img在手册部分中流过，因此上半部分在about部分中。如果删除了clip-path属性，则仅与z-index一起使用。为什么？我该如何解决？谢谢：）