首页
所有分类
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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
原生JavaScript实现留言板
Jan 10 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
电路(15) 探测器(1) 发烧友(1) 实习报告(1) 原理(1) 单管机(1) AM(1) 频偏(1) 春雷3P7(1) 鉴频器(1)
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Bootstrap嵌入jqGrid，使你的table牛逼起来
2016/05/05 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python线程指南分享
2019/11/19 Python
pytorch 常用线性函数详解
2020/01/15 Python
美国高品质个性化珠宝销售网站：Jewlr
2018/05/03 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
岗位职责说明书
2014/05/07 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
安全生产月标语
2014/10/07 职场文书
学习普通话的体会
2014/11/07 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android