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

前端技术 2023/09/04 JavaScript
本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下：
这是一款微软官网导航菜单，兼容好的下拉菜单，微软官网导航效果，在IE6下没有动画效果，顺便也把IE6的效果给加上，兼容IE6。现在微软的官方网站正在使用，我觉得非常不错。
运行效果截图如下：
在线演示地址如下：
http://demo.phpstudy.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程序设计有所帮助。
本文地址：https://www.stayed.cn/item/9589
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请联系我
微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网
我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)