首页 > 网络编程 > CSS/HTML > 经验交流 >

一个新的CSS菜单代码

2007-03-17 00:00:00 作者：

一个新的CSS菜单代码

<html>

<head>

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>

<a href="#" id="productsActuator" class="actuator">Phones</a>

<li>

<a href="#" id="newPhonesActuator" class="actuator">New Phones</a>

</ul>

</li>

<li>

<a href="#" id="compareActuator" class="actuator">Compare</a>

<li><a href="#">All Phones</a></li>

<li><a href="#">Service Provider</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]