一个新的CSS菜单代码- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 一个新的CSS菜单代码

CSS样式表: 什么叫标准网页设计?; 什么是XHTML?; 巧妙的最大化动态载入IFrame的方法; 为什么要建立web标准与web标准的好处; 创建无表格网站的原因和原则译文; 一个新的CSS菜单代码; 客齐集OEM的CSS解析与开发经验; 页里面 CDATA的作用说明; ie中多id的调用方法; CSS设置网页的字体防浏览器浏览页面字体变形; 用css来控制图片大小显示的实现方法与代码; CSS入门教程篇; CSS选择符说明; IE和FIREFOX下CSS的区别与解决方法; 用CSS让表格返转的代码 IE only; 做网页经常要注意的常识整理收集; div+css实现的滑动门,简洁,新手上路 (小鸽子系列); css滤镜属性语法介绍; 百分比的细节－－容器大小篇; 你不一定知道的Label的For用法

No. « ‹ 37 38 39 40 › »

技术文章搜索

关键字

CSS样式表中的一个新的CSS菜单代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 40 ::

收藏到网摘: n/a

创建无表格网站的原因和原则译文客齐集OEM的CSS解析与开发经验

点击运行可以看到效果:

<html>
<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>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

创建无表格网站的原因和原则译文客齐集OEM的CSS解析与开发经验

CSS样式表 中的 一个新的CSS菜单代码

评论 (0) All

CSS样式表中的一个新的CSS菜单代码