#2 마우스오버 이벤트를 이용하여 메뉴 슬라이더를 만들어보자.
2020. 5. 14. 16:01ㆍJavascript/응용
1. 완성본
이번 강의에서 만들 완성본 영상입니다.
2. HTML, CSS
이번에는 스케치 없이도 바로 구조가 어떻게되있는지 알 수 있기 때문에 따로 하지 않겠습니다.
그래서 먼저 HTML과 CSS를 이용해서 다음과 같은 메뉴 디자인만 만들어보려고 합니다.
코드는 다음과 같습니다(CSS 헷갈리시는 분들을 위해 약간의 주석을 달아놓았습니다.).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="menu slide" id="jsMenu">
<h1>Menu Slide</h1>
<ul class="menu__list">
<li class="item">Menu 1</li>
<li class="item">Menu 2</li>
<li class="item">Menu 3</li>
<li class="item">Menu 4</li>
<li class="item">Menu 5</li>
<li class="item">Menu 6</li>
</ul>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>CSS
// 전체 태그에 box-sizing을 적용합니다. box-sizing에 border 박스를 하면
// 전체 픽셀을 유지한 채로 padding이나 border의 크기만을 늘릴 수 있습니다.
// 예를 들면, 가로 300px, 세로, 300px의 블록이 있고, border(테두리)에 1px의 크기를 주면
// 블록의 전체 크기는 테두리를 포함해 가로 301px, 세로 301px가 되지요.
// 하지만 box-sizing:border-box를 적용하면,
// 가로 300px, 세로 300px을 그대로 유지한채로 테두리가 부여됩니다.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
// ex) <div class = "menu">, <div class = "lala menu">에 적용
// position:absolute, .menu position:relative를 따로 설정해 준 부모요소가 없기 때문에
// body를 기준으로 위치를 조정할 수 있습니다.
// 저는 메뉴가 화면의 왼쪽 끝에 완전히 붙게하기 위하여 left:0, top:0의 위치를 부여했습니다.
.menu {
position: absolute;
width: 300px;
height: 100%;
top: 0;
left: 0px;
background-color: black;
transition: 0.3s;
}
// <div class = "menu"> <h1></h1> </div>
// 의 경우에만 적용
.menu h1 {
color: white;
text-align: center;
}
// <div class = "menu">
// <div class = "menu__list">
// </div>
// </div>
// 에만 적용 가능, div태그가 아니어도 클래스 이름만 동일하면 적용!
.menu .menu__list {
width: 100%;
padding: 15px 0;
border-width: 1px 0;
border-style: solid;
border-color: rgb(121, 121, 121);
}
// <div class = "menu">
// <div class = "menu__list">
// <div class = "item">
// <div class = "item">
// </div>
// </div>
//의 경우에서 모든 item에 적용
.menu .menu__list .item {
font-size: 20px;
font-weight: 600;
color: white;
margin-bottom: 15px;
text-align: center;
}
// 마지막 item에만 적용
.menu .menu__list .item:last-child {
margin-bottom: 0px;
}
3. 자바스크립트
디자인을 만들었으니, 동작을 구현해줄 때가 왔습니다.
코드는 다음과 같습니다.
1. 먼저, css에서 .menu 부분의 left를 0px에서 -300px로 바꾸어주시기 바랍니다.
.menu {
left: -300px;
}왜냐하면, 우리는 웹에 접속하고 커서를 끝으로 이동하고서 메뉴를 보기 원하지
접속하자마자 바로 메뉴를 보기 원하지 않기 때문입니다.
2. 그리고 js코드를 다음과 같이 입력합니다.
const menu = document.getElementById("jsMenu");
// .menu의 css에서 left의 값을 -300으로 설정해줍니다.
function slideDown() {
menu.style.left = "-300px";
}
// .menu의 css에서 left의 값을 0으로 설정해줍니다.
function slideUp() {
menu.style.left = "0";
}
function handleMouseMove(event) {
// console.log(event)를 이용하여
// clientX 속성과 screenX 속성이 어떻게 다른지 파악하시는 것이 중요합니다.
let clientX = event.clientX;
// 커서가 0이상 10안에 있는 clientX 범위에 위치할 때
if (clientX >= 0 && clientX <= 10) {
slideUp();
} else if (clientX > 310) {
slideDown();
}
}
function init() {
document.addEventListener("mousemove", handleMouseMove);
}
init();
'Javascript > 응용' 카테고리의 다른 글
| [NOJS] 3D 캐러셀 슬라이드 만들기 (0) | 2020.12.13 |
|---|---|
| [JS] 반응형 네비게이션 바 만들기 (2) | 2020.06.16 |
| [JS] 계산기 만들기 (0) | 2020.06.14 |
| [JS] 자바스크립트로 아날로그 시계 만들기 (0) | 2020.06.07 |
| #1 버튼 눌러서 Modal창 열고 닫기 (0) | 2020.05.11 |