首頁 > 開發者 > JavaScript
js實現相容性好的微軟官網導航下拉式功能表效果，js下拉式功能表
本文執行個體講述了js實現相容性好的微軟官網導航下拉式功能表效果。分享給大家供大家參考。具體如下：
這是一款微軟官網導覽功能表，相容好的下拉式功能表，微軟官網導航效果，在IE6下沒有動畫效果，順便也把IE6的效果給加上，相容IE6。現在微軟的官方網站正在使用，我覺得非常不錯。
運行效果如下：
線上示範地址如下：
http://demo.jb51.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:;">微軟拼音IME</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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
