반응형
메뉴바가 메뉴 아이콘을 클릭하면 슬라이더 기능으로 튀어나오고 닫기 버튼을 누르면 다시 들어가는 슬라이드 메뉴를 간단하게 구성해보았다.
HTML
<body>
<div class="VirtualView">
<div class="hideMenuBody" id="hideMenuBodyId">
<div>HOME</div>
<div>Menu 2</div>
<div>Menu 3</div>
<div>Menu 4</div>
<div>Menu 5</div>
<div onclick="closeLeftMenu(); return false;">Close</div>
</div>
<div class="circleBt" id="circleBt" onclick="showLeftMenu(); return false;">
<i class= "icon-align-justify"></i></div>
</div>
</body>
- 메뉴바를 구성하는 문서중 Close는 닫기 버튼이므로 onclick="closeLetfMenu();라는 함수를 일단 선언해 주었다. 추후 자바스크립트 부분에서 조정할 수 있다.
- 또한 메뉴바를 열기전 메뉴 클릭 버튼에는 onclick="showLeftMenu();라는 함수를 선언해주어 자바스크립트에서 조정하도록 해두었다.
CSS
<style>
body{
margin: -8px;
background-color: #ebe5e7;
}
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Varela+Round&display=swap');
/*meun*/
.VirtualView {
width: 400px;
height: 1530.35px;
overflow: hidden;
position: relative;
}
.hideMenuBody {
margin-right: 10px;
width: 250px;
height: 100%;
background-color: #ffffff;
padding-top: 100px;
transition: transform 600ms;
transform: translate(-250px, 0px);
-ms-transition: -ms-transform 600ms;
-webkit-transition: -webkit-transform 600ms;
-moz-transition: -moz-transform 600ms;
-o-transition: -o-transform 600ms;
-ms-transform: translate(-250px, 0px);
-webkit-transform: translate(-250px, 0px);
-moz-transform: translate(-250px, 0px);
-o-transform: translate(-250px, 0px);
}
.hideMenuBody > div {
font-family: 'Varela Round', sans-serif;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
width: 250px;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
color: #716f6f;
cursor: pointer;
margin-bottom: 1px;
}
.hideMenuBody > div:hover {
background-color: #efa0a0;
}
.circleBt {
font-size:30px;
width: 100px;
height: 1500px;
position: absolute;
bottom: 10px;
left: 23px;
cursor: pointer;
color: #efa0a0;
}
.circleBt:hover {
}
</style>
- CSS 부분은 메뉴가 움직이는 슬라이드 기능 구현을 담당하고 있다.
- CSS 부분은 컬러와 폰트에 신경을 조금 써서 비율과 시각에 대해 알맞게 디자인해보았다.
- transtorm 기능과 transition 기능을 사용하여 메뉴바가 움직이는 시간과 정확한 위치 또한 설정했다. 메뉴바의 px와 transform 기능으로 움직이는 px위치 설정 또한 동일하게 해야한다.
Javascript
<script>
function showLeftMenu(){
var circleBtObj = document.getElementById('circleBt');
var leftMenuObj = document.getElementById('hideMenuBodyId');
circleBtObj.style['display'] = "none";
leftMenuObj.style['transform'] = "translate(0px, 0px)";
leftMenuObj.style['msTransform'] = "translate(0px, 0px)";
leftMenuObj.style['mozTransform'] = "translate(0px, 0px)";
leftMenuObj.style['webkitTransform'] = "translate(0px, 0px)";
leftMenuObj.style['oTransform'] = "translate(0px, 0px)";
}
function closeLeftMenu() {
var circleBtObj = document.getElementById('circleBt');
var leftMenuObj = document.getElementById('hideMenuBodyId');
circleBtObj.style['display'] = "block";
leftMenuObj.removeAttribute("style");
}
</script>
- 자바스크립트에서는 슬라이더 기능보다는 메뉴 클릭 버튼의 타이밍에 따른 존재 유무를 설정하는 역할을 하고 있다. 그리고 클릭 이벤트 또한 담당하고 있다.
- 메뉴를 슬라이드해서 튀어나올때 자동으로 클릭 버튼은 사라지고 닫기 버튼을 눌러 다시 메뉴바를 닫으면 다시 메뉴 버튼이 등장하는 식의 코드를 작성하였다.
- showLeftMenu() 함수는 메뉴 버튼의 존재유무를 조정하고 있으며 closeLeftMenu() 함수는 메뉴바의 닫기 버튼을 눌렀을 때 다시 메뉴 클릭 버튼이 등장하도록 조정하고 있다.
- .removeAttribute 메소드를 사용하여 다시 메뉴바가 닫혔을때 메뉴 클릭 버튼을 사라지게 한 treanslate 기능을 담고 있는 style 요소를 삭제시켜 다시 메뉴 클릭 버튼을 등장시키게 하는 원리이다.
반응형
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| Javascript - Drag and Drop 기본 구현하기 (0) | 2020.12.09 |
|---|---|
| Javascript - 모달창 만들기 기본 (0) | 2020.12.01 |
| Javascript 네트워크 통신 - JSON (0) | 2020.11.27 |
| Javascript 네트워크 통신 - Ajax (0) | 2020.11.27 |
| Javascript 이벤트 타입 - jQuery on API 사용법 (0) | 2020.11.26 |
댓글