html：
<html xmlns="http://www.w3.org/1999/xhtml"><br /><head></p><p><title>Prototype 左側菜單</title><br /><link rel="stylesheet" type="text/css" href="menu.css" mce_href="menu.css" /><br /><mce:script type="text/javascript" src="prototype.js" mce_src="prototype.js"></mce:script><br /><mce:script type="text/javascript" src="effects/scriptaculous.js" mce_src="effects/scriptaculous.js" ></mce:script><br /><mce:script type="text/javascript" src="menu.js" mce_src="menu.js"></mce:script><br /></head></p><p><body><br /><div id="menus"><br /><dl id="menu"><br /><dt><a href="#" mce_href="#"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 1</span></a></dt><br /><dt class="smenu" id="a2"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 2</span></dt><br /><dd id="smenu2"><br /><ul><br /><li><a href="#" mce_href="#">sub-menu 2.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 2.2</a></li><br /><li><a href="#" mce_href="#">sub-menu 2.3</a></li><br /></ul><br /></dd><br /><dt class="smenu" id="a3"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 3</span></dt><br /><dd id="smenu3"><br /><ul><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 3.1</a></li><br /></ul><br /></dd><br /><dt class="smenu" id="a4"><span style="background-image: url(bug.png);" mce_style="background-image: url(bug.png);">Menu 4</span></dt><br /><dd id="smenu4"><br /><ul><br /><li><a href="#" mce_href="#">sub-menu 4.1</a></li><br /><li><a href="#" mce_href="#">sub-menu 4.1</a></li><br /></ul><br /></dd><br /></dl><br /></div><br /></body></p><p></html>
menu.js
function addEvent(obj, type, fn) {<br />if( obj.attachEvent ) {<br />obj["e"+type+fn] = fn;<br />obj[type+fn] = function(){obj["e"+type+fn]( window.event );};<br />obj.attachEvent( "on"+type, obj[type+fn] );<br />} else {<br />obj.addEventListener( type, fn, true );<br />};<br />}</p><p>function initMenus() {<br />/*Activate/deactivate menus*/<br />$$('.smenu').each(function(s,index){<br />addEvent(s,'click',function(){<br />if($('smenu'+s.id.replace('a','')).visible()){<br />//do nothing<br />} else {<br />$$('.smenu').each(function(s,index){<br />if($('smenu'+s.id.replace('a','')).visible()) {<br />//$('smenu'+s.id).hide(); //Prototype Method<br />Effect.BlindUp($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method<br />}<br />});<br />//$('smenu'+s.id).show(); //Prototype Method<br />Effect.BlindDown($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method<br />}<br />});<br />});</p><p>/*All menu hiden by default*/<br />$$('.smenu').each(function(s,index){<br />if($('smenu'+s.id.replace('a','')).visible()) {<br />$('smenu'+s.id.replace('a','')).hide();<br />}<br />});</p><p>/*effects on menu*/<br />$$('dl#menu dt').each(function(s,index){<br />addEvent(s,'mouseout',function(){<br />new Effect.Highlight(s, {duration:0.5, startcolor:'#EFF3FF', endcolor:'#72ACDC', restorecolor<br />:'#72ACDC'});<br />});<br />});<br />}</p><p>addEvent(window, 'load', initMenus);<br />
示範效果：
：http://download.csdn.net/source/2486857
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
