<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/reset.css">
<style>
*{box-sizing: border-box}
img{vertical-align: top}
body{font-size:12px}
.top{background: #000}
.top h1 img{width: 100px;}
.topInner{display: flex;
justify-content: space-between;
width: 450px;margin: auto;}
.gnb{display: flex;
align-items: center;
}
.gnb li{color:#fff;padding:22px;cursor: pointer;}
.gnb li.on{background: rgb(184, 245, 16);color:#000}
h3{ color:rgb(184, 245, 16)}
.nav{background: #333}
.menu{overflow: hidden;
justify-content: center;
width: 450px;margin: auto;
color:#fff;
display: none
}
.menu ul{float:left;padding:15px 30px}
.menu ul li{padding:10px}
.loginForm{ width: 450px;margin: auto;
padding:20px;
display: none;
}
.loginForm input{width: 100%;
padding:10px }
label{display: inline-block;
color:#eee;padding:15px 0}
.loginForm button{width:100% ;padding:10px ;margin-top:15px;
background:#000;color:rgb(184, 245, 16);
border:0}
.content{width: 450px;margin: auto;}
.thumnail img{width:100% }
.title{background:#aaa;display: flex;
justify-content: space-between;
}
.summary{display: flex;}
.arrow{background: #333;padding:10px 15px;
cursor: pointer;}
.lineH{line-height: 44px}
.productName{padding-left:15px}
.price{padding-right:15px}
.content{background: #555;color:#eee;
}
.content button{width:100%;padding:10px;background: #000;color:#555;
font-size:16px;font-weight: bold;border:none }
.content button.on{color:rgb(184, 245, 16)}
.detail{ display: none}
.detail p,h4,ul.size{margin:10px}
ul.size{display: flex;}
.size li{background:#000;padding:13px ;margin-right: 1px;
cursor: pointer;
}
.size li.on{background:rgb(184, 245, 16);color:#333}
.thumnail{overflow:hidden }
.thumnail img{transition:all .5s}
.thumnail:hover img{transform:scale(1.1)}
</style>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('.menuBtn').click(function(){
$('.menu').slideToggle();
});
$('.loginBtn').click(function(){
$('.loginForm').slideToggle();
});
$('.arrow').click(function(){ //.arrow를 클릭하면
//$('.detail').slideToggle(); //.detail이 슬라이드토글 되게 해라.
//$(this).parents('.title').next().slideToggle(); //.arrow의 부모인 .title의 옆에 있는 애를 슬라이드 토글해라.
$('.detail').slideUp();//현재 보고있는 .detail을 슬라이드 업하고
$(this).parents('.title').next().stop().slideDown();//.arrow의 부모인 .title의 옆에 있는 애를 슬라이드 다운해서 보여줘라.
});
$('.size li').click(function(){ //.size li를 클릭하면
$('.size li').removeClass('on');//.size li에 on되어있는 애를 지워라
$(this).addClass('on');//.size li에 on을 보여줘라
$('button').removeClass('on');//button에 on을 지워라
$(this).closest('.size').next().addClass('on');//this=button의 가까이에 있고 .size의 옆에 있는 애를 on해라.
});
});
</script>
</head>
<body>
<div class="top">
<div class="topInner">
<h1><img src="img/nike.png" alt=""></h1>
<ul class="gnb">
<li class="menuBtn">MENU</li>
<li class="loginBtn">LOGIN</li>
</ul>
</div>
</div>
<!-- ----------------------------------------------------------- -->
<div class="nav">
<div class="menu">
<ul>
<li>
<h3>SHOES</h3>
</li>
<li>Women's Shoes</li>
<li>Men's Shoes</li>
<li>Shoe Accessories</li>
<li>Wholesale</li>
</ul>
<ul>
<li>
<h3>CONTACT</h3>
</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
<!--menu -->
<div class="loginForm">
<form action="">
<label for="name">USERNAME</label>
<input type="text" id="name">
<label for="pw">PASSWORD</label>
<input type="text" id="pw">
<button>SING IN</button>
</form>
</div><!-- loginForm -->
</div><!-- nav -->
<!-- ----------------------------------------------------------- -->
<div class="content">
<div class="product">
<div class="thumnail">
<img src="img/nike1.png" alt="">
</div>
<!--thumnail -->
<div class="title">
<p class="productName lineH">나이키 에어맥스 97 QS</p>
<ul class="summary">
<li class="price lineH">269,000원</li>
<li class="arrow"><img src="img/right-arrow.svg" alt=""></li>
</ul>
</div>
<!--title -->
<div class="detail">
<p>가벼운 아이콘을 만나다
나이키 에어맥스 97은 혁신적인 전장 나이키 에어 유닛으로 러닝계에 지각변동을 일으켰습니다. 그리고 이번 시즌, 나이키 에어 97 QS는 아이코닉한 모델의 컬러웨이를 정반대로
표현한 신선한 팔레트, 실버 & 골드 불렛 컬러로 오리지널 디자인을 새롭게 재해석합니다.</p>
<h4>Size</h4>
<ul class="size">
<li>240</li>
<li>245</li>
<li>250</li>
<li>255</li>
<li>260</li>
<li>265</li>
<li>270</li>
<li>275</li>
<li>280</li>
</ul>
<button>ADD TO CART</button>
</div><!-- detail -->
</div>
<!--product -->
<div class="product">
<div class="thumnail">
<img src="img/nike2.png" alt="">
</div>
<!--thumnail -->
<div class="title">
<p class="productName lineH">나이키 에어맥스 인비고</p>
<ul class="summary">
<li class="price lineH">54,500원</li>
<li class="arrow"><img src="img/right-arrow.svg" alt=""></li>
</ul>
</div>
<!--title -->
<div class="detail">
<p>통기성에 가벼움까지
전설적인 에어 맥스 95에서 영감을 받아 완성된 이 제품은 발포고무와 메쉬를 조합한 혁신적인 갑피로 업그레이드 되어 통기성과 편안함, 초경량 핏을 자랑합니다. 뒤꿈치의 맥스 에어
쿠셔닝으로 부드러운 완충력을 구축하는 한편 주요 부위의 강화 고무로 내구성을 효과적으로 제시합니다.</p>
<h4>Size</h4>
<ul class="size">
<li>240</li>
<li>245</li>
<li>250</li>
<li>255</li>
<li>260</li>
<li>265</li>
<li>270</li>
<li>275</li>
<li>280</li>
</ul>
<button>ADD TO CART</button>
</div><!-- detail -->
</div>
<!--product -->
<div class="product">
<div class="thumnail">
<img src="img/nike3.png" alt="">
</div>
<!--thumnail -->
<div class="title">
<p class="productName lineH">나이키 에어맥스 97 QS</p>
<ul class="summary">
<li class="price lineH">219,000원</li>
<li class="arrow"><img src="img/right-arrow.svg" alt=""></li>
</ul>
</div>
<!--title -->
<div class="detail">
<p>나이키 에어맥스 97은 혁신적인 전장 나이키 에어 유닛으로 러닝계에 지각변동을 일으켰습니다. 그리고 이번 시즌, 나이키 에어 97 QS는 아이코닉한 모델의 컬러웨이를 정반대로
표현한 신선한 팔레트, 실버 & 골드 불렛 컬러로 오리지널 디자인을 새롭게 재해석합니다.</p>
<h4>Size</h4>
<ul class="size">
<li>240</li>
<li>245</li>
<li>250</li>
<li>255</li>
<li>260</li>
<li>265</li>
<li>270</li>
<li>275</li>
<li>280</li>
</ul>
<button>ADD TO CART</button>
</div><!-- detail -->
</div>
<!--product -->
</div><!-- content -->
</body>
</html>스크립트를 한번 더 확인해보자
<script>
$(function () {
$('.menuBtn').click(function(){
$('.menu').slideToggle();
});
$('.loginBtn').click(function(){
$('.loginForm').slideToggle();
});
$('.arrow').click(function(){ //.arrow를 클릭하면
//$('.detail').slideToggle(); //.detail이 슬라이드토글 되게 해라.
//$(this).parents('.title').next().slideToggle(); //.arrow의 부모인 .title의 옆에 있는 애를 슬라이드 토글해라.
$('.detail').slideUp();//현재 보고있는 .detail을 슬라이드 업하고
$(this).parents('.title').next().stop().slideDown();//.arrow의 부모인 .title의 옆에 있는 애를 슬라이드 다운해서 보여줘라.
});
$('.size li').click(function(){ //.size li를 클릭하면
$('.size li').removeClass('on');//.size li에 on되어있는 애를 지워라
$(this).addClass('on');//.size li에 on을 보여줘라
$('button').removeClass('on');//button에 on을 지워라
$(this).closest('.size').next().addClass('on');//this=button의 가까이에 있고 .size의 옆에 있는 애를 on해라.
});
});
</script>'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| sticky 사용하기 (0) | 2019.10.15 |
|---|---|
| 제이쿼리 애니메이션 사용하기 (0) | 2019.10.11 |
| addClass, removeClass / setInterval / setTimeout이란? (0) | 2019.10.11 |
| 청기올려백기올려 setTimeout (0) | 2019.10.11 |
| 움직이는 막대바 만들기(progress bar) ex.2_setInterval (0) | 2019.10.11 |