🎯 퍼포먼스 사이드 메뉴 html+scss
안녕하세요 TriplexLab 입니다 :)
오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="./style/main.css">
</head>
<body>
<header>
<div class="l__wrapper">
<div class="hamberger">
<a href="#0">
<ul>
<li class="hamberger-list"></li>
<li class="hamberger-list"></li>
<li class="hamberger-list"></li>
</ul>
</a>
</div>
<div>
TRIPLEXLAB
</div>
<div class="icon-box">
<a href="#0">
<i class="fas fa-shopping-basket"></i>
</a>
</div>
</div>
<div class="g-bg--color">
<ul>
<li><a href="#0">Spealers</a></li>
<li><a href="#0">Headphones</a></li>
<li><a href="#0">Televisions</a></li>
<li><a href="#0">Accessories</a></li>
</ul>
<div class="g-bg--color--inner">
<ul>
<li class="color__inner--list"></li>
<li class="color__inner--list"></li>
<li class="color__inner--list"></li>
<li class="color__inner--list"></li>
</ul>
</div>
</div>
</header>
<section class="main__content">
<h2 class="main__content-tit">TRIPLEXLAB/CONTENTS</h2>
<video width="100%" autoplay loop>
<source src="./PexelsVideos1826904.mp4" type="video/mp4">
</video>
</section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
/* css reacet */
body, h1, h2, h3, ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
vertical-align: top;
}
/* css layerout */
.l__wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
body {
font-family: "montserrat", sans-serif;
}
header {
width: 100%;
height: 60px;
line-height: 60px;
position: fixed;
top: 0;
left: 0;
z-index: 9;
background-color: rgba(255, 255, 255, 0.358);
text-align: center;
.hamberger {
position: absolute;
top: 0;
left: 0;
z-index: 5;
a {
display: inline-block;
li.hamberger-list {
width: 20px;
height: 2px;
background: #000;
margin-bottom: 3px;
}
}
}
.g-bg--color {
width: 100%;
height: 100vh;
background: #000;
position: absolute;
top: 0;
left: -100%;
transition: all 0.2s ease-in-out;
&.active {
left: 0;
color: #fff;
}
}
.g-bg--color--inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
li.color__inner--list {
width: 900px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -10%);
display:none;
}
li:first-child.color__inner--list{
background: url(../img/pinterest-home-img-1.jpg) no-repeat center center;
}
li:nth-child(2).color__inner--list{
background: url(../img/pinterest-home-img-2.jpg) no-repeat center center;
}
li:nth-child(3).color__inner--list{
background: url(../img/pinterest-home-img-3.jpg) no-repeat center center;
}
li:last-child.color__inner--list{
background: url(../img/pinterest-home-img-4.jpg) no-repeat center center;
}
}
.icon-box {
position: absolute;
top: 0;
right: 0;
z-index: 5;
}
}
.main__content {
.main__content-tit {
display:inline-block;
color: #fff;
}
}
결과) 사이드 메뉴 만드는 과정👇
