옆에서 나타나는 메뉴
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin:0; padding:0;}
#wrap{
width:600px;
height: 650px;
border: 10px solid black;
margin: 0 auto;
overflow: hidden;
}
#top_wrap{
width: 100%;
height: 450px;
background-color: tan;
}
#bottom_wrap{
width: 100%;
height: 200px;
background-color: greenyellow;
}
input{
display: none;
}
#btn_label{
width: 50px;
height: 50px;
background-color: crimson;
color: gold;
display: block;
/*=>label태그는 inline요소이기 때문에
크기값을 넣어주기 위해서는 block요소로 바꾸어줘야만 함*/
font:900 25px/50px '';
/**font축약형
font:글자두께 글자크기/line-height값 '글씨체';
=>글씨체 입력안해도 ''를 적어두기
=>홈페이지 전체 글씨체를 설정했을 경우 사용하지 않는 것이 좋음*/
text-align: center;
}
#move_box{
width: 600px;
height: 400px;
background-color: salmon;
position: relative;
left: -600px;
transition-duration: 1s;
/*=>움직임 지속시간*/
}
#btn:checked~#move_box{
left: 0;
}
/*=>실질적으로 checked된 객체는 input 태그 이므로
=>선택자를 input태그 잡아줘야함*/
</style>
</head>
<body>
<div id="wrap">
<div id="top_wrap">
<input type="checkbox" id="btn"/>
<label for="btn" id="btn_label">=</label>
<div id="move_box">
<h1>옆에서 움직임</h1>
</div>
</div>
<div id="bottom_wrap">
<h1>그냥 박스</h1>
</div>
</div>
</body>
</html>위에서 나타나는 메뉴
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin:0; padding:0;}
#wrap{
width: 600px;
height: 650px;
border: 10px solid black;
margin: 0 auto;
}
#top_wrap{
width:100%;
height: 450px;
background-color: pink;
}
#btn{
display: none;
}
#btn_label{
width: 50px;
height: 50px;
background-color: skyblue;
display: block;
color: white;
font: 900 25px/50px '';
text-align: center;
}
#move_box{
width: 100%;
/*height: 400px;
=>자식의 크기 값에 맞춰주기 때문에 높이값 없애면 자식 높이만큼 나옴*/
height: 0;
background-color: lightblue;
/*display: none;
transition-duration: 1s;
=>display:none/block은 transition-duration이 적용되지 않음*/
overflow: hidden;
/*=>넘치는 자식(h1)을 숨겨주세요*/
transition-duration: 1s;
/*=>부모의 높이값을 0으로 만들어준다
=>넘치는 자식(h1)을 overflow:hiddin;으로 가려준다*/
}
#btn:checked~#move_box{
display: block;
height: 400px;
}
#bottom_wrap{
width: 100%;
height: 200px;
background-color: salmon;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top_wrap">
<input type="checkbox" id="btn"/>
<label for="btn" id="btn_label">=</label>
<div id="move_box">
<h1>위에서 움직임</h1>
</div>
</div>
<div id="bottom_wrap">
<h1>그냥 박스</h1>
</div>
</div>
</body>
</html>
코딩 기록 블로그