728x90
반응형
Side Navigation(full-width)
이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다.
예시
HTML 시멘틱마크업
우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다.
CSS3
사이드 네비게이션 부분에 관련된 CSS 코드입니다.
Javascript
jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다.
전체 코드
완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.
728x90
반응형
그리드형
'개발 > UI개발' 카테고리의 다른 글
| [UI 개발] responsive image gallery(반응형 이미지갤러리) (0) | 2016.12.10 |
|---|---|
| [UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작) (5) | 2016.10.18 |
| [UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션) (1) | 2016.10.18 |
| [UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션) (0) | 2016.10.18 |
| [UI 개발] css3 - side navigation 제작(사이드 네비게이션) (1) | 2016.10.18 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
