이것은 "선택"을 완벽하게 대체하여 드롭다운 메뉴의 효과를 얻을 수 있는 절묘한 다단계 드롭다운 메뉴 미화입니다. 또한 대기 효과 로딩 및 계층적 분류 표시와 함께 다단계 메뉴도 지원합니다. 코드 복사 코드는 다음과 같습니다. http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > http://www.w3.org/1999/xhtml" xml:lang="ko"> 장섬유그룹 연구실 <br> 본문 { 글꼴 크기:62.5%; 여백:0; 패딩:0; }<br> #menuLog { 글꼴 크기:1.4em; 여백:20px; }<br> .hidden { 위치:절대; 상단:0; 왼쪽:-9999px; 너비:1px; 높이:1px; 오버플로:숨김; }<br> .fg-버튼 { 지우기:왼쪽; 여백:0 4px 40px 450px; 패딩: .4em 1em; 텍스트 장식:없음 !중요; 커서:포인터; 위치: 상대; 텍스트 정렬: 중앙; 줌: 1; }<br> .fg-버튼 .ui-icon { 위치: 절대; 상단: 50%; 여백 상단: -8px; 왼쪽: 50%; 여백 왼쪽: -8px; }<br> a.fg-버튼 { float:left; }<br> 버튼.fg-버튼 { 너비:자동; 오버플로:표시; } /* IE에서 추가 버튼 너비를 제거합니다 */<br> .fg-버튼-아이콘-왼쪽 { 패딩-왼쪽: 2.1em; }<br> .fg-버튼-아이콘-오른쪽 { 패딩-오른쪽: 2.1em; }<br> .fg-button-icon-left .ui-icon { 오른쪽: 자동; 왼쪽: .2em; 왼쪽 여백: 0; }<br> .fg-button-icon-right .ui-icon { 왼쪽: 자동; 오른쪽: .2em; 왼쪽 여백: 0; }<br> .fg-버튼-아이콘-솔로 { 디스플레이:블록; 너비:8px; 텍스트 들여쓰기: -9999px; } /* 솔로 아이콘 버튼에는 텍스트 들여쓰기가 작동하려면 블록 속성이 있어야 합니다 */<br> .fg-button.ui-state-loading .ui-icon { 배경: url(spinner_bar.gif) 반복 없음 0 0; }<br> </스타일><br> <!-- IE 6의 스타일 예외 --><br> <!--[IE 6의 경우]><br> <style type="text/css"><br> .fg-menu-ipod .fg-menu li { 너비: 95%; }<br> .fg-menu-ipod .ui-widget-content { 테두리:0; }<br> </스타일><br> <![endif]--><br> <스크립트 유형="텍스트/자바스크립트"> <br> $(함수(){<br> // 버튼<br> $('.fg-버튼').hover(<br> function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },<br> function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }<br> );<br> // 메뉴 <br> $('#Flat').menu({ <br> content: $('#Flat').next().html(), // 이 페이지에서 콘텐츠 가져오기<br> 쇼속도: 400 <br> });<br> $('#hierarchy').menu({<br> 내용: $('#hierarchy').next().html(),<br> crushDefaultText: ' '<br> });<br> $('#hierarchybreadcrumb').menu({<br> 콘텐츠: $('#hierarchybreadcrumb').next().html(),<br> backLink: 거짓<br> });<br> // 또는 외부 소스에서<br> $.get('menuContent.html', function(data){ // 다른 페이지에서 콘텐츠 가져오기<br> $('#flyout').menu({ content: data, flyOut: true });<br> });<br> });<br> <br> <!-- 테마 전환 버튼 --><br> <script type="text/javascript" src="js/themeswitchertool"></script><br> <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 300px;" />').appendTo('body').themeswitcher(); }); </script><br> </head><br> <body><br> <p id="menuLog">You chose: <span id="menuSelection"></span></p><br> <a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a><br> <div id="search-engines" class="hidden"><br> <ul><br> <li><a href="#">Google</a></li><br> <li><a href="#">Yahoo</a></li><br> <li><a href="#">MSN</a></li><br> <li><a href="#">Ask</a></li><br> <li><a href="#">AOL</a></li><br> </ul><br> </div><br> <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout">< ;span class="ui-icon ui-icon-triangle-1-s"></span>플라이아웃 메뉴</a> <a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"> <span class="ui-icon ui-icon-triangle-1-s"></span>ipod 스타일 메뉴</a><br> <div id="news-items" class="hidden"><br> <ul> <br> <li><a href="#">속보</a><br> <ul> <br> <li><a href="#">엔터테인먼트</a></li><br> <li><a href="#">정치</a></li><br> <li><a href="#">A&E</a></li><br> <li><a href="#">스포츠</a><br> <ul> <br> <li><a href="#">야구</a></li><br> <li><a href="#">농구</a></li><br> <li><a href="#">아주 긴 라벨은 보시다시피 보기 좋게 포장됩니다</a></li><br> <li><a href="#">수영</a><br> <ul> <br> <li><a href="#">고등학교</a></li><br> <li><a href="#">대학</a></li><br> <li><a href="#">전문가</a><br> <ul> <br> <li><a href="#">남자 수영</a><br> <ul> <br> <li><a href="#">뉴스</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> <li><a href="#">여성 수영</a><br> <ul> <br> <li><a href="#">뉴스</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">성인 레크리에이션</a></li><br> <li><a href="#">청소년 레크리에이션</a></li><br> <li><a href="#">노인 레크리에이션</a></li><br> </ul> <br> <br> <li><a href="#">테니스</a></li><br> <li><a href="#">아이스 스케이팅</a></li><br> <li><a href="#">Javascript 프로그래밍</a></li><br> <li><a href="#">달리기</a></li><br> <li><a href="#">걷기</a></li><br> </ul> <br> <br> <li><a href="#">로컬</a></li><br> <li><a href="#">건강</a></li><br> </ul> <br> <br> <li><a href="#">엔터테인먼트</a><br> <ul> <br> <li><a href="#">연예인 뉴스</a></li><br> <li><a href="#">가십</a></li><br> <li><a href="#">영화</a></li><br> <li><a href="#">음악</a><br> <ul> <br> <li><a href="#">대안</a></li><br> <li><a href="#">국가</a></li><br> <li><a href="#">댄스</a></li><br> <li><a href="#">일렉트로니카</a></li><br> <li><a href="#">금속</a></li><br> <li><a href="#">팝</a></li><br> <li><a href="#">록</a><br> <ul> <br> <li><a href="#">밴드</a><br> <ul> <br> <li><a href="#">도켄</a></li><br> </ul> <br> <br> <li><a href="#">팬클럽</a></li><br> <li><a href="#">노래</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">슬라이드 쇼</a></li><br> <li><a href="#">레드카펫</a></li><br> </ul> <br> <br> <li><a href="#">금융</a><br> <ul> <br> <li><a href="#">개인</a><br> <ul> <br> <li><a href="#">대출</a></li><br> <li><a href="#">절감액</a></li><br> <li><a href="#">모기지</a></li><br> <li><a href="#">부채</a></li><br> </ul> <br> <br> <li><a href="#">비즈니스</a></li><br> </ul> <br> <br> <li><a href="#">음식 및 요리</a><br> <ul> <br> <li><a href="#">아침 식사</a></li><br> <li><a href="#">점심</a></li><br> <li><a href="#">저녁식사</a></li><br> <li><a href="#">디저트</a><br> <ul> <br> <li><a href="#">덤프 케이크</a></li><br> <li><a href="#">도리토스</a></li><br> <li><a href="#">둘 다 부탁드립니다.</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">라이프스타일</a></li><br> <li><a href="#">뉴스</a></li><br> <li><a href="#">정치</a></li><br> <li><a href="#">스포츠</a><br> <ul> <br> <li><a href="#">야구</a></li><br> <li><a href="#">농구</a></li><br> <li><a href="#">수영</a><br> <ul> <br> <li><a href="#">고등학교</a></li><br> <li><a href="#">대학</a></li><br> <li><a href="#">전문가</a><br> <ul> <br> <li><a href="#">남자 수영</a><br> <ul> <br> <li><a href="#">뉴스</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> <li><a href="#">여성 수영</a><br> <ul><br> <li><a href="#">News</a></li><br> <li><a href="#">Events</a></li><br> <li><a href="#">Awards</a></li><br> <li><a href="#">Schedule</a></li><br> <li><a href="#">Team Members</a></li><br> <li><a href="#">Fan Site</a></li><br> </ul><br> </li><br> </ul><br> </li><br> <li><a href="#">Adult Recreational</a></li><br> <li><a href="#">Youth Recreational</a></li><br> <li><a href="#">Senior Recreational</a></li><br> </ul><br> </li><br> <li><a href="#">Tennis</a></li><br> <li><a href="#">Ice Skating</a></li><br> <li><a href="#">Javascript Programming</a></li><br> <li><a href="#">Running</a></li><br> <li><a href="#">Walking</a></li><br> </ul><br> </li><br> </ul><br> </div><br> <a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a><br> <div id="news-items-2" class="hidden"><br> <ul><br> <li><a href="#">Breaking News</a><br> <ul><br> <li><a href="#">Entertainment</a></li><br> <li><a href="#">Politics</a></li><br> <li><a href="#">A&E</a></li><br> <li><a href="#">Sports</a><br> <ul><br> <li><a href="#">Baseball</a></li><br> <li><a href="#">Basketball</a></li><br> <li><a href="#">A really long label would wrap nicely as you can see</a></li><br> <li><a href="#">Swimming</a><br> <ul><br> <li><a href="#">High School</a></li><br> <li><a href="#">College</a></li><br> <li><a href="#">Professional</a><br> <ul><br> <li><a href="#">Mens Swimming</a><br> <ul><br> <li><a href="#">News</a></li><br> <li><a href="#">Events</a></li><br> <li><a href="#">Awards</a></li><br> <li><a href="#">Schedule</a></li><br> <li><a href="#">Team Members</a></li><br> <li><a href="#">Fan Site</a></li><br> </ul><br> </li><br> <li><a href="#">여성 수영</a><br> <ul> <br> <li><a href="#">뉴스</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">성인 레크리에이션</a></li><br> <li><a href="#">청소년 레크리에이션</a></li><br> <li><a href="#">노인 레크리에이션</a></li><br> </ul> <br> <br> <li><a href="#">테니스</a></li><br> <li><a href="#">아이스 스케이팅</a></li><br> <li><a href="#">Javascript 프로그래밍</a></li><br> <li><a href="#">달리기</a></li><br> <li><a href="#">걷기</a></li><br> </ul> <br> <br> <li><a href="#">로컬</a></li><br> <li><a href="#">건강</a></li><br> </ul> <br> <br> <li><a href="#">엔터테인먼트</a><br> <ul> <br> <li><a href="#">연예인 뉴스</a></li><br> <li><a href="#">가십</a></li><br> <li><a href="#">영화</a></li><br> <li><a href="#">음악</a><br> <ul> <br> <li><a href="#">대안</a></li><br> <li><a href="#">국가</a></li><br> <li><a href="#">댄스</a></li><br> <li><a href="#">일렉트로니카</a></li><br> <li><a href="#">금속</a></li><br> <li><a href="#">팝</a></li><br> <li><a href="#">록</a><br> <ul> <br> <li><a href="#">밴드</a><br> <ul> <br> <li><a href="#">도켄</a></li><br> </ul> <br> <br> <li><a href="#">팬클럽</a></li><br> <li><a href="#">노래</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">슬라이드 쇼</a></li><br> <li><a href="#">레드카펫</a></li><br> </ul> <br> <br> <li><a href="#">금융</a><br> <ul> <br> <li><a href="#">개인</a><br> <ul> <br> <li><a href="#">대출</a></li><br> <li><a href="#">절감액</a></li><br> <li><a href="#">모기지</a></li><br> <li><a href="#">부채</a></li><br> </ul> <br> <br> <li><a href="#">비즈니스</a></li><br> </ul> <br> <br> <li><a href="#">음식 및 요리</a><br> <ul> <br> <li><a href="#">아침 식사</a></li><br> <li><a href="#">점심</a></li><br> <li><a href="#">저녁식사</a></li><br> <li><a href="#">디저트</a><br> <ul> <br> <li><a href="#">덤프 케이크</a></li><br> <li><a href="#">도리토스</a></li><br> <li><a href="#">둘 다 부탁드립니다.</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">라이프스타일</a></li><br> <li><a href="#">뉴스</a></li><br> <li><a href="#">정치</a></li><br> <li><a href="#">스포츠</a><br> <ul> <br> <li><a href="#">야구</a></li><br> <li><a href="#">농구</a></li><br> <li><a href="#">수영</a><br> <ul> <br> <li><a href="#">고등학교</a></li><br> <li><a href="#">대학</a></li><br> <li><a href="#">전문가</a><br> <ul> <br> <li><a href="#">남자 수영</a><br> <ul> <br> <li><a href="#">뉴스</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> <li><a href="#">여성 수영</a><br> <ul><br> <li><a href="#">News</a></li><br> <li><a href="#">이벤트</a></li><br> <li><a href="#">수상</a></li><br> <li><a href="#">일정</a></li><br> <li><a href="#">팀 구성원</a></li><br> <li><a href="#">팬 사이트</a></li><br> </ul> <br> <br> </ul> <br> <br> <li><a href="#">성인 레크리에이션</a></li><br> <li><a href="#">청소년 레크리에이션</a></li><br> <li><a href="#">노인 레크리에이션</a></li><br> </ul> <br> <br> <li><a href="#">테니스</a></li><br> <li><a href="#">아이스 스케이팅</a></li><br> <li><a href="#">Javascript 프로그래밍</a></li><br> <li><a href="#">달리기</a></li><br> <li><a href="#">걷기</a></li><br> <br> <br> <br> </div><br> </본문><br> </div>
