经典的导航二级式导航菜单增强版

作者：lshdic   http://blog.csdn.net/lshdic/
<!--
呵呵我发的上一版相信大家都看过了吧，想一想上一版的确是不怎么华丽，而且上一版是针对表格内的连接A而定位的
而这一版的优点显然比上一版要华丽，速度一样快，而且是针对表格TD来定位的，TIMEOUT设置的也必要合理
以下代码完整范例请登陆 http://www.lshdic.com 查看,或到 http://www.lshdic.com/editdhtml.asp 自行编辑测试
-->

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002">
<META NAME ="KEYWORDS" CONTENT="lshdic,蓝丽网,html,css,javascript,vbscript,asp,sql,dhtml,vml,php,jsp,xml,vrml,vb,vc,delphi,开发,电脑,网络,编程,程序员,下载,软件,网页,编辑器,技术论坛">
<STYLE>
a{text-Decoration:none;}
a:hover{color:blue}
td{font-size:12px;color:555555}
.menu{border-right:0;border-top:0;border-bottom:0;border-left:1 solid white;color:666666}
</STYLE>
</HEAD>
<BODY vlink=#6772CD link=‘#6772CD‘>
<!--导航栏正式制作开始-->
<script>
function window.onerror(){
return true  //防止浏览器未下载完毕用户触发函数时出现错误提示
}
</script>

<!--整个导航栏HTML制作开始,其中并调用MOVESE函数构造一级菜单-->
<TABLE cellspacing=0 cellpadding=1 width=770 align=center style=‘border-width:0‘ bgcolor=‘BBE2F5‘
 frame=below rules=none bordercolordark=white bordercolorlight=dddddd id=menutd
onmouseover=over2() onmouseout=out2() onclick=click2()>
<TR align=center style=‘cursor:hand;‘>
<td height=20 id=menutd1 style=‘border:1 solid white;border-top:0;border-bottom:1 solid eeeeee;‘
goto=‘index.asp‘ onmouseover="movese(‘返回蓝丽网主页|-|娱乐视听-Flash|娱乐视听-经典电影|技术文章库|下载中心|编辑网页|编写程序|Lshdic2002|留言我们|网友中心-网友软件|网友中心-网友网站|网友中心-网友人才|蓝丽网技术论坛‘,‘index.asp||happy.asp|happy2.asp|wenzhang.asp|download.asp|editweb.asp|editdhtml.asp|lshdic2002.asp|bbs2.asp|friendsoft.asp|friendweb.asp|friendabout.asp|bbs/‘)">
回首页
</td>
<td width=150 style=‘cursor:default;background-color:#BBE2F5;‘ id=menutd2 goto=‘‘></td>
<Td class=menu onmouseover="movese(‘FlashMtv 经典音乐|MTV专集 经典电影‘,‘happy.asp|happy2.asp‘)" goto=‘happy.asp‘>娱乐视听</a>
</td>

