<html>
<head>
<title>三级菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #053553;
}
#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;
padding:0px;
margin:0px;
}
#nav ul ul{
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
margin: 0px;
padding: 2px 5px 2px 6px;
background-color: #f1f1f1;
text-decoration: none;
}
#nav a.selected{background:url() 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:-21px 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;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-21px 0px 0px 119px;
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;
border:1px solid #CCC;
height:22px;
}
/* 悬浮样式 */
-->
</style>
<script type="text/javascript">
img1=new Image();
img1.src="";
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" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="#" target="_blank">网站首页</a></li>
<li><a href="#" target="_blank" class="selected">源码下载</a>
<ul>
<li><a href="#" class="selected">ASP源码</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li>
</ul>
</li>
<li ><a href="#" class="selected">PHP源码</a>
<ul>
<li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li>
</ul>
</li>
<li ><a href="#" class="selected">JAVA源码</a>
<ul>
<li><a href="/sort/list_1_87_1.shtml">Ajax相关</a></li><li><a href="/sort/list_1_33_1.shtml">综合其它</a></li>
</ul>
</li>
<li><a href="#">其它下载</a></li>
</ul>
</li>
<li><a href="#" target="_blank" class="selected">最新服务</a>
<ul>
<li><a href="#" class="selected">最新更新</a></li>
<ul>
<li><a href="/sort/list_1_25_1.shtml">办公管理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">统计调查</a></li><li><a href="/sort/list_1_197_1.shtml">广告网赚</a></li><li>
</ul>
<li><a href="/other/top100.shtml">下载排行</a></li>
<li><a href="/service/ad.shtml">广告服务</a></li>
</ul>
</li>
<li><a href="/">菜单示例</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>三级菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #053553;
}
#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;
padding:0px;
margin:0px;
}
#nav ul ul{
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
margin: 0px;
padding: 2px 5px 2px 6px;
background-color: #f1f1f1;
text-decoration: none;
}
#nav a.selected{background:url() 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:-21px 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;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-21px 0px 0px 119px;
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;
border:1px solid #CCC;
height:22px;
}
/* 悬浮样式 */
-->
</style>
<script type="text/javascript">
img1=new Image();
img1.src="";
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" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="#" target="_blank">网站首页</a></li>
<li><a href="#" target="_blank" class="selected">源码下载</a>
<ul>
<li><a href="#" class="selected">ASP源码</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li>
</ul>
</li>
<li ><a href="#" class="selected">PHP源码</a>
<ul>
<li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li>
</ul>
</li>
<li ><a href="#" class="selected">JAVA源码</a>
<ul>
<li><a href="/sort/list_1_87_1.shtml">Ajax相关</a></li><li><a href="/sort/list_1_33_1.shtml">综合其它</a></li>
</ul>
</li>
<li><a href="#">其它下载</a></li>
</ul>
</li>
<li><a href="#" target="_blank" class="selected">最新服务</a>
<ul>
<li><a href="#" class="selected">最新更新</a></li>
<ul>
<li><a href="/sort/list_1_25_1.shtml">办公管理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">统计调查</a></li><li><a href="/sort/list_1_197_1.shtml">广告网赚</a></li><li>
</ul>
<li><a href="/other/top100.shtml">下载排行</a></li>
<li><a href="/service/ad.shtml">广告服务</a></li>
</ul>
</li>
<li><a href="/">菜单示例</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
- menu.rar (1.5 KB)
- 下载次数: 17
分享到：
发表评论
-
JSON.parse() 与 eval()
2012-01-12 11:31 16077JSON(JavaScript Object Notation ... -
jsp端自动下载并保存图片文件
2011-04-21 23:38 1552JScript code <script languag ... -
iFrame只要竖滚动条，不要横滚动条
2011-04-15 23:22 2383如题，就是在网页中，只显示右侧的垂直滚动条，而不要底部的水平滚 ... -
点击按钮保存网页中指定的图片，利用js实现
2011-04-15 00:50 4305有时候在网页上需要禁用右键菜单，但是需要点击某一按钮保存指定的 ... -
js正则验证
2011-03-31 22:47 767引用网址 http://hi.baidu.com/qui ... -
JavaScript相关文章推荐
2011-03-18 00:27 2827判断js数组包是否包含某个元素 要判断数组中是否包含某个元素 ... -
js 数组array的方法介绍
2011-03-18 00:23 831最近用到了Array就对其 ... -
ie的自动完成功能
2011-03-08 00:10 905<!DOCTYPE HTML PUBLIC " ... -
百度代码搜索，谷歌搜索
2011-03-07 23:55 924<!DOCTYPE HTML PUBLIC " ... -
Javascript的调试利器Firebug使用详解
2011-02-25 23:46 843Javascript的调试利器Firebug使用详解.doc -
IE和Firefox浏览器下javascript、CSS兼容性研究
2011-02-25 21:53 877IE和Firefox浏览器下javascript、CSS兼容性 ... -
JS验证日期时间是否合法
2011-02-17 21:00 1958/^(19|20)\d{2}-(0?\d|1[012])-(0 ... -
正则表达式的JS验证
2011-02-17 20:38 795/判断输入内容是否为空 function IsNull ... -
JS函数 验证日期合法(测试通过)
2011-02-17 20:07 1162<script type="text/java ... -
CSS 制作的三级菜单
2011-02-10 13:11 1065<html> <head> <m ... -
竖向显示，向右弹出的3级层导航菜单特效
2011-02-10 13:08 1445<!DOCTYPE html PUBLIC " ...
相关推荐
**标题：“CSS+JS选项卡式导航菜单”** 在网页设计中，选项卡式导航菜单是一种常见的用户界面元素，它允许用户在多个相关但独立的内容区域之间切换，而无需加载新的页面。这种设计模式提高了用户体验，因为它使得...
这个主题“CSS+JavaScript+XML实现二级菜单”涉及到Web开发中的三个核心技术：层叠样式表（CSS）、JavaScript和可扩展标记语言（XML）。接下来，我们将深入探讨如何利用这三者来构建一个功能完备、响应式的二级菜单...
在这些模板中，JavaScript可能被用来实现诸如下拉菜单、滑动效果、轮播图等功能，提升用户体验。ES6（ECMAScript 2015）的新特性，如箭头函数、模板字符串、let和const变量、解构赋值等，也使得代码更加简洁易读。 ...
"使用CSS+jQuery实现的水平二级菜单"是一个常见的技术实践，它结合了层叠样式表（CSS）的样式控制与JavaScript库jQuery的动态效果，以实现优雅且功能丰富的菜单系统。下面将详细介绍这个主题中的相关知识点。 首先...
在实际项目中，"三级菜单（纯DIV+CSS打造）"的实现可能涉及更多的细节，如浮动元素清除、防止点击穿透、浏览器兼容性处理等。通过深入学习和实践，你可以掌握这个技术并创造出功能强大、美观易用的网站导航菜单。在...
综上所述，NFine框架通过提供自定义的CSS和JS文件，使得开发者能够轻松地实现三级滑动菜单，提升用户体验。在实际项目中，可以根据需求对这些文件进行调整，以适应不同的设计风格和交互需求。通过这种方式，NFine...
- **导航栏**: 使用`<nav>`标签创建，结合CSS实现下拉菜单或侧边栏等功能。 - **轮播图**: 利用JavaScript控制图片的自动切换或手动切换。 - **详情页**: 展示景点详细介绍、地图位置、开放时间等内容。 - **地图...
本项目是“jQuery三级滑动菜单”，旨在利用JavaScript库jQuery创建一个灵活、易定制的多级导航菜单。下面将详细讲解这个项目的实现原理及关键知识点。 一、jQuery库的引入与基本使用 jQuery是一个轻量级的...
例如，滑动、淡入淡出、轮播图、下拉菜单等常见交互效果，都可以通过JavaScript轻松实现。 再者，Flash曾是互联网上广泛使用的多媒体平台，尤其在制作动态图形、交互式矢量动画和富媒体应用方面。它支持...
在JavaScript（JS）开发中，创建一个多级滑动菜单是一项常见的任务，特别是在构建交互式网站时。这样的菜单能够提供良好的用户体验，使用户能够方便地浏览和访问网站的深层内容。以下是一些关于如何使用JS开发多级...
总结，"js二级滑动展开菜单导航"是网页开发中的一个关键组成部分，它涉及到HTML结构、CSS样式和JavaScript交互的综合运用。通过理解和实践这些知识点，开发者可以构建出更加易用且具有吸引力的Web应用界面。
在华为主页的实现中，JavaScript可以用来处理用户交互，比如点击导航栏时的下拉菜单动画，或者滑动切换不同的主要内容区域。可以使用DOM（Document Object Model）来操作页面元素，例如通过`document.getElementById...
本资源主要关注的是"三级导航菜单"的设计与实现，使用了JavaScript（js）和层叠样式表（css）这两种核心技术。下面我们将详细探讨这些知识点。 **1. 三级导航菜单的概念** 三级导航菜单是一种具有三层结构的导航...
DHTML是HTML、CSS和JavaScript三者结合，使得静态HTML页面变得动态化和交互性更强的一种技术。它允许开发者在不刷新整个页面的情况下更新部分网页内容，实现动态效果和用户交互，如下拉菜单、滑动面板、动画等。...
在“华丽设计DIV+CSS+JQuery模板”中，JQuery可能用于实现交互性的功能，如下拉菜单、滑动展示、弹出窗口或者动态加载内容。它的API易于理解和使用，使得开发者能够快速添加复杂的功能，而不必深陷于底层JavaScript...
- **二级三级页面**：通过内部链接和外部链接等方式，实现页面间的跳转，构建多层级的网站结构。 - **鼠标滑过效果**：利用CSS或JavaScript实现鼠标悬停时的特殊视觉效果，增强用户体验。 - **Logo设计**：...
在构建“基于html + css + js完成淘宝网首页效果”的项目中，我们将深入探讨HTML、CSS和JavaScript这三种核心技术在网页开发中的应用。这些技术是构建任何动态、交互式网页的基础，而淘宝网作为中国最大的电商平台，...
总之，JavaScript实现的三级横向导航菜单是前端开发中的常见需求，它涉及HTML结构、CSS样式以及JavaScript事件处理。通过理解这些基本概念并进行实践，开发者能够创建出更富交互性和用户体验的网页应用。
在实现三级滑动菜单时，CSS将负责处理菜单项的布局、颜色、字体、过渡效果以及各个级别的展开和折叠动画。通过修改这个文件，开发者可以自定义菜单的视觉样式，使其符合项目的需求或者品牌规范。例如，你可以调整...