Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 스크롤
- IR기법
- 웹 접근성
- mark up
- 이쁜 웹디자인
- 배경이 이쁜 웹디자인
- 유니크
- 3D
- 특이한 웹디자인
- jquery 웹디자인
- 시맨틱
- 일러스트
- 사람 일러스트
- 깔끔한 웹디자인
- 귀여운 웹디자인
- 우주 웹디자인
- 웹사이트
- 접근성
- jQuery
- Image Replacement
- 이미지 리플레이스먼트
- 디자인
- 스크롤 웹사이트
- 스크롤 웹디자인
- 마우스오버
- 시맨틱 마크업
- 웹디자인
- 마크업
- 신박한 웹디자인
- 신박한 디자인
Archives
- Today
- Total
Play Ground
[모바일웹] 메인메뉴를 터치 슬라이드 방식으로 만들기 본문
네이버(http://m.naver.com) 이나 다음(http://m.daum.net)의 모바일버전을 보면
메인메뉴 영역을 스와이프해서 전체 메뉴를 훑을 수 있게 만들어졌다.
이 기능을 만들어 보고자 개발자 모드로 확인하였더니 css의 transform, transition 등을 이용해서 만든 것으로 보였다.
그래서 나는 trans관련 css와 함께 스와이프 동작을 인식해야하므로 jquery의 touchstart, touchmove, touchend를 이용해서 만들었다.
참고로 touchstart, touchmove, touchend는 마우스로는 작동이 안되고 핸드폰에서만 작동하는 것을 확인하였다.
'Programming > JavaScript/JQuery' 카테고리의 다른 글
url(path)을 비교하여 메뉴 active 하기 (0) | 2018.08.13 |
---|---|
iframe youtube 재생, 일시정지, 중지 제어 (0) | 2017.07.27 |
동적으로 생성된 태그에 이벤트 주기! (0) | 2016.03.09 |
웹에 파워포인트(PPT) 띄우기 (0) | 2015.12.28 |
[jquery] 10가지 태그 클라우드 플러그인 (0) | 2013.03.13 |
[jquery] jquery모음 사이트 (0) | 2013.03.12 |
[jquery] 퀵메뉴 (0) | 2013.03.05 |
[jquery] 마우스오버로 커졌다가 작아졌다 (0) | 2013.03.05 |