<!--这个菜单使用了二级菜单,稍微较长,请自行修改-->
<Td class=menu
onmouseover="movese(‘网络编程语言**Html**Css**JavaScript**VbScript**Dhtml**Vml**ActiveX**Asp**Php**Jsp**Sql+Ado**Xml+*.net**其他网络技术|软件编程语言**Basic+VB**C语言+VC+CB**Java+VJ+J2EE**Delphi**VFP+汇编+Dos+其他|-|其他非编程学术|蓝丽所有网友问题|查找所有技术文章‘,‘被屏蔽网址**wenzhang.asp?str=Html<font style=display:none>Dhtml&page=1**wenzhang.asp?str=Css&page=1**wenzhang.asp?str=JavaScript/Js&lt;font style=display:none>Jsp&page=1**wenzhang.asp?str=Vbs&page=1**wenzhang.asp?str=Dhtml&page=1**wenzhang.asp?str=Vml&page=1**wenzhang.asp?str=ActiveX&page=1**wenzhang.asp?str=Asp&page=1**wenzhang.asp?str=Php&page=1**wenzhang.asp?str=Jsp&page=1**wenzhang.asp?str=Sql/Ado&page=1**wenzhang.asp?str=Xml/.Net/Xsl&page=1**wenzhang.asp?str=Fso/Wsh/Htc/正则/Object/iis/pws/Vrml&page=1|被屏蔽网址**wenzhang.asp?str=Basic/VB<font style=display:none>Vbs&page=1**wenzhang.asp?str=C语言/VC/CB&page=1**wenzhang.asp?str=VJ/J2EE/Java<font style=display:none>JavaScript&page=1**wenzhang.asp?str=Delphi&page=1**wenzhang.asp?str=PB/VF/汇编/单片机/苹果机/Dos&page=1||wenzhang.asp?str=英语/注册表:/微软/驱动程序/硬件/黑客/加密/解密/攻击/防御/入侵/红客/外语/业界/理论/趋势/破解/工作/程序员/设计师/新闻/社会/讲座/病毒/转载/原创&page=1|wenzhang.asp?str=请问/问题/难题/请教/帮忙/帮助/帮忙/sos/help/解决/有没有/帮帮/救命/救救/急/教我/愁/谁能/能不/可不可/行不/怎么/提问/怎样/才能/能让/没办法/过来/瞧一&page=1|bbs/instr.asp‘)"
 goto=‘wenzhang.asp‘>技术文章
</td>
<!--具有二级菜单效果的表格制作结束-->

<Td class=menu onmouseover="movese(‘进入下载中心|编程工具|电子教程|编程素材|Lshdic2002配套工具‘,‘download.asp|download.asp?screen=工具软件&page=1|download.asp?screen=电子教程&page=1|download.asp?screen=编程素材&page=1|download.asp?screen=LD配套工具&page=1‘)"
goto=‘download.asp‘>下载中心
</td>
<Td class=menu onmouseover="movese(‘进入网页编辑中心|下载编辑网页v2版‘,‘editweb.asp|download2.asp?id=48‘)"
goto=‘editweb.asp‘>编辑网页
</td>
<Td class=menu onmouseover="movese(‘进入程序编辑中心|下载编写程序v2版‘,‘editdhtml.asp|download2.asp?id=92‘,1000)"
goto=‘editdhtml.asp‘>编写程序
</td>
<Td class=menu align=center title=‘进行注册,领取Lshdic200X软件序列号的地方‘ style=‘font-size:13px‘
onmouseover="movese(‘查看领取Lshdic序列号|注册购买Lshdic序列号|注册购买流程简介‘,‘lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp‘)" goto=‘lshdic2002.asp‘>Lshdic
</td>
<Td class=menu onmouseover="movese(‘查看客户所有留言|签写新留言‘,‘bbs2.asp|bbs2fatie.asp‘)" goto=‘bbs2.asp‘>留言我们
</td>
<Td class=menu
onmouseover="movese(‘网 友 软 件|网 友 网 站|网 友 文 章|网 友 简 历|-|网 友 发 布 平 台‘,‘friendsoft.asp|friendweb.asp|friendword.asp|friendabout.asp||friendftp.asp‘,1000)"
goto=‘friendall.asp‘>网友中心
</td>
<Td class=menu align=center
onmouseover="movese(‘进入蓝丽技术论坛|-|网页版面美工设计|网页前台脚本编程|网页后台脚本编程|Xml与Net时代编程|软件开发交流论坛|讨论区及其他学术|-|会员登陆注册入口‘,‘bbs/||bbs/page.asp?dex=网页版面美工设计|bbs/page.asp?dex=网页前台脚本编程|bbs/page.asp?dex=网页后台脚本编程|bbs/page.asp?dex=Xml与Net时代编程|bbs/page.asp?dex=软件开发交流论坛|bbs/page.asp?dex=讨论区及其他学术||bbs/olduser.asp‘)"
goto=‘bbs/‘>技术论坛
</td></tr></TABLE>
<!--基本导航栏HTML构造结束,以下开始着手编写构造MOVESE等等菜单显示,定位,消失的脚本-->

