-
초보자를 위한 화살표로 메뉴펼치기 구현(화살표 모양 토글 구현)Study/JavaScript 2023. 3. 2. 23:46반응형
현재 프로젝트를 구현 하는 부분중에 화살표 모양으로 왼쪽 메뉴바를 펼치는 부분을 구현 해야 되었음.
아래와 같이 구현 해야함.
*메뉴펼치기전
*메뉴펼치기후
구현하는 방법에는 직접 화살표 아이콘을 사용하여 눌렀을때 화살표 아이콘을 바꿔줘도 되지만
나는 transform 속성 과 board 속성을 이용하여 구현 하였음
어떻게??
1.html 부분
<body> <div class="leftDiv"> <div class="leftInner"> <div id="arrow"></div> <div id="text1" onclick="openDiv()">조직도</div> </div> <div id=leftInner2 style="display:none"> <div> <b>(1)영업부</b> <b >(2)경영지원</b> </div> </div> </div> </body>특이할점은 없지만 클릭할 부분과 onclick에 의해 펼쳐졌다가 없어질 부분을 div로 구분해 놓아야 됨
id=arrow 로 설정한 div가 화살표가 있는 부분
2.CSS 부분
#arrow{ position:relative; top:10px; width: 10px; height: 10px; border-top: 2px solid black; border-left: 2px solid black; transform:rotate(45deg); } #text1{ position: relative; left: 20px; bottom: 10px; }여기서 젤 중요한 부분이 #arrow 설정한 이부분
먼저, width,hight 크기를 설정해 줘야 하는데 이부분이 화살표의 크기가됨
두번째, border-top과 border-left에 선을 보이게끔 설정 하므로써 화살표가 눈에 보이게끔 설정이됨
마지막으로 transform속성을 이용하여 rotate하여 화살표를 원하는 방향으로 설정 할 수 있음.
3.JavaScript 부분
function openDiv() { if(document.getElementById('leftInner2').style.display==='none'){ document.getElementById('leftInner2').style.display='block' document.getElementById('arrow').style.transform='rotate(-135deg)' }else{ document.getElementById('leftInner2').style.display='none' document.getElementById('arrow').style.transform='rotate(45deg)' } }"조직도"라는 글자에 onclick 이벤트를 걸어서 메뉴를 펼치고 닫기를 할때 위와 같이 style에 display속성을 none과 block으로 조절하여 펼치고 열기를 했듯이 화살표도 위에 style에 transform속성을 이용하여 각도를 조절해 주면
메뉴를 펼치고 닫을때 화살표 모양이 동적으로 움직일 수 있다.
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 Ajax통신으로 메뉴불러오기_(2) (0) 2023.03.09 초보자를 위한 자바스크립트로 프린트 기능 구현하기 (1) 2023.03.03 초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기) (0) 2023.02.12 초보자를 위한 캔버스(Canvas)로 그림 그리기 방법 (0) 2023.02.07 초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기) (1) 2023.01.18