<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>
分享到:
相关推荐
一款jQuery实现伸缩型菜单源码下载 52.一款jQuery制作仿FLASH动感导航菜单效果(附PSD) 53.又一款jquery蓝色经典的三级动画网站菜单 54.又一款黑色风格jQuery支持多级的动感下拉菜单源码 55.增加用户体验之...
CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章(/C13/) 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL...
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
实例075 解释型菜单 111 实例076 自动隐藏的弹出式菜单 112 实例077 收缩式导航菜单 114 实例078 树状导航菜单 116 实例079 鼠标右键菜单 117 3.6 状态栏设计 118 实例080 状态栏中的跑马灯文字 119 ...
9.6.5 显示-隐藏层 185 9.6.6 设置状态栏文本 186 9.6.7 交换图像 187 9.6.8 拖动层 187 本章小结 189 思考题 189 第10章 Web数据库应用 190 10.1 关于Web应用程序 190 10.1.1 静态网页的处理过程 190 ...
网站导航条支持文字式和图片式2类,文字式采用流行的div+css开发设计,界面新颖美观,采用文字式导航条更有利于搜索引擎抓取页面信息,同时程序还支持原有的图片式菜单效果,后台可轻松切换使用,以上2类导航条菜单...
实例219 解释型菜单 277 实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 ...
实例219 解释型菜单 277 实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 ...
使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web...
在Portal门户的流程中心中发起【表单和控件->显示所有数据项】流程,在表单中,展示各个H3表单控件的使用,如:整数&数值型,输入字符的自动验证; 3.3 办公流程 3.3.1 请假流程 功能展示 1. 表单:字段的控制: ...
媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...