티스토리 뷰

HTML , CSS , JS

사이드바와 checkbox 를 이용한 페이지 만들기2

플레지 2019. 6. 2. 13:12

오늘은  햄버거 버튼을 누르면 왼쪽에서 사이드바가 나오면서 햄버거 버튼도 동시에 움직이도록 하는 페이지를 만들어 보겠습니다. 

 

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
 
<input type="checkbox" id="chkbox">
 
<h1>  Age never to comeback </h1>
 
 
<label for="chkbox" class="span-area">
        <span>    </span>    
        <span>    </span>
        <span>    </span>
</label>
 
<div class="sidebar">
    <ul>
        <li> <a href="#"> Home </a> </li>
        <li> <a href="#"> About </a> </li>
        <li> <a href="#"> Address </a> </li>
        <li> <a href="#"> Contact </a> </li>
        <li> <a href="#"> etc </a> </li>
    </ul>
</div>
 
 
  </body>
</html>
  

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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
*{
    padding: 0;
    margin: 0;
}
 
 
h1{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;
    color: #ffffff;
    padding: 10% 0 ;
}
 
 
body{
 
background-image: url("cat.jpg");
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
-webkit-background-size:cover; 
position: relative;
 
}
 
.sidebar{
    width: 300px;
    background-color:crimson;
    height: 100vh;
    top: 0;
    left: -300px;
    position: absolute;
    transition: all 0.5s; 
}
 
    .sidebar ul {
        padding: 20% 40px;
        list-style: none;
        justify-content: center;
        align-items: center;
    }
    
    
    .sidebar li {
        padding: 0px;
        padding-top: 10px;
        border-bottom: 2px solid aliceblue;
    }
 
    
    .sidebar a {
     text-decoration: none;
     font-size: 30px;
     font-weight: bold;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     color: aliceblue; 
    }
 
 
 
 
 
 
 
/*버튼 구간입니다.*/
input[id="chkbox"]{
    display: none;
}
 
.span-area{
    position: absolute;
    background-color:transparent;
    width: 50px;
    height: 50px;
    top: 100px;
    left: 0;
    transition: all 0.5s;
}
 
.span-area span {
    position: absolute;
    height: 5px;
    width: 50px;
    background-color: crimson;
    left: 0;
    transition: all 0.5s;
}
 
.span-area span:nth-child(1) {
    top:0;
}
 
.span-area span:nth-child(2) {
    top:50%;
    transform: translateY(-50%);
}
 
.span-area span:nth-child(3) {
    bottom: 0;
}
 
 
    top:50%;
    transform: translateY(-50%) rotate(45deg);
}
 
opacity: 0;
}
 
 
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
 
 
input[id="chkbox"]:checked~.span-area {
left: 300px;
}
 
 
input[id="chkbox"]:checked~.sidebar {
 
left: 0px;
}
 
 
 
 
 
  

완성 링크 : https://qwe--kind.repl.co/

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

Hover 효과를 이용한 진격의거인 인물페이지 만들기  (0) 2019.06.07
Hover 를 이용한 칵테일 느낌 페이지 만들기  (0) 2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기  (0) 2019.06.01
sticky 를 이용한 웹 소개 페이지 만들기  (0) 2019.06.01
버튼을 이용한 페이지 느낌 내기  (0) 2019.05.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함