js实现兼容性好的微软官网导航下拉菜单效果
作者：企鹅 发布时间：2024-04-22 13:09:20
标签：js,导航,下拉菜单
本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下：
这是一款微软官网导航菜单，兼容好的下拉菜单，微软官网导航效果，在IE6下没有动画效果，顺便也把IE6的效果给加上，兼容IE6。现在微软的官方网站正在使用，我觉得非常不错。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/
具体代码如下：
<!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-Type" content="text/html; charset=utf-8" />
<title>微软官网导航菜单</title>
<style type="text/css">
body{margin:0px;text-align:left;padding:0px;font:12px/140％ Arial,Verdana,"微软雅黑";background:#d1d1d1;}
ul{margin:0px;padding:0px;list-style-type:none;float:left;}
a:focus {outline:0;}
.nav{width:920px;height:28px;background:#f4f4f4;margin:20px auto;border-radius:5px;}
.nav li{width:auto;line-height:20px;float:left;position:relative;}
.nav li.msMnu_Item a{border:1px solid #f4f4f4;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;}
.nav li.msMnu_Item a:hover{border:1px solid #999;background:#e4ecf4;}
.nav li.msMnu_hove a{border:1px solid #999;border-bottom:1px solid #fff;background:#fff;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;z-index:1000;}
.list{overflow:hidden;position:absolute;height:0px;top:27px;left:0;border-radius:0 8px 8px 8px;}
.list div{background:#fff;overflow:hidden;padding:12px 0 12px 0;border:1px solid #999;float:left;}
.list ul{padding:0px 10px;}
.list li{margin:0px;padding:0px;width:170px;}
.list li h3{margin:0px;padding:0px;font-size:12px;color:#4f4f4f;border-bottom:1px solid #e3e3e3;line-height:20px;width:100％;float:left;}
.list li ul{width:170px;margin:0px;padding:5px 0;}
.list li ul li.lis a{width:170px;height:22px;color:#0060a6;font-size:12px;line-height:20px;text-decoration:none;margin:0px;padding:0px;text-indent:3px;border:none;}
.list li ul li.lis a:hover{color:#fff;background:#0060a6;}
</style>
<script type="text/javascript">
function Class(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
};
function css(obj, attr, value){
if(arguments.length == 2){
var style = obj.style,
currentStyle = obj.currentStyle;
if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];
}else if(arguments.length == 3){
switch(attr){
case "width":
case "height":
case "paddingTop":
case "paddingRight":
case "paddingBottom":
case "paddingLeft":
case "top":
case "right":
case "bottom":
case "left":
case "marginTop":
case "marginRigth":
case "marginBottom":
case "marginLeft":
obj.style[attr] = value + "px";
break;
case "opacity":
obj.style.filter = "alpha(opacity=" + value + ")";
obj.style.opacity = value / 100;
break;
default:
obj.style[attr] = value
}
}
};
function extend(destination, source){
for (var propName in source) destination[propName] = source[propName];
return destination
};
function doMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.iSpeed = 0;
fnEnd = extend({
type: "buffer",
callback: function() {}
}, fnEnd);
obj.timer = setInterval(function(){
var iCur = 0,
iStop = true;
for(var propName in json){
iCur = parseFloat(css(obj, propName));
propName == 'opacity' && (iCur = Math.round(iCur * 100));
switch(fnEnd.type){
case 'buffer':
obj.iSpeed = (json[propName] - iCur) / 3;
obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
case 'elasticity':
obj.iSpeed += (json[propName] - iCur) / 3;
obj.iSpeed *= 0.75;
Math.abs(json[propName] - iCur) <= 1 && Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
case 'accelerate':
obj.iSpeed = obj.iSpeed + 3;
iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
}
}
if(iStop){
clearInterval(obj.timer);
obj.timer = null;
obj.iSpeed = 0;
fnEnd.callback();
}
},30);
};
</script>
<script type="text/javascript">
window.onload = function(){
var aMenu = Class(document, 'menu');
var aList = Class(document, 'list');
var i = iNow = zIndex = 0;
for(i=0;i<aMenu.length;i++){
aMenu[i].index = i;
aMenu[i].onclick = function(e){
var oEvent = e || event;
var aDiv = this.parentNode.getElementsByTagName('div');
var aMenuList = Class(this.parentNode,'menuList');
var iWidth = aMenuList.length * aMenuList[0].offsetWidth + 3;
//还原上一个动作
flexible();
if(aDiv[0].style.height==aDiv[1].offsetHeight+'px'){
flexible();
}else{
//当前动作
this.parentNode.className = 'msMnu_hove';
aDiv[0].style.zIndex = zIndex++;
if(aMenuList.length>1)aDiv[0].style.width = iWidth + 'px';
doMove(aDiv[0], {height:aDiv[1].offsetHeight});
}
//记住上一个
iNow = this.index;
oEvent.cancelBubble = true;
};
}
document.onclick = function(){flexible();};
function flexible(){
aList[iNow].parentNode.className = 'msMnu_Item';
aList[iNow].style.zIndex = 0;
doMove(aList[iNow], {height:0});
}
};
</script>
</head>
<body>
<div class="nav">
<ul>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">Windows</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>Windows</h3>
<ul>
<li class="lis"><a href="javascript:;">Windows 7</a></li>
<li class="lis"><a href="javascript:;">Windows Vista</a></li>
<li class="lis"><a href="javascript:;">Windows XP</a></li>
<li class="lis"><a href="javascript:;">Windows 企业版</a></li>
<li class="lis"><a href="javascript:;">Windows Phone</a></li>
<li class="lis"><a href="javascript:;">Internet Explorer 8</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">Office</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>Office 产品</h3>
<ul>
<li class="lis"><a href="javascript:;">Office 标准版</a></li>
<li class="lis"><a href="javascript:;">Office 家庭和学生版</a></li>
<li class="lis"><a href="javascript:;">Office 中小企业版</a></li>
<li class="lis"><a href="javascript:;">Office 专业版</a></li>
<li class="lis"><a href="javascript:;">Office 专业增强版</a></li>
<li class="lis"><a href="javascript:;">Office 企业版</a></li>
</ul>
<h3>活动与促销</h3>
<ul>
<li class="lis"><a href="javascript:;">Office 近期活动与促销</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:1px solid #e3e3e3;">
<li>
<h3>Office 资源</h3>
<ul>
<li class="lis"><a href="javascript:;">Office 购买主页</a></li>
<li class="lis"><a href="javascript:;">Office 试用版免费下载</a></li>
<li class="lis"><a href="javascript:;">Office for Mac 2011</a></li>
<li class="lis"><a href="javascript:;">Office Web Apps</a></li>
<li class="lis"><a href="javascript:;">Office 更新和程序下载</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">所有产品</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>服务器</h3>
<ul>
<li class="lis"><a href="javascript:;">所有服务器产品</a></li>
<li class="lis"><a href="javascript:;">Lync Server</a></li>
<li class="lis"><a href="javascript:;">Windows Server</a></li>
<li class="lis"><a href="javascript:;">Windows Small Business Server</a></li>
<li class="lis"><a href="javascript:;">Windows Home Server</a></li>
<li class="lis"><a href="javascript:;">Windows HPC Server</a></li>
<li class="lis"><a href="javascript:;">SQL Server</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:1px solid #e3e3e3;">
<li>
<h3>商业应用</h3>
<ul>
<li class="lis"><a href="javascript:;">UC 统一沟通</a></li>
<li class="lis"><a href="javascript:;">云计算</a></li>
<li class="lis"><a href="javascript:;">商业软件平台</a></li>
<li class="lis"><a href="javascript:;">企业生产力基础架构</a></li>
</ul>
<h3>开发工具</h3>
<ul>
<li class="lis"><a href="javascript:;">Visual Studio 开发工具</a></li>
<li class="lis"><a href="javascript:;">MSDN 开发人员网站</a></li>
</ul>
<h3>设计与个人体验</h3>
<ul>
<li class="lis"><a href="javascript:;">Expression</a></li>
<li class="lis"><a href="javascript:;">Silverlight</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:#e3e3e3;">
<li>
<h3>个人生活与娱乐产品</h3>
<ul>
<li class="lis"><a href="javascript:;">DirectX （英）</a></li>
<li class="lis"><a href="javascript:;">微软拼音输入法</a></li>
<li class="lis"><a href="javascript:;">Skype</a></li>
</ul>
<h3>硬件</h3>
<ul>
<li class="lis"><a href="javascript:;">微软硬件首页</a></li>
<li class="lis"><a href="javascript:;">鼠标</a></li>
<li class="lis"><a href="javascript:;">键盘</a></li>
</ul>
<h3>Windows Phone</h3>
<ul>
<li class="lis"><a href="javascript:;">Windows Phone 首页</a></li>
<li class="lis"><a href="javascript:;">应用与下载</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">下载</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>下载中心</h3>
<ul>
<li class="lis"><a href="javascript:;">微软中国下载中心</a></li>
<li class="lis"><a href="javascript:;">Windows 下载</a></li>
<li class="lis"><a href="javascript:;">Office 下载</a></li>
<li class="lis"><a href="javascript:;">Server 下载</a></li>
<li class="lis"><a href="javascript:;">Office Marketplace 下载</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:1px solid #e3e3e3;">
<li>
<h3>最新下载</h3>
<ul>
<li class="lis"><a href="javascript:;">Internet Explorer 8</a></li>
<li class="lis"><a href="javascript:;">Internet Explorer 9</a></li>
<li class="lis"><a href="javascript:;">Office 2010 试用版</a></li>
<li class="lis"><a href="javascript:;">Silverlight</a></li>
<li class="lis"><a href="javascript:;">Windows 7 Service Pack 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">安全与更新</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>安全与更新</h3>
<ul>
<li class="lis"><a href="javascript:;">安全中心首页</a></li>
<li class="lis"><a href="javascript:;">Microsoft Update</a></li>
<li class="lis"><a href="javascript:;">Office Update</a></li>
<li class="lis"><a href="javascript:;">微软安全软件</a></li>
<li class="lis"><a href="javascript:;">恶意软件删除工具</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">培训与支持</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>产品支持</h3>
<ul>
<li class="lis"><a href="javascript:;">帮助与支持首页</a></li>
<li class="lis"><a href="javascript:;">Windows 帮助</a></li>
<li class="lis"><a href="javascript:;">Office 帮助</a></li>
<li class="lis"><a href="javascript:;">TechNet 支持</a></li>
<li class="lis"><a href="javascript:;">MSDN 支持</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:1px solid #e3e3e3;">
<li>
<h3>活动</h3>
<ul>
<li class="lis"><a href="javascript:;">微软活动中心</a></li>
<li class="lis"><a href="javascript:;">培训</a></li>
<li class="lis"><a href="javascript:;">微软 IT 课堂</a></li>
<li class="lis"><a href="javascript:;">微软在线培训及认证</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">立即购买</a>
<div class="list">
<div>
<ul class="menuList">
<li>
<h3>立即购买</h3>
<ul>
<li class="lis"><a href="javascript:;">微软产品选购平台首页</a></li>
<li class="lis"><a href="javascript:;">个人用户选购平台</a></li>
<li class="lis"><a href="javascript:;">企业用户选购平台</a></li>
<li class="lis"><a href="javascript:;">特别优惠</a></li>
<li class="lis"><a href="javascript:;">批量许可授权</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">解决方案</a>
<div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
<div>
<ul class="menuList">
<li>
<h3>合作伙伴解决方案</h3>
<ul>
<li class="lis"><a href="javascript:;">查找合作伙伴解决方案</a></li>
</ul>
<h3>企业和组织</h3>
<ul>
<li class="lis"><a href="javascript:;">Microsoft Dynamics ERP & CRM</a></li>
<li class="lis"><a href="javascript:;">大型企业信息化专区</a></li>
<li class="lis"><a href="javascript:;">教育信息化专区</a></li>
<li class="lis"><a href="javascript:;">微软中小企业在线体验中心</a></li>
<li class="lis"><a href="javascript:;">微软正版授权中心</a></li>
</ul>
</li>
</ul>
<ul class="menuList" style="border-left:1px solid #e3e3e3;">
<li>
<h3>开发人员和 IT 专业人士</h3>
<ul>
<li class="lis"><a href="javascript:;">MSDN</a></li>
<li class="lis"><a href="javascript:;">TechNet</a></li>
<li class="lis"><a href="javascript:;">IT 专业社区</a></li>
</ul>
<h3>中国案例中心</h3>
<ul>
<li class="lis"><a href="javascript:;">微软中国案例中心</a></li>
</ul>
<h3>微软技巧与帮助</h3>
<ul>
<li class="lis"><a href="javascript:;">微软家庭馆</a></li>
<li class="lis"><a href="javascript:;">微软工作馆</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">合作伙伴</a>
<div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
<div>
<ul class="menuList">
<li>
<h3>合作伙伴</h3>
<ul>
<li class="lis"><a href="javascript:;">微软合作伙伴网络</a></li>
<li class="lis"><a href="javascript:;">查找微软合作伙伴</a></li>
<li class="lis"><a href="javascript:;">微软合作伙伴网络权益概览</a></li>
<li class="lis"><a href="javascript:;">加入微软合作伙伴网络（MPN）</a></li>
<li class="lis"><a href="javascript:;">订阅微软行动宝盒（MAPs）</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="msMnu_Item">
<a href="javascript:;" class="menu">关于微软</a>
<div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
<div>
<ul class="menuList">
<li>
<h3>关于微软</h3>
<ul>
<li class="lis"><a href="javascript:;">关于微软</a></li>
<li class="lis"><a href="javascript:;">微软新闻</a></li>
<li class="lis"><a href="javascript:;">微软在线视频中心</a></li>
<li class="lis"><a href="javascript:;">投资者关系 (英)</a></li>
<li class="lis"><a href="javascript:;">招贤纳士</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
0
投稿猜你喜欢
Python 函数一、什么是模块化程序设计？在进行程序设计时将一个大程序按照功能划分为若干小程序模块每个小程序模块完成一个确定的功能并在这些- asyncio 是 python 力推多年的携程库，与其 线程库 相得益彰，更轻量，并且协程可以访问同一进程中的变量，不需要进程间通信来传递
- 什么是CookieCookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器
- （1）以这张表为例：CREATE TABLE `test` ( `id` varchar(32) CHARACTER
- 红包：Lena椒盐噪声图片：# -*- coding: utf-8 -*-"""Created on Sat
- 前言上篇文章给大家带来了PHP中最基本的特性，不知道大家学习的怎样了，回顾上文，我们讲了MD5强弱碰撞以及正则匹配的绕过，总体来看还是很简单
- ASP中从数据库读取二进制文件数据代码：<％driver_name1="DRIVER={Microsoft&n
- 网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一幅幅精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭
- 1、什么是线性规划线性规划（Linear programming），在线性等式或不等式约束条件下求解线性目标函数的极值问题，常用于解决资源分
- 编译安装全是坑……第一遍装完无法使用pip，报错找不到ssl模块。各种报错：pip is configured with locations
- 这篇文章主要介绍了postman和python mock测试过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- Request.Cookies.Clear()这个方法并不是删除Cookie 删除 Cookie（即从用户的硬盘中物理移除 Cookie）是
- 在做机器学习的时候,遇到这样一个数据集...一共399行10列,1-9列是用不定长度的空格分割,第9-10列之间用'\t'分
- 数据库在高并发的场景下使用外键约束会有锁问题并且使用外键会增加运维成本，所以很多公司都规定生产环境的数据库禁止使用外键。那么不使用外键约束的
- *和&的区别 :& 是取地址符号 , 即取得某个变量的地址 , 如 ; &a*是指针运算符 , 可以表示一个变量是指
- 大家在安装程序或下载文件时，通常都能看到进度条，提示你当前任务的进度。其实，在python中实现这个功能很简单，下面是具体代码。在实际应用中
- 任何一个行业里，当有一头近乎垄断的大象盘踞着的时候，生活在大象身后的蚂蚁们既是悲哀又是幸运的。悲哀的是市场已近乎被大象垄断留给他们的空间已经
- 前言：工作中遇到以下小问题，解决方法如下，可能比较暴力，暂时留档，再进行优化。要求：将列表中json的 ‘id&
- 在实际工作中，有些场景下，因为产品既有功能限制，不支持特大文件的直接处理，需要把大文件进行切割处理。当然可以通过UltraEdit编辑工具，
- 下面给大家介绍下小程序弹窗禁止页面滚动的效果：在小程序弹窗时，外部页面禁止滚动， 可以在最外部容器设置catchtouchmove但是如果弹
