Tip: you can modify some code before running
<!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>Js tree menu _ js webpage special effects</title><script>if (!document.getElementById) document.getElementById = function() { return null; }function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null || actuator == null) return; //if (window.opera) return; // I'm too tired actuator.parentNode.style.backgroundImage = "url(image/able.gif)"; actuator.onclick = function() { var display = menu.style.display; this.parentNode.style.backgroundImage = (display == "block") ? "url(image/able2.gif)" : "url(image/able.gif)"; menu.style.display = (display == "block") ? "none" : "block"; return false; }}window.onload = function() { initializeMenu("productsMenu", "productsActuator"); initializeMenu("newPhonesMenu", "newPhonesActuator"); initializeMenu("compareMenu", "compareActuator"); }</script> <style type="text/css">Body {font-family: arial,, serif; font-size: 12px; TEXT-ALIGN: center} # check {width: Pixel px; height: 500px; margin: 5px auto ;}# mainMenu {width: Pixel px; height: 423px; border: 1px solid # b7bac3; text-align: left; float: left; overflow: auto ;} # menuList {margin: 0px; padding: 12px 0px 12px;} # mainMenu a {cursor: pointer; text-decoration: none; color: #000 ;} # menuList li {font-size: 12px; line-height: 25px; list-style: none outside ;}# menuList a {width: 12px; height: 12px; padding-left: 12px ;}. xztp {background: url (image/able2.gif) no-repeat 0px 0px ;}. tpxz {background: url (image/able.gif) no-repeat 0px 0px ;}. submenu {display: none; margin-left: 10px; padding: 0px ;}</style></head><body><div id="check"><div id="mainMenu"> <ul id="menuList">Design<li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> </ul> <ul id="menuList">Design<li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> <li><input type="checkbox" name="Adobe Photoshop CS3" />Adobe photoshop CS3</li> </ul> </div></div></body></html>Www.111cn.net
Tip: you can modify some code before running
