<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|http://www.okajax.com/|---CSS 制作的三级菜单</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; /* 菜单总体水平位置 */
clear:right;
list-style:none;
/*line-height:22px; 一级菜单高 */
/*background: #eee; 所有菜单移出色 */
/*font-weight: bold;8*/
padding:0px;
margin:0px;
/*border:1px solid #ccc;
border-right: 0px;*/
}
#nav ul ul{
/*border:1px solid #ccc;*/
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1px solid #CCC;*/
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
border:1px solid #CCC;
margin: 0px;
padding: 3px 5px 3px 6px;
background-color: #f1f1f1;
text-decoration: none;
} /* 所有 a:hover 字体样式 */
#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul { /* 二级弹出位 */
position:absolute;
margin:-22px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}
/* 二级菜单宽 */
#nav li ul a {
width:120px; /* 二级菜单宽 */
/*line-height:24px; 二级菜单高
border:1px solid #CCC;*/
height:22px;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-22px 0px 0px 120px;
border:1px solid #CCC;
} /* 三级弹出位 */
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
} /* 所有弹出菜单自动左边距 */
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
height:22px;
}
/* 所有悬浮样式 */
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
img1=new Image();
img1.src="flyout_arrow.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="http://homepage.yesky.com/" target="_blank"><span style="font-size: 9pt">
首页</span></a></li>
<li><a href="http://www.okajax.com/" target="_blank" class="selected"><span style="font-size: 9pt">
项目需求合作</span></a><span style="font-size: 9pt"> </span>
<ul>
<li><a href="http://www.okajax.com/" class="selected"><span style="font-size: 9pt">网站项目
</span></a>
<ul>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站项目 </span></a>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">整站项目</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站分析策划</span></a></li>
<li><a href="http://www.okajax.com/" target="_blank"><span style="font-size: 9pt">网页设计制作</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站制作与开发</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站flash动画</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站服务器</span></a></li>
</ul>
</li>
<li><a href="http://www.okajax.com/" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span
style="font-size: 9pt"> </span>
<ul>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网站项目 </span></a>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">平面设计</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">CAD工程图设计</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">3D建模与动画</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">Flash游戏动画</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">音效及音乐</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">游戏原画设定</span></a></li>
</ul>
</li>
<li><a href="http://www.okajax.com/" class="selected"><span style="font-size: 9pt">软件开发</span></a><span
style="font-size: 9pt"> </span>
<ul>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">应用软件</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">游戏开发</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">驱动程序</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">嵌入式开发</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">手机开发</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">单片机</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">数据库设计</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">代码移植</span></a></li>
</ul>
</li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">网络硬件</span></a></li>
</ul>
</li>
<li><a href="http://www.okajax.com/" target="_blank" class="selected"><span style="font-size: 9pt">
信息与知识</span></a><span style="font-size: 9pt"> </span>
<ul>
<li><a class="selected" href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">信息与知识</span></a><span
style="font-size: 9pt"> </span>
<ul>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">实用信息与工具 </span></a>
</li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">新闻动态</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">知识与技能</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">设计制作与欣赏</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">项目交易经验谈</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">下载</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">优秀作品欣赏</span></a></li>
<li><a href="http://www.okajax.com/" target="_blank"><span style="font-size: 9pt">招骋</span></a></li>
<li><a href="http://www.okajax.com/%22%3E%3Cspan style="font-size: 9pt">关于本站</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
例如，当二级菜单被展开时，通过Ajax异步请求获取并渲染对应的三级菜单内容。 6. **无障碍性（Accessibility）**： 为了使所有用户都能方便地使用菜单，需要遵循无障碍设计原则。例如，为菜单项添加`aria`属性，...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
联动菜单在Web开发中是一种常见的交互设计，它通常用于实现数据层级关系的展现和操作，如省份-城市-区县的三级联动选择。本资源包“联动菜单大全”包含了多种类型的联动菜单实现，包括与数据库交互的、使用AJAX技术...
【标题】"中国地区三级菜单"所涉及的知识点主要集中在前端开发中构建多级导航菜单的技术上，这通常用于组织复杂的数据结构，如地理区域分类。在这个特定的场景下，我们可能是在创建一个用于显示中国行政区域的三级...
在IT行业中，三级联动菜单是一种常见的交互设计模式，尤其在地区选择、商品分类等场景下应用广泛。这种菜单系统由三个层次的下拉菜单组成，用户每次选择一个层级的选项，下一层级的菜单会根据前一次的选择动态更新，...
在IT领域，"三级联动"通常指的是在前端交互设计中，一种常见的下拉选择框的联动效果。这种效果常用于地址选择，用户首先选择省份，接着根据省份的选择更新市的选项，最后根据市的选择更新区的选项，全程无需刷新页面...
在这个项目中，DWR利用Ajax技术，使用户在选择上一级菜单时，能即时地加载下级菜单，提高了用户体验。 在提供的"Dynamic_three_combo三级联动"文件中，包含了项目的源代码和可能的测试文件。为了运行这个项目，你...
2. **JavaScript/jQuery**：联动的核心在于JavaScript，用于监听用户在一级菜单的选择，并动态更新二级和三级菜单的内容。这通常涉及到DOM操作（如`document.getElementById`、`querySelector`等）和事件处理（如`...
在三级联动菜单中，JavaScript用于监听用户对第一级菜单的选择，根据选择更新并显示第二级菜单，然后根据第二级的选择展示第三级菜单。通过DOM（Document Object Model）操作，JavaScript可以动态修改页面元素，实现...
其中，HTML部分定义了三个`<select>`标签，分别代表三级菜单；JavaScript部分定义了`showMenu`和`showMenu2`函数，用于处理用户的选择并发起Ajax请求；而PHP代码则用于连接数据库，执行查询，并返回结果。 #### 五...
在IT行业中，构建一个高效的用户界面常常涉及到多级选择器的使用，比如省市区县的三级下拉菜单联动。这种功能通常应用于地址填写或者定位服务，让用户能够方便地选择他们的地理位置。在这个特定的案例中，我们关注的...
本资源提供了一个非常实用的js城市三级菜单的示例，对于构建物流网站的搜索功能尤其有用。下面我们将深入探讨这个主题。 首先，城市三级菜单的设计目的是为了方便用户在众多城市选项中快速找到所需的信息。在物流...
在本例中，“asp+js 三级联动选择菜单”是一个结合了这两种技术的实现，用于创建一个能够动态响应用户选择的三级下拉菜单。 1. **ASP原理**： ASP允许开发者在服务器端编写脚本，这些脚本可以处理数据、与数据库...
例如，一级菜单可能是国家，二级菜单是省份，三级菜单是城市，当用户在一级菜单中选择中国，二级菜单就会显示中国的省份，再选一个省份，三级菜单则会显示该省份的城市。 在这个"自己手写的三级联动"项目中，开发者...
本项目"ajax实现三级联动"旨在展示如何利用AJAX技术实现一个三级联动的效果，这通常应用于下拉菜单或地区选择等场景，例如国家-省份-城市的选择。 首先，我们来理解一下“三级联动”的概念。三级联动是指三个下拉...
在三级联动下拉菜单中，当用户在第一级菜单中选择一个选项时，JavaScript会通过AJAX（Asynchronous JavaScript and XML）发送请求到服务器，获取相应的第二级菜单数据，然后在页面上动态更新。例如，使用jQuery库，...
在JavaWeb开发中，省市县三级联动是一种常见的需求，它通常出现在地址选择、物流配送等场景。本项目通过结合JavaWeb后端技术和Ajax前端技术，实现了动态加载和更新下拉菜单，使得用户在选择省、市时，县/区级的选择...
进一步选择城市后，三级菜单（如区县）会显示对应城市的区县。这种交互设计提高了用户体验，减少了用户操作步骤。 实现三级联动菜单通常涉及到以下技术： 1. JavaScript：用于处理用户交互和动态更新DOM元素。 2. ...
4. 可能还有示例或测试用的HTML文件，用于展示三级联动的效果。 5. 如果是基于框架或库（如Vue、React或Angular）的项目，还会有相应的组件文件和配置文件。 在实际应用中，"三级联动"不仅限于地理位置的选择，还...
在本文中，我们将探讨如何使用PHP和AJAX技术实现三级联动，以省市县为例。这种效果在Web开发中经常被用到，特别是在需要用户选择地理位置信息时。下面将详细介绍实现这个功能的步骤、数据库设计以及相关代码。 首先...