js 무제한 접이식 메뉴 라이트 버전_탐색 메뉴

<meta charset="utf-8"> <title>无限级折叠菜单 1.01 JS版</title> <meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"> <meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"> <style> <!-- 몸체,ul,h3 {마진:0px; 패딩:0px;} 리 {목록 스타일 유형:없음;} 몸{ 글꼴 크기:12px; 색상:#333; 글꼴 모음: Simsun; 줄 높이:15px; } a{텍스트 장식:없음;색상:#004285;경계:없음;} a:hover{텍스트 장식:없음;색상:#C33;} #메뉴 { 너비:260px; 여백:50px 자동; 패딩:10px; 테두리:#EEE 1px 솔리드; } #메뉴 h3 { 글꼴 크기:12px; } #메뉴 ul { 배경:url("http://demo.jb51.net/js/2011/caidan/ul-bg.gif") 반복-y 5px 0px; 오버플로:숨김; } #메뉴 울 리 { 패딩:5px 0 2px 15px; 배경:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") 반복 없음 5px -32px; } #menu ul li ul {display:none;} #menu ul li em { 커서:포인터; 디스플레이:인라인 블록; 너비:15px; 부동:왼쪽; 높이:15px; 여백-왼쪽:-14px; 배경:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") no-repeat -32px 2px; } #menu ul li em.off { 배경 위치: -17px -18px; } #menu ul li#end { 배경색:#FFF; } #메뉴 ul.off { 표시:블록; }--> </style> <div id="menu"> <h3>무한 접기 메뉴 1.0.1 JS 버전 </h3> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_1_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_2_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_3_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_3_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_2_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_3_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_3_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_1_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_2_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_3_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_3_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_2_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_3_1</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_3_2</a> <ul> <li> <em></em><a href="javascript:void(0);">메뉴_4_1</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> <li id="end"> <em></em><a href="javascript:void(0);">메뉴_4_2</a> <ul> <li><a href="javascript:void(0);">메뉴_5_1</a></li> <li id="end"><a href="javascript:void(0);">메뉴_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]
온라인 데모 http://demo.jb51.net/js/2011/caidan/index.htm