티스토리 뷰

HTML , CSS , JS

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

플레지 2019. 6. 1. 23:20

 

여러 사이트에서는 체크박스를 누르면 햄버거 버튼이 X로 변하면서 사이드바가 나오는 것을 볼 수 있습니다.

오늘은 이러한 기능을 가진 페이지를 만들어 보겠습니다.

<사진 출처 : https://pixabay.com/ko/photos/%EB%B8%94%EB%A3%A8-%EB%8D%B0%EB%8B%98-%EC%9E%AC%ED%82%B7-%EC%9D%98%EB%A5%98-%EC%9C%A0%ED%96%89-2564660/>

 

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
<!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">
 
 
        <header>
            <h2> This is me</h2>
 
                <ul>
                    <li><a href="#"> Home </a> </li>
                    <li><a href="#"> About </a> </li>
                    <li><a href="#"> Group </a> </li>
                    <li><a href="#"> Age </a> </li>
                    <li><a href="#"> Contact </a> </li>
                </ul>
 
                <label for="chkbox" class="la">
                    <span> </span>
                    <span> </span>
                    <span> </span>
                </label>
        </header>
 
    <div class="contents-area">
        <div class="text-area">
            <p>
                In order to make ARIN Meetings the best they can be, we need the support of organizations like yours! We’re seeking sponsors for our upcoming meetings in Austin, Lousiville and Seattle. Here’s a look at the benefits of sponsoring an ARIN meeting
            </p>
        </div> <!-- text-area  -->
 
        <div class="sidebar"> </div>
 
    </div> <!-- contents-area -->
 
 
<footer>
    <p>             Champion guides for the League of Legends champion Teemo. Created and rated by players, search through some of the best builds to increase your game and dominate the field of battle.</p>
</footer>
 
    </body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

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
*{
    padding: 0;
    margin: 0;
}
 
 
header{
    background-color: #666;
        text-align: center;
        position: relative;
}
 
header h2{
    font-size: 50px;
 
}
header ul{
    display: inline-block;
}
 
header ul li {
    display: inline-block;
    padding: 10px;
}
 
 
header ul li a {
text-decoration: none;
color: #222;
font-weight: bold;
border-bottom: 2px solid #222;
font-size: 20px;
 
}
 
input[id="chkbox"]{
    display: none;
}
 
.contents-area{
    background-image: url(blue.jpg);
    background-size: cover;
    background-position: center center;
    height: 80vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.contents-area p{
    font-size: 30px;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    padding:  20% 200px;
 
}
 
footer{
    position: absolute;
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 20px 100px;
}
 
 
/*  버튼 구역 */
 
.la{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    bottom: 0;
    cursor: 0;
 
}
 
.la span{
    height: 10px;
    width : 50px;
    background-color: #222;
    position: absolute;
    display: block;
    transition:  all 0.5s;
}
 
.la span:nth-child(1){
top:0;
}
.la span:nth-child(2){
    top:50%;
    transform: translateY(-50%);
}
 
.la span:nth-child(3){
bottom:0;
}
 
 
 
input[id="chkbox"]:checked~header .la span:nth-child(1){
    top:50%;
    transform: translateY(-50%) rotate(45deg);
}
input[id="chkbox"]:checked~header .la span:nth-child(2){
opacity: 0;
}
input[id="chkbox"]:checked~header .la span:nth-child(3){
bottom:50%;
    transform: translateY(50%) rotate(-45deg);
}
input[id="chkbox"]:checked~.contents-area .sidebar{
    right: 0;
}
 
 
 
 
.sidebar{
background-color:  rgb(141, 102, 102);
position: absolute;
height: 80vh;
width: 300px;
top: 0;
right: -300px;
transition: all 0.5s;
}
 
 
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

*사이드바를 right:-300px; 로 설정했을 때 width 범위를 벗어나면서 사이드바가 오른쪽으로 화면 밖으로 튀어나와서 조금 고민을 했었다. 이 부분은 contents-area에서  overflow : hidden을 이용하여 해결해주었다.

 

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

저작자표시

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

Hover 를 이용한 칵테일 느낌 페이지 만들기  (0) 2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기2  (0) 2019.06.02
sticky 를 이용한 웹 소개 페이지 만들기  (0) 2019.06.01
버튼을 이용한 페이지 느낌 내기  (0) 2019.05.22
border-radius-property  (0) 2019.05.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함