<script>
var cleartime=1
function movese(menustr,menuhref){   //一级菜单的显示函数,menustr=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv.style.display=‘‘;        //首先显示的一级菜单
happydiv2.style.display=‘none‘;   //其次将以显示的二级菜单关闭
if(cleartime!=1)clearTimeout(cleartime)    //触发此函数通常是在mouseover时,因此取消"定时关闭菜单"的定时器
happydiv.style.posLeft=menutd.offsetLeft+event.srcElement.offsetLeft;   //一级菜单绝对位置"左"定位
happydiv.style.posTop=menutd.offsetTop+menutd.offsetHeight              //一级菜单绝对位置"上"定位
for(i=0;happydiv.rows.length;i++)happydiv.deleteRow()                   //清除菜单中以有的TD表格数据
str1=menustr.split(‘|‘);str2=menuhref.split(‘|‘)          //将menustr以"|"号分割为数组
for(i=0;i<str1.length;i++){                               //循环显示数据数据开始
tdstr=happydiv.insertRow().insertCell()                   //首先在一级菜单中查入一个<Tr><Td></Td></Tr>
if(str1[i].indexOf(‘**‘)==-1){                 //如果是不构成显示二级菜单的数据,以**做判断
if(str1[i]!="-")tdstr.innerHTML="<a href=‘"+str2[i]+"‘>"+str1[i]+"</a>";else tdstr.innerHTML="<hr size=1 color=#8BB4D9>"
}else{                                         //如果是能构成二级菜单的数据则...
str3=str1[i].split(‘**‘)                       //开始构件二级菜单驱动的显示字符
tdstr.innerHTML="<font onmouseover=movese2(‘"+str1[i]+"‘,‘"+str2[i].replace(/</g,"lshdicstr1").replace(/ /g,"lshdicstr2").replace(/>/g,"lshdicstr3")+"‘)>"+str3[0]+" →</font>"    //MOVEOVER时调用二级菜单显示函数MOVESE2,replace是将指定网址中的特殊字符替换为预定字符
}}
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,2000)   //一切完毕后加上定时关闭菜单,可选
}
function movese2(menustr2,menuhref2){   //二级菜单的显示函数,menustr2=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv2.style.display=‘‘;                    //第一步自然是先显示二级菜单的容器表格
if(cleartime!=1)clearTimeout(cleartime)        //第二步自然是清除定时器关闭的设置
happydiv2.style.posLeft=happydiv.offsetLeft+happydiv.offsetWidth;    //二级菜单定位"左"
temptop1=event.srcElement.parentElement.parentElement
happydiv2.style.posTop=happydiv.offsetTop+(temptop1.offsetHeight*temptop1.rowIndex)   //二级菜单定位"上",根据一级菜单中单个TD的高度*第几个计算
for(i=0;happydiv2.rows.length;i++)happydiv2.deleteRow()     //定位完毕,开始显示数据,首先要清除以显示的TD
str3=menustr2.split(‘**‘);str4=menuhref2.split(‘**‘)        //然后分解构成二级菜单的数据
for(i=1;i<str3.length;i++){        //按照数组的大小循环生成单个TD
tdstr2=happydiv2.insertRow().insertCell()     //在二级菜单中插入<Tr><Td></Td></Tr>
tdstr2.innerHTML="<a href=‘"+str4[i].replace(/lshdicstr1/g,‘<‘).replace(/lshdicstr2/g,‘ ‘).replace(/lshdicstr3/g,‘>‘)+"‘>"+str3[i]+"</a>"      //设定具体显示的数据,replace将预定字符替换过来
}
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,2000)  //一切完毕后加上定时关闭菜单,可选
}
function over1(){    //一,二级菜单中MOVEOVER事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘eeeeee‘;event.srcElement.style.borderTop=‘1 solid‘;
event.srcElement.style.borderBottom=‘1 solid‘}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){
event.srcElement.parentElement.bgColor=‘eeeeee‘;event.srcElement.parentElement.style.borderTop=‘1 solid‘;
event.srcElement.parentElement.style.borderBottom=‘1 solid‘}
}
function out1(){     //一,二级菜单中MOVEOUT事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘‘;event.srcElement.style.borderTop=‘‘;
event.srcElement.style.borderBottom=‘‘
}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){event.srcElement.parentElement.bgColor=‘‘;
event.srcElement.parentElement.style.borderTop=‘‘;event.srcElement.parentElement.style.borderBottom=‘‘}
}
function click1(){     //一,二级菜单时CLICK单击事件时使用本函数转到指定网址
if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags(‘A‘)(0).href
}
function over2(){    //基本的HTML导航栏在MOUSEOVER时使用本函数,设定背景,并清除定时关闭
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘white‘;if(cleartime!=1)clearTimeout(cleartime)}
}
function out2(){     //基本的HTML导航栏在MOUSEOUT时使用本函数,设定背景,并加上定时关闭菜单的效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘‘;
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,500)}
}
function click2(){   //基本的HTML导航栏在CLICK单击时转到的网址,目标网址使用自定义的HTML属性GOTO做目标
location.href=event.srcElement.goto
}
function document.onclick(){    //页面单击时关闭所有菜单
happydiv.style.display=‘none‘;happydiv2.style.display=‘none‘
}
</script>
<table id=happydiv style=‘position:absolute;z-index:5;display:none;cursor:hand;border-top:0;border-bottom:0‘
 bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
