슬라이드 메뉴(DrawerLayout Navigation) 적용하기

화면 구성에서 각 화면을 이동하거나, 기능 키들을 사이드 메뉴 영역에 표현하는 케이스가 많습니다.

 

메뉴 영역은 기능적으로는 간편하게 애플리케이션을 사용할 수 있도록 해주지만

보여지는 데이터 영역은 그만큼 줄어들 수 있습니다

 

현재 MAD 서비스에서 구현되고 있는 기능 중 OpenSource인 DrawFlow를 이용하여 TO-BE 아키텍처를 그릴 수 있는 기능을 제공하고 있는데 배치하려는 아이템을 메뉴 영역에 보여주어 실제 그릴 수 있는 영역에 제한을 받았었습니다

 

솔루션 아이콘을 배치할 때는 메뉴를 열고 아닐 때는 닫아 컨텐츠 영역을 넓힐 수 있는 방법으로 슬라이드 메뉴 기능을 적용하기로 했습니다

 

적용 예시 (출처 : https://devsnap.me/jquery-menus)

위 이미지에서와 같이 햄버거 버튼을 누르면 숨겨져있던 메뉴 바가 나오고 X 버튼을 누르면 다시 숨겨지도록 하여 공간을

효율적으로 사용할 수 있게 적용하였습니다.

 

기존 OpenSource 제공 화면

항상 메뉴가 화면에 배치되어 컨텐츠 공간을 추가적으로 가져갈 수 없음

 

적용 화면

• 메뉴 닫았을 때

메뉴가 차지하는 영역을 숨겨 그 부분도 컨텐츠 영역으로 확장 가능

• 메뉴 열었을 때

메뉴를 열어도 기존 컨텐츠 화면에는 영향 없이 사용 가능!!!

 

화면 크기에 제약이 많은 모바일 및 태블릿 환경에서는 많이 사용하는 Layout이지만 웹 상에서도 사용하면

많은 양의 컨텐츠를 한 화면에 보여줄 때 좋은 기능으로써 사용할 수 있습니다.

 

위에 적용된 코드는 사이트에 소개된 코드를 해당 기능에 맞게 수정하여 적용하였습니다

 

코드 참조 : https://codepen.io/flyingcar/pen/yKyVwB