suchen

Heim  >  Artikel  >  Web-Frontend  >  js, um eine gute Kompatibilität mit den Fähigkeiten des Dropdown-Menüs „effect_javascript' für die Navigation auf der offiziellen Microsoft-Website zu erreichen

js, um eine gute Kompatibilität mit den Fähigkeiten des Dropdown-Menüs „effect_javascript' für die Navigation auf der offiziellen Microsoft-Website zu erreichen

WBOY
WBOYOriginal
2016-05-16 15:40:151161Durchsuche

Das Beispiel in diesem Artikel beschreibt die js-Implementierung des Dropdown-Menüeffekts der offiziellen Microsoft-Website-Navigation mit guter Kompatibilität. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein offizielles Website-Navigationsmenü von Microsoft, das mit Dropdown-Menüs kompatibel ist und über offizielle Website-Navigationseffekte von Microsoft verfügt. Unter IE6 werden übrigens auch keine Animationseffekte hinzugefügt, sodass es kompatibel ist IE6. Mittlerweile wird die offizielle Website von Microsoft genutzt, was ich sehr gut finde.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/

Der spezifische Code lautet wie folgt: 

<!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 &#63; currentStyle[attr] : getComputedStyle(obj, false)[attr];
  for(var propName in attr)propName == 'opacity' &#63; (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 &#63; 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 &#63; 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] &#63; 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>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js automatische Bildkarussell-Diashow, Spezialeffekte, Code-Sharing_Javascript-KenntnisseNächster Artikel：js automatische Bildkarussell-Diashow, Spezialeffekte, Code-Sharing_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen