[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content)

---

이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다.

예시

HTML 시멘틱마크업

---

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

CSS3

---

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

Javascript

---

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

전체 코드

---

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