팝업 사이드바를 갖고 있는 웹사이트들은 대체로 열려 있는 팝업 사이드바의 외부를 클릭하면 닫히게 해놓았습니다. 사용자가 느끼기에 그것이 직관적이라고 생각해서 누군가 개발했고 이후에 유행한 것 같습니다.
팝업 사이드바 열 때 -> 버튼 클릭
팝업 사이드바 닫을 때 -> 사이드바 외부 클릭
이렇게 작동하도록 한번 코드를 구현해보겠습니다. 제가 해본 방식 말고도 다양한 방법이 있을 수 있으니, 더 좋은 코드가 있다면 그것을 사용하셔도 좋습니다. 코딩이란 것은 그런 거니까요.
먼저 결과물을 보겠습니다.
버튼을 클릭하면 사이드바가 열리고, 사이드바 외부 영역을 클릭하면 닫힙니다. 이것을 만들기 위해서는 두 개의 문서가 필요한데, 하나는 html 파일이고, 하나는 css 파일입니다. 또한 jquery, font awesome을 의존하는 코드이기 때문에, jquery, font awesome을 html 문서의 head 요소 안에 넣어줘야 합니다. 참고로 css는 웹페이지를 예쁘게 꾸미기 위해서 필요하고, jquery는 동적인 기능을 주기 위해 필요합니다. 그리고 font awesome은 사이드바를 여는 버튼 아이콘을 글자처럼 사용하고 싶은 경우에 필요합니다. font awesome에 관한 자세한 내용은 예전에 작성한 글이 있으니 참고하시기 바랍니다.
일단 전체 코드를 보면서 그 중에서 좀 더 살펴볼 만한 부분만 이야기 드리겠습니다.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS -->
<link rel="stylesheet" href="./style.css">
<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- 폰트어썸 -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
crossorigin="anonymous">
</head>
<body>
<header>
<i class="fas fa-bars" id="OpenBtn"></i>
<span>bskyvision</span>
</header>
<div id="sidebar">
<h1>Hello World</h1>
<h2>Welcome to bskyvision</h2>
</div>
<script>
$(document).ready(function(){
var target = $("#sidebar");
// 버튼을 클릭하면 사이드바 열림
$(document).on("click", "#OpenBtn", function (e){
target.show();
target.addClass('emphasized');
});
// 사이드바 외부를 클릭하면 사이드바 닫힘
$(document).mouseup(function (e){
if(target.has(e.target).length==0) {
target.hide();
target.removeClass('emphasized');
}
});
});
</script>
</body>
</html>
|
cs |
style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
body {
margin: 0px;
}
header {
height: 50px;
width: 100%;
background-color: grey;
color: white;
display: flex;
align-items: center;
column-gap: 10px;
font-size: x-large;
}
#sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
background-color: hotpink;
color: white;
width: 300px;
height: 100vh;
text-align: center;
}
.emphasized {
box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px;
}
|
cs |
우선 위 코드가 제대로 작동하는지 그대로 복사붙여넣기 해서 실행해보세요. 되셨다면, 위 코드를 각자의 필요에 맞게 수정하시면 됩니다.
역시 위 코드에서 가장 핵심적인 부분은 jquery를 사용하는 javascript 코드블럭입니다. 이 부분은 SILVERTORY님께서 포스팅하신 내용을 참고했습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script>
$(document).ready(function(){
var target = $("#sidebar");
// 버튼을 클릭하면 사이드바 열림
$(document).on("click", "#OpenBtn", function (e){
target.show();
target.addClass('emphasized');
});
// 사이드바 외부를 클릭하면 사이드바 닫힘
$(document).mouseup(function (e){
if(target.has(e.target).length==0) {
target.hide();
target.removeClass('emphasized');
}
});
});
</script>
|
cs |
이 코드블럭을 간단히 설명해보겠습니다.
1. 아이디가 OpenBtn인 것을 클릭하면, sidebar를 보이게 하고, emphasized라는 클래스 추가해줘.
2. 클릭한 것의 길이가 0이면, 즉 아무 요소도 아니면, sidebar를 닫아줘. 그리고 emphasized라는 클래스를 제거해줘.
참고로 emphasized 클래스에는 사이드바가 보여질 때 다른 부분은 어둡게 되면서 사이드바가 돋보이게 한 내용이 담겨있습니다. box-shadow를 사용해서 사이드바 밖에 그림자를 아주 길고 크게 넣어준 것입니다.
혹시 이해가 되지 않는 부분 있다면, 댓글로 질문 남겨주세요. 그리고 혹시 제 이해와 설명 중 부족한 점이 있다면 한 수 가르쳐주시면 감사하겠습니다.
bskyvision의 추천글
'Dev > javascript' 카테고리의 다른 글
| [javascript] 몫과 나머지 구하기 (1) | 2021.05.22 |
|---|---|
| [jquery] 아주 유용하게 쓰이는 append() 메서드 사용법 (2) | 2021.05.20 |
| [javascript] 문자열을 정수형 또는 실수형으로 변환하려면, parseInt(), parseFloat() (2) | 2021.05.19 |
| [javascript] 문자열과 배열의 길이를 알려주는 length 속성 (0) | 2021.03.26 |
| [javascript] Math 객체를 이용해서 반올림, 올림, 내림하기 (0) | 2020.12.17 |
| [javascript] javascript의 for in/for of 와 python의 for in 비교 (3) | 2020.12.15 |
| [javascript] textarea에 기록된 내용 지우기 (6) | 2020.12.14 |
| [jquery] css() 메서드로 css 속성 추가하기 (6) | 2020.12.12 |