onmouseover="over1();clearTimeout(cleartime)"
onmouseout="out1();temp1=‘none‘;cleartime=setTimeout(‘happydiv.style.display=temp1;happydiv2.style.display=temp1‘,500)"
onclick=click1()>
<tr><Td></td></tr>
</table>    <!--一级容器菜单显示表格结束-->
<table id=happydiv2 style=‘position:absolute;z-index:5;display:none;cursor:hand;border-left:0‘
bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
onmouseover="over1();clearTimeout(cleartime)"
onmouseout="out1();temp1=‘none‘;cleartime=setTimeout(‘happydiv.style.display=temp1;happydiv2.style.display=temp1‘,500)"
onclick=click1()>
<tr><Td></td></tr>
</table>    <!--二级扩展菜单显示表格结束-->

<!--
整个程序就是这样的,乍看来乱不可言,细看来则条理清晰,非常实用,几乎没有多余代码,由于定义了函数,所以移植性和可塑性很强
其中数据为 - 相当于"WINDOWS菜单中的水平线"
-->

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net

原文地址：https://www.cnblogs.com/siwnchs/p/10122652.html

时间： 2024-10-09 11:12:00

经典的导航二级式导航菜单增强版的相关文章

js导航二级下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纵向导航二级弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

五中常用简洁后台导航菜单（一级导航，二级导航，手风琴式导航，左或右悬浮式导航，树状导航）

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

导航条——收缩式导航菜单

1.概述 在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点 本实例主要是应用JavaScript控制显示和隐藏表格的功能,实现收缩式导航菜单的功能.单击导航超链接,显示当前菜单的内容,隐藏上一个显示的菜单,在隐藏菜单时,让其有规律地隐藏,从而实现展开或收缩的动画效果. 3.具体实现 (1)创建index.jsp页,在页面中添加一级导航菜单项以及二级导航菜单,关键代码如下: <tr style=&qu

导航条——弹出式悬浮菜单

1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

web标准(复习)--4 纵向导航菜单及二级弹出菜单

今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作 先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,即会自动插入ul和li,然后修改文字内容为你需要的内容. <style type="text/css&

iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果. ①顶部标签导航栏topCategoryListScrollView加载显示分类数据,下方con

在同一个页面设置两个选项卡菜单 滑动式导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>唐山塑钢门窗</title>