大幅的下拉菜单代码，来自微软官方网站

　　凡是访问过微软官方网站的朋友都知道，网站上的下拉菜单效果非常不错，小编也访问过多次，有一次还想把代码扣下来发给大家，但是后来有事耽误了，直到现在才有时间，现在就分享给大家。在IE6下没有动画效果，顺便也把IE6的效果给加上，兼容IE6。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>微软官网导航菜单</title><br /> <style type="text/css"><br /> body{margin:0px;text-align:left;padding:0px;font:12px/140% Arial,Verdana,"<b>微软雅黑</b>";background:#d1d1d1;}<br /> ul{margin:0px;padding:0px;list-style-type:none;float:left;}<br /> a:focus {outline:0;}<br /> .nav{width:920px;height:28px;background:#f4f4f4;margin:20px auto;border-radius:5px;}<br /> .nav li{width:auto;line-height:20px;float:left;position:relative;}<br /> .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;}<br /> .nav li.msMnu_Item a:hover{border:1px solid #999;background:#e4ecf4;}<br /> .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;}<br /> .list{overflow:hidden;position:absolute;height:0px;top:27px;left:0;border-radius:0 8px 8px 8px;}<br /> .list div{background:#fff;overflow:hidden;padding:12px 0 12px 0;border:1px solid #999;float:left;}<br /> .list ul{padding:0px 10px;}<br /> .list li{margin:0px;padding:0px;width:170px;}<br /> .list li h3{margin:0px;padding:0px;font-size:12px;color:#4f4f4f;border-bottom:1px solid #e3e3e3;line-height:20px;width:100%;float:left;}<br /> .list li ul{width:170px;margin:0px;padding:5px 0;}<br /> .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;}<br /> .list li ul li.lis a:hover{color:#fff;background:#0060a6;}<br /> </style><br /> <script type="text/javascript"><br /> function Class(oParent, sClass){<br /> var aElem = oParent.getElementsByTagName('*');<br /> var aClass = [];<br /> var i = 0;<br /> for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);<br /> return aClass;<br /> };<br /> function css(obj, attr, value){<br /> if(arguments.length == 2){<br /> var style = obj.style,<br /> currentStyle = obj.currentStyle;<br /> if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];<br /> for(var propName in attr)propName == 'veryhuo' ? (style.filter = "alpha(veryhuo=" + attr[propName] + ")", style.veryhuo = attr[propName] / 100) : style[propName] = attr[propName];<br /> }else if(arguments.length == 3){<br /> switch(attr){<br /> case "width":<br /> case "height":<br /> case "paddingTop":<br /> case "paddingRight":<br /> case "paddingBottom":<br /> case "paddingLeft":<br /> case "top":<br /> case "right":<br /> case "bottom":<br /> case "left":<br /> case "marginTop":<br /> case "marginRigth":<br /> case "marginBottom":<br /> case "marginLeft":<br /> obj.style[attr] = value + "px";<br /> break;<br /> case "veryhuo":<br /> obj.style.filter = "alpha(veryhuo=" + value + ")";<br /> obj.style.veryhuo = value / 100;<br /> break;<br /> default:<br /> obj.style[attr] = value<br /> }<br /> }<br /> };<br /> function extend(destination, source){<br /> for (var propName in source) destination[propName] = source[propName];<br /> return destination<br /> };<br /> function doMove(obj, json, fnEnd){<br /> clearInterval(obj.timer);<br /> obj.iSpeed = 0;<br /> fnEnd = extend({<br /> type: "buffer",<br /> callback: function() {}<br /> }, fnEnd);<br /> obj.timer = setInterval(function(){<br /> var iCur = 0,<br /> iStop = true;<br /> for(var propName in json){<br /> iCur = parseFloat(css(obj, propName));<br /> propName == 'veryhuo' && (iCur = Math.round(iCur * 100));<br /> switch(fnEnd.type){<br /> case 'buffer':<br /> obj.iSpeed = (json[propName] - iCur) / 3;<br /> obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);<br /> json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));<br /> break;<br /> case 'elasticity':<br /> obj.iSpeed += (json[propName] - iCur) / 3;<br /> obj.iSpeed *= 0.75;<br /> 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));<br /> break;<br /> case 'accelerate':<br /> obj.iSpeed = obj.iSpeed + 3;<br /> iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));<br /> break;<br /> }<br /> }<br /> if(iStop){<br /> clearInterval(obj.timer);<br /> obj.timer = null;<br /> obj.iSpeed = 0;<br /> fnEnd.callback();<br /> }<br /> },30);<br /> };<br /> </script><br /> <script type="text/javascript"><br /> window.onload = function(){<br /> var aMenu = Class(document, 'menu');<br /> var aList = Class(document, 'list');<br /> var i = iNow = zIndex = 0;<br /> for(i=0;i<aMenu.length;i++){<br /> aMenu[i].index = i;<br /> aMenu[i].onclick = function(e){<br /> var oEvent = e || event;<br /> var aDiv = this.parentNode.getElementsByTagName('div');<br /> var aMenuList = Class(this.parentNode,'menuList');<br /> var iWidth = aMenuList.length * aMenuList[0].offsetWidth + 3;<br /> //还原上一个动作<br /> flexible();<br /> if(aDiv[0].style.height==aDiv[1].offsetHeight+'px'){<br /> flexible();<br /> }else{<br /> //当前动作<br /> this.parentNode.className = 'msMnu_hove';<br /> aDiv[0].style.zIndex = zIndex++;<br /> if(aMenuList.length>1)aDiv[0].style.width = iWidth + 'px';<br /> doMove(aDiv[0], {height:aDiv[1].offsetHeight});<br /> }<br /> //记住上一个<br /> iNow = this.index;<br /> oEvent.cancelBubble = true;<br /> };<br /> }<br /> document.onclick = function(){flexible();};<br /> function flexible(){<br /> aList[iNow].parentNode.className = 'msMnu_Item';<br /> aList[iNow].style.zIndex = 0;<br /> doMove(aList[iNow], {height:0});<br /> }<br /> };<br /> </script><br /> </head><br /> <body><br /> <div class="nav"><br /> <ul><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">Windows</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>Windows</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Windows 7</a></li><br /> <li class="lis"><a href="javascript:;">Windows Vista</a></li><br /> <li class="lis"><a href="javascript:;">Windows XP</a></li><br /> <li class="lis"><a href="javascript:;">Windows 企业版</a></li><br /> <li class="lis"><a href="javascript:;">Windows Phone</a></li><br /> <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">Office</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>Office 产品</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Office 标准版</a></li><br /> <li class="lis"><a href="javascript:;">Office 家庭和学生版</a></li><br /> <li class="lis"><a href="javascript:;">Office 中小企业版</a></li><br /> <li class="lis"><a href="javascript:;">Office 专业版</a></li><br /> <li class="lis"><a href="javascript:;">Office 专业增强版</a></li><br /> <li class="lis"><a href="javascript:;">Office 企业版</a></li><br /> </ul><br /> <h3>活动与促销</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Office 近期活动与促销</a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:1px solid #e3e3e3;"><br /> <li><br /> <h3>Office 资源</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Office 购买主页</a></li><br /> <li class="lis"><a href="javascript:;">Office 试用版免费下载</a></li><br /> <li class="lis"><a href="javascript:;">Office for Mac 2011</a></li><br /> <li class="lis"><a href="javascript:;">Office Web Apps</a></li><br /> <li class="lis"><a href="javascript:;">Office 更新和程序下载</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">所有产品</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>服务器</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">所有服务器产品</a></li><br /> <li class="lis"><a href="javascript:;">Lync Server</a></li><br /> <li class="lis"><a href="javascript:;">Windows Server</a></li><br /> <li class="lis"><a href="javascript:;">Windows Small Business Server</a></li><br /> <li class="lis"><a href="javascript:;">Windows Home Server</a></li><br /> <li class="lis"><a href="javascript:;">Windows HPC Server</a></li><br /> <li class="lis"><a href="javascript:;">SQL Server</a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:1px solid #e3e3e3;"><br /> <li><br /> <h3>商业应用</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">UC 统一沟通</a></li><br /> <li class="lis"><a href="javascript:;">云计算</a></li><br /> <li class="lis"><a href="javascript:;">商业软件平台</a></li><br /> <li class="lis"><a href="javascript:;">企业生产力基础架构</a></li><br /> </ul><br /> <h3>开发工具</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;"><b>Visual Studio</b> 开发工具</a></li><br /> <li class="lis"><a href="javascript:;">MSDN 开发人员网站</a></li><br /> </ul><br /> <h3>设计与个人体验</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Expression</a></li><br /> <li class="lis"><a href="javascript:;"><b>Silverlight</b></a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:#e3e3e3;"><br /> <li><br /> <h3>个人生活与娱乐产品</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;"><b>DirectX</b> （英）</a></li><br /> <li class="lis"><a href="javascript:;"><b>微软拼音</b>输入法</a></li><br /> <li class="lis"><a href="javascript:;"><b>Skype</b></a></li><br /> </ul><br /> <h3>硬件</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软硬件首页</a></li><br /> <li class="lis"><a href="javascript:;">鼠标</a></li><br /> <li class="lis"><a href="javascript:;">键盘</a></li><br /> </ul><br /> <h3>Windows Phone</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Windows Phone 首页</a></li><br /> <li class="lis"><a href="javascript:;">应用与下载</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">下载</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>下载中心</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软中国下载中心</a></li><br /> <li class="lis"><a href="javascript:;">Windows 下载</a></li><br /> <li class="lis"><a href="javascript:;">Office 下载</a></li><br /> <li class="lis"><a href="javascript:;">Server 下载</a></li><br /> <li class="lis"><a href="javascript:;">Office Marketplace 下载</a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:1px solid #e3e3e3;"><br /> <li><br /> <h3>最新下载</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li><br /> <li class="lis"><a href="javascript:;">Internet Explorer 9</a></li><br /> <li class="lis"><a href="javascript:;">Office 2010 试用版</a></li><br /> <li class="lis"><a href="javascript:;">Silverlight</a></li><br /> <li class="lis"><a href="javascript:;">Windows 7 Service Pack 1</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">安全与更新</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>安全与更新</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">安全中心首页</a></li><br /> <li class="lis"><a href="javascript:;">Microsoft Update</a></li><br /> <li class="lis"><a href="javascript:;">Office Update</a></li><br /> <li class="lis"><a href="javascript:;">微软安全软件</a></li><br /> <li class="lis"><a href="javascript:;">恶意软件删除工具</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">培训与支持</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>产品支持</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">帮助与支持首页</a></li><br /> <li class="lis"><a href="javascript:;">Windows 帮助</a></li><br /> <li class="lis"><a href="javascript:;">Office 帮助</a></li><br /> <li class="lis"><a href="javascript:;">TechNet 支持</a></li><br /> <li class="lis"><a href="javascript:;">MSDN 支持</a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:1px solid #e3e3e3;"><br /> <li><br /> <h3>活动</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软活动中心</a></li><br /> <li class="lis"><a href="javascript:;">培训</a></li><br /> <li class="lis"><a href="javascript:;">微软 IT 课堂</a></li><br /> <li class="lis"><a href="javascript:;">微软在线培训及认证</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">立即购买</a><br /> <div class="list"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>立即购买</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软产品选购平台首页</a></li><br /> <li class="lis"><a href="javascript:;">个人用户选购平台</a></li><br /> <li class="lis"><a href="javascript:;">企业用户选购平台</a></li><br /> <li class="lis"><a href="javascript:;">特别优惠</a></li><br /> <li class="lis"><a href="javascript:;">批量许可授权</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">解决方案</a><br /> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>合作伙伴解决方案</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">查找合作伙伴解决方案</a></li><br /> </ul><br /> <h3>企业和组织</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">Microsoft Dynamics ERP & CRM</a></li><br /> <li class="lis"><a href="javascript:;">大型企业信息化专区</a></li><br /> <li class="lis"><a href="javascript:;">教育信息化专区</a></li><br /> <li class="lis"><a href="javascript:;">微软中小企业在线体验中心</a></li><br /> <li class="lis"><a href="javascript:;">微软正版授权中心</a></li><br /> </ul><br /> </li><br /> </ul><br /> <ul class="menuList" style="border-left:1px solid #e3e3e3;"><br /> <li><br /> <h3>开发人员和 IT 专业人士</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">MSDN</a></li><br /> <li class="lis"><a href="javascript:;">TechNet</a></li><br /> <li class="lis"><a href="javascript:;">IT 专业社区</a></li><br /> </ul><br /> <h3>中国案例中心</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软中国案例中心</a></li><br /> </ul><br /> <h3>微软技巧与帮助</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软家庭馆</a></li><br /> <li class="lis"><a href="javascript:;">微软工作馆</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">合作伙伴</a><br /> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>合作伙伴</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">微软合作伙伴网络</a></li><br /> <li class="lis"><a href="javascript:;">查找微软合作伙伴</a></li><br /> <li class="lis"><a href="javascript:;">微软合作伙伴网络权益概览</a></li><br /> <li class="lis"><a href="javascript:;">加入微软合作伙伴网络（MPN）</a></li><br /> <li class="lis"><a href="javascript:;">订阅微软行动宝盒（MAPs）</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> <li class="msMnu_Item"><br /> <a href="javascript:;" class="menu">关于微软</a><br /> <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;"><br /> <div><br /> <ul class="menuList"><br /> <li><br /> <h3>关于微软</h3><br /> <ul><br /> <li class="lis"><a href="javascript:;">关于微软</a></li><br /> <li class="lis"><a href="javascript:;">微软新闻</a></li><br /> <li class="lis"><a href="javascript:;">微软在线视频中心</a></li><br /> <li class="lis"><a href="javascript:;">投资者关系 (英)</a></li><br /> <li class="lis"><a href="javascript:;">招贤纳士</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </li><br /> </ul><br /> </div><br /> </body><br /> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

大幅的下拉菜单代码，来自微软官方网站

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

大幅的下拉菜单代码，来自微软官方网站

由 dawei

相关文章

加盟社区邦，让家政创业更简单，社区邦家政创业招商会成功举办！

大众创业的2.0版本，百度智能小程序创业经营大赛正式启动

2021“创客广东”工业互联网中小企业创新创业大赛圆满收官

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性