<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $('#tree-menu > li > a').click(function(){ var next = $(this).next(); if(next.is(':visible')){ next.slideUp(300); $(this).find('span').html('+'); }else{ next.slideDown(300); $(this).find('span').html('-'); } }); }); </script> <style type="text/css"> body { font:12px Tahoma, Geneva, sans-serif; } #div-head-tree-menu { width:230px; padding:10px 10px 10px 10px; text-align:center; background-color:#ddd; border:1px solid #ccc; border-bottom:5px solid #a8bfd7; } #div-tree-menu { padding-left:20px; padding-bottom:10px; width:230px; background-color:#eee; overflow:hidden; border:1px solid #aaa; border-top:1px solid #FFF; } #tree-menu { width:200px; float:left; margin:0; padding:0; margin-top:-1px;} #tree-menu ul { margin:0; padding:8px; } #tree-menu li { list-style:none; padding:8px; margin:0; border-bottom:1px solid #999; border-top:1px solid #fff; } #menu-lv1 { display:none; } #menu-lv1 li { border-bottom:none; border-top:none; } #menu-lv2 { display:none; } #menu-lv2 li { border-bottom:none; border-top:none; } #menu-lv3 { display:none; } #menu-lv3 li { border-bottom:none; border-top:none; } #menu-lv4 { display:none; } #menu-lv4 li { border-bottom:none; border-top:none; } a:link { text-decoration: none; color: #00F; } a:visited { text-decoration: none; color: #0CF; } a:hover { text-decoration: none; color: #F60; } a:active { text-decoration: none; color: #F00; } .txt-red { color:#F00 } </style> </head> <body> <div id="div-head-tree-menu">: Tree Menu :</div> <div id="div-tree-menu"> <ul id="tree-menu"> <li><a href="#"><span>+</span> menu-1</a> <ul id="menu-lv1"> <li>› <a href="#">sub-menu-1-1</a></li> <li>› <a href="#">sub-menu-1-2</a></li> <li>› <a href="#">sub-menu-1-3</a></li> <li>› <a href="#">sub-menu-1-4</a></li> </ul> </li> <li><a href="#"><span>+</span> menu-2</a> <ul id="menu-lv2"> <li>› <a href="#">sub-menu-2-1</a></li> <li>› <a href="#">sub-menu-2-2</a></li> <li>› <a href="#">sub-menu-2-3</a></li> <li>› <a href="#">sub-menu-2-4</a></li> </ul> </li> <li><a href="#"><span>+</span> menu-3</a> <ul id="menu-lv3"> <li>› <a href="#">sub-menu-3-1</a></li> <li>› <a href="#">sub-menu-3-2</a></li> <li>› <a href="#">sub-menu-3-3</a></li> <li>› <a href="#">sub-menu-3-4</a></li> </ul> </li> <li><a href="#"><span>+</span> menu-4</a> <ul id="menu-lv4"> <li>› <a href="#">sub-menu-4-1</a></li> <li>› <a href="#">sub-menu-4-2</a></li> <li>› <a href="#">sub-menu-4-3</a></li> <li>› <a href="#">sub-menu-4-4</a></li> </ul> </li> </ul> </div> </body> </html>
Load balance : Server 05
