?提示：您可以先修改部分代碼再運(yùn)行<head>
<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(/images/plus.gif)";
??? actuator.onclick = function() {
??????? var display = menu.style.display;
??????? this.parentNode.style.backgroundImage =
??????????? (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
??????? menu.style.display = (display == "block") ? "none" : "block";
??????? return false;
??? }
}
?window.onload = function() {
??????????? initializeMenu("productsMenu", "productsActuator");
??????????? initializeMenu("newPhonesMenu", "newPhonesActuator");
??????????? initializeMenu("compareMenu", "compareActuator");
??????? }
</script>
<style>
body {
? font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
? background-color: #EEE;
? border: 1px solid #CCC;
? color: #000;
? width: 203px;
}
#menuList {
? margin: 0px;
? padding: 10px 0px 10px 15px;
}
li.menubar {
? background: url(/images/plus.gif) no-repeat 0em 0.3em;
? font-size: 12px;
? line-height: 1.5em;
? list-style: none outside;
}
.menu, .submenu {
? display: none;
? margin-left: 15px;
? padding: 0px;
}
.menu li, .submenu li {
? background: url(/images/square.gif) no-repeat 0em 0.3em;
? list-style: none outside;
}
a.actuator {
? background-color: transparent;
? color: #000;
? font-size: 12px;
? padding-left: 15px;
? text-decoration: none;
}
a.actuator:hover {
? text-decoration: underline;
}
.menu li a, .submenu li a {
? background-color: transparent;
? color: #000;
? font-size: 12px;
? padding-left: 15px;
? text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
? /*border-bottom: 1px dashed #000;*/
? text-decoration: underline;
}
span.key {
? text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
????? <ul id="menuList">
??????? <li class="menubar">
????????? <a href="#" id="productsActuator" class="actuator">Phones</a>
????????? <ul id="productsMenu" class="menu">
??????????? <li>
????????????? <a href="#" id="newPhonesActuator" class="actuator">New Phones</a>
????????????? <ul id="newPhonesMenu" class="submenu">
??????????????? <li><a href="#">9290</a></li>
??????????????? <li><a href="#">8390</a></li>
??????????????? <li><a href="#">8290</a></li>
??????????????? <li><a href="#">8270</a></li>
????????????? </ul>
??????????? </li>
??????????? <li>
????????????? <a href="#" id="compareActuator" class="actuator">Compare</a>
????????????? <ul id="compareMenu" class="submenu">
??????????????? <li><a href="#">All Phones</a></li>
??????????????? <li><a href="#">Service Provider</a></li>
????????????? </ul>
??????????? </li>
????????? </ul>
??????? </li>
????? </ul>
??? </div>
? </body>
posted on 2007-03-18 00:17
EricWong 閱讀(222)
評(píng)論(0) 編輯 收藏