首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 07, 2015

本文实例讲述了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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
Vue实现日历小插件
Jun 26 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
mysqldump(1) sentinel(1) Stater(1) ACID(1) minio(1) Windows server 2003(1) XPathParser(1) appdata(1) protocol(1) sock(2)
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JavaScript字符串对象substring方法入门实例（用于截取字符串）
2014/10/17 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue中进行微博分享的实例讲解
2019/10/14 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python读取和保存视频文件
2018/04/16 Python
Python中一般处理中文的几种方法
2019/03/06 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
python操作redis数据库的三种方法
2020/09/10 Python
澳大利亚当地最大的时装生产商：Cue
2018/08/06 全球购物
Moss Bros官网：英国排名第一的西装店
2020/02/26 全球购物
房地产营销策划方案
2014/02/08 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
职工年度考核评语
2014/12/31 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书