A5下载 - 努力做内容最丰富最安全的下载站！

最新软件 | 下载排行 | 软件发布 | 全部专题 |
网站导航

软件频道

软件下载 文章资讯 网站源码

安卓市场

安卓应用 安卓游戏

苹果市场

苹果应用 苹果游戏

游戏下载

苹果游戏 安卓游戏 电脑游戏

专题合集

软件专题 苹果专题 安卓专题

最近更新

电脑软件 安卓软件 苹果软件 源码

A5站长下载站

综合
  • 综合
  • 软件
  • 安卓
  • 游戏
  • 资讯
搜 索

热门搜索： 微信下载 喜马拉雅 蜻蜓fm 优酷 腾讯视频 虎牙直播

首页 电脑软件 源码频道 安卓频道 苹果市场 文章资讯
资讯分类
源码动态源码评测源码技巧网站运营网页制作编程开发安全相关软件教程软件新闻IDC资讯业界消息公告及帮助文档
当前位置：A5下载 > 编程开发 > 网站开发 > js实现兼容性好的微软官网导航下拉菜单效果

js实现兼容性好的微软官网导航下拉菜单效果

时间：2015-09-07 16:02作者：yezheng人气：177

 本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款微软官网导航菜单，兼容好的下拉菜单，微软官网导航效果，在IE6下没有动画效果，顺便也把IE6的效果给加上，兼容IE6。现在微软的官方网站正在使用，我觉得非常不错。

运行效果截图如下：

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-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程序设计有所帮助。

标签实现,兼容性,好的,微软,官网,导航,下拉菜单,效果,本文

相关推荐

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

热门阅览

最新排行

公众号

关于我们| 联系我们| 提交软件| 广告服务| 版权声明| 网站地图

Copyright © 2009-2024 A5下载 (www.A5xiazai.com) All Rights Reserved.

声明： 本站所有软件和文章来自互联网 如有异议 请与本站联系处理 本站为非赢利性网站 不接受任何赞助和广告

备案号：皖ICP备16006312号