html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prototype 左侧菜单</title> <link rel="stylesheet" type="text/css" href="menu.css" mce_href="menu.css" /> <mce:script type="text/javascript" src="prototype.js" mce_src="prototype.js"></mce:script> <mce:script type="text/javascript" src="effects/scriptaculous.js" mce_src="effects/scriptaculous.js" ></mce:script> <mce:script type="text/javascript" src="menu.js" mce_src="menu.js"></mce:script> </head> <body> <div id="menus"> <dl id="menu"> <dt><a href="#" mce_href="#"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 1</span></a></dt> <dt class="smenu" id="a2"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 2</span></dt> <dd id="smenu2"> <ul> <li><a href="#" mce_href="#">sub-menu 2.1</a></li> <li><a href="#" mce_href="#">sub-menu 2.2</a></li> <li><a href="#" mce_href="#">sub-menu 2.3</a></li> </ul> </dd> <dt class="smenu" id="a3"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 3</span></dt> <dd id="smenu3"> <ul> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> <li><a href="#" mce_href="#">sub-menu 3.1</a></li> </ul> </dd> <dt class="smenu" id="a4"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 4</span></dt> <dd id="smenu4"> <ul> <li><a href="#" mce_href="#">sub-menu 4.1</a></li> <li><a href="#" mce_href="#">sub-menu 4.1</a></li> </ul> </dd> </dl> </div> </body> </html> menu.js function addEvent(obj, type, fn) { if( obj.attachEvent ) { obj["e"+type+fn] = fn; obj[type+fn] = function(){obj["e"+type+fn]( window.event );}; obj.attachEvent( "on"+type, obj[type+fn] ); } else { obj.addEventListener( type, fn, true ); }; } function initMenus() { /*Activate/deactivate menus*/ $$('.smenu').each(function(s,index){ addEvent(s,'click',function(){ if($('smenu'+s.id.replace('a','')).visible()){ //do nothing } else { $$('.smenu').each(function(s,index){ if($('smenu'+s.id.replace('a','')).visible()) { //$('smenu'+s.id).hide(); //Prototype Method Effect.BlindUp($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method } }); //$('smenu'+s.id).show(); //Prototype Method Effect.BlindDown($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method } }); }); /*All menu hiden by default*/ $$('.smenu').each(function(s,index){ if($('smenu'+s.id.replace('a','')).visible()) { $('smenu'+s.id.replace('a','')).hide(); } }); /*effects on menu*/ $$('dl#menu dt').each(function(s,index){ addEvent(s,'mouseout',function(){ new Effect.Highlight(s, {duration:0.5, startcolor:'#EFF3FF', endcolor:'#72ACDC', restorecolor :'#72ACDC'}); }); }); } addEvent(window, 'load', initMenus); 演示效果: 下载地址:http://download.csdn.net/source/2486857