js 無制限の折りたたみメニュー lite バージョン_ナビゲーション メニュー

<meta charset="utf-8"> <title>無制限级折叠菜单 1.01 JS 版</title> <meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"> <meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"> <style> <!-- body,ul,h3 {マージン:0px;パディング:0px;} li {リストスタイルタイプ:なし;} 体{ フォントサイズ:12px; 色:#333; フォントファミリー: Simsun; 行の高さ:15px; } {テキスト装飾:なし;カラー:#004285;ボーダー:なし;} a:hover{テキスト装飾:なし;カラー:#C33;} #メニュー { 幅:260ピクセル; マージン:50px 自動; パディング:10px; ボーダー:#EEE 1px ソリッド; } #メニューh3 { フォントサイズ:12px; } #メニューウル{ 背景:url("http://demo.jb51.net/js/2011/caidan/ul-bg.gif")repeat-y 5px 0px;オーバーフロー:非表示; } #メニューウルリ{ パディング:5px 0 2px 15px; 背景:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") no-repeat 5px -32px; } #menu ul li ul {表示:なし;} #menu ul li em { カーソル:ポインタ; 表示:インラインブロック; 幅:15ピクセル; フロート:左; 高さ:15ピクセル; マージン左:-14px; 背景:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") no-repeat -32px 2px; } #menu ul li em.off { 背景位置: -17px -18px; } #メニューウルリ#エンド{ 背景色:#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 すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]
オンライン デモ http://demo.jb51.net/js/2011/caidan/index.htm