网页中滑动导航菜单制作
<html>
<head>
<title>网页特效-导航菜单-滑动的二级导航菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.submenu {
Z-INDEX: 2; LEFT: 100px; margin-left:501px; VISIBILITY: hidden; WIDTH: 500px; POSITION: absolute; TOP: 69px; HEIGHT: 22px; BACKGROUND-COLOR: #eaeaea
}
a { font-family: "Tahoma"; font-size: 12px; color: #000000; text-decoration: none}
a:hover { font-family: "Tahoma"; font-size: 12px; color: #00CCFF; text-decoration: none}
</style>
<script>
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** 判断浏览器版本 BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator. We do strict client detection.
// If you want to allow spoofing, take out the tests for opera and webtv.
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) );
var is_nav5 = (is_nav && (is_major == 5));
var is_nav5up = (is_nav && (is_major >= 5));
var is_ie = (agt.indexOf("msie") != -1);
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
// or if this is the first browser window opened. Thus the
// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_opera = (agt.indexOf("opera") != -1);
var is_webtv = (agt.indexOf("webtv") != -1);
// *** 判断JS版本 JAVASCRIPT VERSION CHECK ***
var is_js;
if (is_nav2 || is_ie3) is_js = 1.0
else if (is_nav3 || is_opera) is_js = 1.1
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3
else if (is_nav5) is_js = 1.4
// NOTE: In the future, update this code when newer versions of JS
// are released. For now, we try to provide some upward compatibility
// so that future versions of Nav and IE will show they are at
// *least* JS 1.x capable. Always check for JS version compatibility
// with > or >=.
else if (is_nav && (is_major > 5)) is_js = 1.4
else if (is_ie && (is_major > 5)) is_js = 1.3
// HACK: no idea for other browsers; always check for JS version with > or >=
else is_js = 0.0;
// ***判断操作系统类型 PLATFORM ***
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
// Win32, so you can't distinguish between Win95 and WinNT.
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));
// is this a 16 bit compiled version?
var is_win16 = ((agt.indexOf("win16")!=-1) || (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("windows 16-bit")!=-1) );
var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) || (agt.indexOf("windows 16-bit")!=-1));
// NOTE: Reliable detection of Win98 may not be possible. It appears that:
// - On Nav 4.x and before you'll get plain "Windows" in userAgent.
// - On Mercury client, the 32-bit version will return "Win98", but
// the 16-bit version running on Win98 will still return "Win95".
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 || ((is_major >= 4) && (navigator.platform == "Win32")) || (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));
var is_os2 = ((agt.indexOf("os/2")!=-1) || (navigator.appVersion.indexOf("OS/2")!=-1) || (agt.indexOf("ibm-webexplorer")!=-1));
var is_mac = (agt.indexOf("mac")!=-1);
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || (agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) || (agt.indexOf("powerpc")!=-1)));
var is_sun = (agt.indexOf("sunos")!=-1);
var is_sun4 = (agt.indexOf("sunos 4")!=-1);
var is_sun5 = (agt.indexOf("sunos 5")!=-1);
var is_suni86 = (is_sun && (agt.indexOf("i86")!=-1));
var is_irix = (agt.indexOf("irix") !=-1); // SGI
var is_irix5 = (agt.indexOf("irix 5") !=-1);
var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));
var is_hpux = (agt.indexOf("hp-ux")!=-1);
var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));
var is_hpux10 = (is_hpux && (agt.indexOf("10.")!=-1));
var is_aix = (agt.indexOf("aix") !=-1); // IBM
var is_aix1 = (agt.indexOf("aix 1") !=-1);
var is_aix2 = (agt.indexOf("aix 2") !=-1);
var is_aix3 = (agt.indexOf("aix 3") !=-1);
var is_aix4 = (agt.indexOf("aix 4") !=-1);
var is_linux = (agt.indexOf("inux")!=-1);
var is_sco = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);
var is_unixware = (agt.indexOf("unix_system_v")!=-1);
var is_mpras = (agt.indexOf("ncr")!=-1);
var is_reliant = (agt.indexOf("reliantunix")!=-1);
var is_dec = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) || (agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) || (agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1));
var is_sinix = (agt.indexOf("sinix")!=-1);
var is_freebsd = (agt.indexOf("freebsd")!=-1);
var is_bsd = (agt.indexOf("bsd")!=-1);
var is_unix = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux || is_sco ||is_unixware || is_mpras || is_reliant || is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);
var is_vms = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));
var usernameSwf = new Object();
InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
var layer= new String();
var style= new String();
var i, current;
var running = 0;
//浏览器对层的支持 browser check for layers
if (is_nav5up){
style=".style";
}else if (is_nav4){
layer=".layers";
style="";
}else if (is_ie4up){
layer=".all";
style=".style";
}
function rollOver(name,flg){
hidelayer();
changeState(name,'visible');
reset_bg();
//alert(name);
//alert(flg);
set_bg(name+"0", flg);
}
// 层的动作
function rollOut(name){
var loImage;
var chkImage;
layerRef=name;
if ((is_nav4) || (is_ie4up)){
lyr="document"+layer+"['"+layerRef+"']"+style+".visibility";
}else if (is_nav5up){
lyr="document.getElementById('"+layerRef+"').style.visibility";
}
}
var n,i,startLeft,endLeft;
var moveX = new Array(1.00, 0.85, 0.64, 0.48, 0.37, 0.28, 0.21, 0.16, 0.12, 0.09, 0.068, 0.05, 0.036, 0.022, 0.01, 0.001, 0.00);
//var moveX = new Array(16, 15, 14,13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.00);
function changeState(layerRef,state){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.visibility='"+state+"'";
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".visibility='"+state+"'";
}
if(current != layerRef){
current = layerRef;
running = 1;
n = 1;
i = -500;//层移动进入画面开始的位置：+数可以显示出回弹效果，-数则直接从左到右进入
startLeft =500;//层移动开始的位置：与层移动结束后的相对长度XXXpx位置
endLeft = (document.body.clientWidth-500)/2-1;//层移动结束后的位置：距离右边距XXXpx
eval(evallayer);
moveLayer(i,layerRef);
}else{
eval(evallayer);
}
}
function moveLayer(i,layerRef){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.left="-i;
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".left="+i;
}
if((i<endLeft) && (running==1) && (current==layerRef)){
n++;
i = +(startLeft*moveX[n])-endLeft;//这两个参数的+ -决定了移动的方向，还要配合function changeState(layerRef,state)参数
eval(evallayer);
setTimeout('moveLayer('+i+',"'+layerRef+'")',75);//最后这个参数为移动速度，越大越慢
}else if((running==1) && (current==layerRef)){
running = 0;
}
}
function hidelayer(){
if (is_nav5up){
eval("document.getElementById('m00').style.visibility='hidden'");
eval("document.getElementById('m01').style.visibility='hidden'");
eval("document.getElementById('m02').style.visibility='hidden'");
eval("document.getElementById('m03').style.visibility='hidden'");
eval("document.getElementById('m04').style.visibility='hidden'");
eval("document.getElementById('m05').style.visibility='hidden'");
eval("document.getElementById('m06').style.visibility='hidden'");
eval("document.getElementById('m07').style.visibility='hidden'");
}else{
eval("document"+layer+"['m00']"+style+".visibility='hidden'");
eval("document"+layer+"['m01']"+style+".visibility='hidden'");
eval("document"+layer+"['m02']"+style+".visibility='hidden'");
eval("document"+layer+"['m03']"+style+".visibility='hidden'");
eval("document"+layer+"['m04']"+style+".visibility='hidden'");
eval("document"+layer+"['m05']"+style+".visibility='hidden'");
eval("document"+layer+"['m06']"+style+".visibility='hidden'");
eval("document"+layer+"['m07']"+style+".visibility='hidden'");
}
}
function set_bg(name, bg){
//alert(name);
eval("document.all[/""+name+"/"]").className = bg;
}
function reset_bg(){
for(i=0 ; i<8 ; i++){
set_bg("m0" + i + "0", 'bg1');
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="submenu" id="m00" name="m00" style="left: 0px; top: 40px; width: 500px; height: 22px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0" align="center">
<tr>
<td>→ <a href="#">长城集团</a> | <a href="#">公司介绍</a> | <a href="#">总裁致词</a> | <a href="#">组织架构</a> | <a href="#">公司业务</a> | <a href="#">资质与获奖</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m01" name="m01" style="height: 22px; width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">公司动态</a> | <a href="#">媒体关注</a> | <a href="#">专题报道</a> </td>
</tr>
</table>
</div>
<div class="submenu" id="m02" name="m02" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">产品概述</a> | <a href="#">数字监控系统</a> | <a href="#">EIPOA</a> | <a href="#">CRM</a> | <a href="#">VOD系统</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m03" name="m03" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">方案概述</a> | <a href="#">数字监控系统</a> | <a href="#">企业ERP</a> | <a href="#">电子政务</a> | <a href="#">企业信息门户</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m04" name="m04" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">OA</a> | <a href="#">CRM</a> | <a href="#">VOD</a> | <a href="#">数字监控</a> | <a href="#">系统集成</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m05" name="m05" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">服务理念</a> | <a href="#">常见问题解答</a> | <a href="#">业务联系</a> | <a href="#">信息反馈</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m06" name="m06" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">合作政策</a> | <a href="#">商务合作</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m07" name="m07" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">招聘总览</a> | <a href="#">产品类</a> | <a href="#">技术类</a> | <a href="#">市场类</a> | <a href="#">行政财务类</a></td>
</tr>
</table>
</div>
<table cellSpacing="1" cellPadding="4" width="500" bgColor="#999999" border="0" align="center">
<tr vAlign="bottom" align="middle">
<td id="m000"><a οnmοuseοver="rollOver('m00');" οnmοuseοut="rollOut('m00');" href="#">关于我们</a></td>
<td id="m010"><a οnmοuseοver="rollOver('m01');" οnmοuseοut="rollOut('m01');" href="#">新闻动态</a></td>
<td id="m020"><a οnmοuseοver="rollOver('m02');" οnmοuseοut="rollOut('m02');" href="#">应用产品</a></td>
<td id="m030"><a οnmοuseοver="rollOver('m03');" οnmοuseοut="rollOut('m03');" href="#">解决方案</a></td>
<td id="m040"><a οnmοuseοver="rollOver('m04');" οnmοuseοut="rollOut('m04');" href="#">成功案例</a></td>
<td id="m050"><a οnmοuseοver="rollOver('m05');" οnmοuseοut="rollOut('m05');" href="#">客户服务</a></td>
<td id="m060"><a οnmοuseοver="rollOver('m06');" οnmοuseοut="rollOut('m06');" href="#">对外合作</a></td>
<td id="m070"><a οnmοuseοver="rollOver('m07');" οnmοuseοut="rollOut('m07');" href="#">求才若宝</a></td>
</tr>
</table>
</body>
</html>
网页中滑动导航菜单制作相关推荐
- 网页导航菜单制作——快，很快，非常快
网页导航菜单已成为网页不可或缺的一部分,或许我们误以为它与网页是一个整体,而忽视了他的存在.不可否认,网页导航菜单与网页有密不可分的联系.但是,网页导航菜单也是需要独立编写的,特别是flash网页导航 ...
- 20个很酷的CSS3导航菜单制作教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: 1 <html> 2 &l ...
- Qt编写自定义控件：高亮滑动导航菜单
代码: #ifndef HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H #define HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H#in ...
- 列表中的导航菜单应用
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
- 网页前端：导航菜单的制作
文章目录 前言 具体操作 总结 前言 实验目的: (1)掌握有序列表和无序列表,在导航菜单中的工作过程: (2)导航菜单能够根据鼠标的悬浮进行样式的变化. 实验内容: 根据要求完成以下网页菜单: 1. ...
- 垂直导航菜单制作技巧一
我们导航菜单的制作一般都用ul li a这几个标签,但是我们可以思考一个问题,这个a标签是一个行内标签,而ul 和li是块级标签,我们写在li上面的样式可以写在最里面的a上面 HTML代码如下: 1 ...
- 网页中滚动字幕的制作
实现滑动字幕效果的标签是<marquee>,需要滑动的文字</marquee>,该标签内有许多属性, 常用属性详解: 1.Align 属性:设置字幕的对齐方式,其参数有3个,l ...
- ElementUi中NavMenu 导航菜单router用法
问题引出 写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
最新文章
- 如何在window系统VS中设置boost编程环境
- Hive学习之路 （十六）Hive分析窗口函数(四) LAG、LEAD、FIRST_VALUE和LAST_VALUE
- 《ASP.NET Core 微服务实战》译者序
- apache shiro_Apache Shiro第1部分–基础
- 阿里腾讯今日头条纷纷翻牌子，ClickHouse到底有什么本事？
- coreboot学习6：ramstage阶段之芯片初始化流程
- 全年营业额怎么计算_超全！各种税种计算公式！你一定要知道
- 大数据的价值与发展趋势
- java 打印素数_Java 素数打印
- 【LitJson】如何判断字符串中是否有某个key
- 求公共子树（后缀树法）
- [浏览器插件]经典书签同步工具xmarks与chrome自带同步功能比较
- 喷血之举--割肉之痛
- 开心网辅助程序--开心网争车位助手正式发布（含源码）
- AR技术和VR技术的区别是什么?
- 论文笔记：CVPR2021 Bottom-Up Shift and Reasoning for Referring Image Segmentation
- 7-过零检测算法分析信号周期（app-designer
- 化妆品级羧甲基纤维素钠（CMC）-市场现状及未来发展趋势
- 红米note3全网通版刷机救砖 9008强刷（无需短接）
- linux中默认文件666和目录777的权限关系
热门文章
- .net 导出excel_使用 EasyPOI 优雅导出Excel模板数据（含图片）
- 多元函数的高阶微分公式 与 Taylor公式
- 红黑树（算法导论版）
- 新手入门，想用VB给班上写一个自动播放上下课铃声的程序，求教
- “旅行青蛙”游戏外挂藏风险 苹果：或至个人ID泄露
- 配置文件和日志文件导出方法
- 第七天 位置参数 变量运算if case || find locate compress
- uni-app Android端获取设备已连接的WiFi IP地址
- easypoi 语法_高中英语语法：高中英语必修1选修8全八册知识点总结
- vue2.0 使用xlsx读取excel文件数据 操作流程 以及文件中特殊日期数据的处理