JavaScript CSS réalise des compétences d'effet_javascript de menu Web latéral de type Tmall-js tutoriel-php.cn

JavaScript CSS réalise des compétences d'effet_javascript de menu Web latéral de type Tmall

WBOY

Libérer： 2016-05-16 15:43:01

original

1225 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation de JavaScript CSS pour imiter l'effet de menu Web latéral de Tmall. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un effet de menu de type Tmall écrit par moi-même. La fonction de classification secondaire a été implémentée, mais elle n'a pas été embellie. Les amis qui l'utilisent peuvent l'améliorer eux-mêmes. Passez la souris sur la catégorie principale. Les catégories hiérarchiques s'étendent vers la droite. Il s'agit de l'effet de menu de navigation actuellement utilisé par Taobao, Tmall Shopping et JD.com. Lors du test, veuillez d'abord cliquer sur le menu et le menu principal s'affichera. .

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-style-codes/

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.