Menu
모바일 Page의 메뉴 기능은 Dialog, Grid, List, Collapsible 의 기능을 활용하여 구현할 수 있다.
Dialog 형식
링크에 data-rel="dialog" 및 data-transition="slide, slideup, slidedown, pop, fade, flip, turn, flow, slidefade" 속성을 추가하여 다이얼 로그의 효과적인 표출 효과를 사용 할 수 있다.
※dialog 형식의 메뉴는 UX Dialog Component 유의 사항을 참고한다.
- <ul data-role="listview" data-inset="true">
- <li data-role="list-divider">Menu</li>
- <li><a href="#menu1" data-rel="dialog" data-transition="slide">표준프레임워크 개요</a></li>
- <li><a href="#menu2" data-rel="dialog" data-transition="slidedown">다운로드</a></li>
- <li><a href="#menu3" data-rel="dialog" data-transition="slideup">가이드</a></li>
- <li><a href="#menu4" data-rel="dialog" data-transition="pop">자료실</a></li>
- <li><a href="#menu5" data-rel="dialog" data-transition="fade">개발자 지원</a></li>
- <li><a href="#menu6" data-rel="dialog" data-transition="flip">오픈 커뮤니티</a></li>
- </ul>
Grid 형식
비슷한 레벨의 콘텐츠를 아이콘화 하여 여러 개 배치하여 사용하며, 메뉴 정렬 순서는 좌측에서 우측, 위에서 아래 방향으로 배치한다.
- <div class="ui-grid-b">
- <div class="ui-block-a"><a href="" data-role="button" data-theme="a">개요</a></div>
- <div class="ui-block-b"><a href="" data-role="button" data-theme="b">다운로드</a></div>
- <div class="ui-block-c"><a href="" data-role="button" data-theme="c">가이드</a></div>
- <div class="ui-block-a"><a href="" data-role="button" data-theme="d">자료실</a></div>
- <div class="ui-block-b"><a href="" data-role="button" data-theme="e">개발자</a></div>
- <div class="ui-block-c"><a href="" data-role="button" data-theme="g">커뮤니티</a></div>
- </div>