Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-CSS realisiert Tmall-ähnliche Seiten-Webmenü-Effekte_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:43:01
Original
1213 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierung von JavaScript-CSS, um den Tmall-Seiten-Webmenüeffekt zu imitieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein von mir selbst geschriebener Tmall-ähnlicher Menüeffekt, der jedoch nicht verschönert wurde. Die JS-Funktion wurde implementiert Klicken Sie mit der Maus auf die Hauptkategorie. Dies ist der Navigationsmenüeffekt, der derzeit von Taobao, Tmall Shopping und JD.com verwendet wird. Klicken Sie beim Testen bitte zuerst auf das Menü .

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-style-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">
*{margin:0; padding:0;}
body{ font-size:14px; font-family:"宋体";}
h1, h2, h3{ font-size:14px; font-weight:normal;}
li{ list-style:none;}
a{ color:#333; text-decoration:none;}
#nav{ width:202px; height:35px; background:#C00; margin:50px 0 0 20px;}
#nav h1{ padding-left:17px; line-height:35px; color:#fff; margin-right:17px;}
#box{ width:200px; border:1px solid #B00; border-top:none; margin-left:20px; display:none;}
#subnav{width:200px;}
#subnav .list{ width:200px; height:30px;}
#subnav .list h2{ width:160px; height:30px; padding-left:30px; line-height:30px; margin-right:10px;}
#subnav .list a:hover, #subnav .active a:hover{ color:#900; font-weight:bold;}
#subnav .active{ width:200px; height:30px; border-bottom:1px solid #b00; border-top:1px solid #b00; position:relative;}
#subnav .active h2{ width:170px; height:30px; padding-left:30px; line-height:30px; background:#fff; position:absolute; left:1px; top:0; z-index:4;}
#subnav .list_nav{ width:500px; overflow:hidden; border:1px solid #b00; position:absolute; left:200px; top:-1px; z-index:3; display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oNav=document.getElementById('nav');
 var oBox=document.getElementById('box');
 var oSubnav=document.getElementById('subnav');
 var aLi=oSubnav.getElementsByTagName('li');
 var i=0;
 oNav.onclick=function()
 {
  if(oBox.style.display=='block')
  {
   oBox.style.display='none';
  }
  else
  {
   oBox.style.display='block';
  }
 }
 for(i=0;i<aLi.length;i++)
 {
  if(aLi[i].className=='list')
  {
   aLi[i].onmousemove=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='block';
     this.className='active';
    }
   }
   aLi[i].onmouseout=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='none';
     this.className='list';  
    }
   }
  }
 }
};
</script>
</head>
<body>
<div id="nav">
<h1>所有商品分类</h1>
</div>
<div id="box">
 <ul id="subnav">
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">电子商品</a></h2>
   <div class="list_nav">
    <ul>
     <li>222</li>
     <li>2222</li>
     <li>2222</li>
     <li>22222</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
 </ul>
</div>
</body>
</html>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage