页面导航：首页 → 网络编程 → CSS/HTML → 经验交流 → 正文内容

一个新的CSS菜单代码

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

Tags：一个新的CSS菜单代码

百度中搜索更多的关于一个新的CSS菜单代码内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：创建无表格网站的原因和原则译文
下一篇文章：Firefox返回时Iframe的显示Bug的解决方法

文章评论

共有位脚本之家网友发表了评论我来说两句

一个新的CSS菜单代码

文章评论

同类文章

最近更新

热点排行

一个新的CSS菜单代码

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行