首页
所有分类
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 相关文章推荐
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JavaScript获取tr td 的三种方式全面总结（推荐）
Aug 15 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
详解小程序开发经验：多页面数据同步
May 18 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
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
索引(8) python小游戏(5) 索尼ICF-36(1) tcp/ip(1) 德生2P3(1) IP(1) 备份(2) 全局锁(1) 数据库卡死(1) update(2)
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php发送post请求的三种方法
2014/02/11 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python机器学习之随机森林（七）
2018/03/26 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
小孩百日宴答谢词
2014/01/15 职场文书
电工工作职责范本
2014/02/22 职场文书
园艺师求职信
2014/04/27 职场文书
怀念母亲教学反思
2014/04/28 职场文书
家长建议怎么写
2014/05/15 职场文书
群众路线领导对照材料
2014/08/23 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
债务纠纷起诉书
2015/05/20 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
PyTorch的Debug指南
2021/05/07 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL