728x90
반응형
Side Navigation
안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다.
예시
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 - full-width side navigation 제작(풀 사이드 네비게이션) (1) | 2016.10.18 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
