[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

남양주개발자

·

2016. 10. 18. 22:18

728x90
반응형


Side Navigation(overlay)




이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다.


예시




HTML 시멘틱마크업




우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다.


CSS3





사이드 네비게이션 부분에 관련된 CSS 코드입니다.


Javascript






jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다.


전체 코드





완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

728x90
반응형
그리드형

이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다