为了教学生，用js写的仿taobao的分类菜单效果

　　

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>仿照taobao左侧菜单----案例</title>
  6     <style type="text/css">
  7         #top,#content,#foot{
  8             width:998px;
  9             margin:auto;
 10         }
 11         #top{
 12             height:240px;
 13         }
 14         #content{
 15             height:2000px;
 16         }
 17         #foot{
 18             height:120px;
 19         }
 20         #mainMenuArea{
 21             margin-top:25px;
 22             width:240px;
 23             float:left;
 24             margin-left:1px;
 25             height:auto;
 26         }
 27         #mainMenuArea div{
 28             font-size: 12px;
 29             line-height:23px;
 30             padding-left:15px;
 31             border:solid 2px #fff;
 32         }
 33         #mainMenuArea div.hover{
 34             border-left-color: red;
 35             border-top-color: red;
 36             border-bottom-color: red;
 37             position: relative;
 38             z-index:101;
 39         }
 40         #mainMenuArea div a{
 41             text-decoration: none;
 42             color:#000;
 43             display:inline-block;
 44             width:40px;
 45         }
 46         #mainMenuArea div a:hover{
 47             color:red;
 48         }
 49         #mainMenuArea div span{
 50             font-weight: bolder;
 51             color:rgb(255,68,0);
 52             float:right;
 53             margin-right:5px;
 54         }
 55         .childMenu{
 56             border:solid 2px red;
 57             width:500px;
 58             height:300px;
 59             position: relative;
 60             top:0;
 61             left:239px;
 62             z-index:100;
 63             display:none;
 64         }
 65     </style>
 66     <script type="text/javascript">
 67         window.onload = function(){
 68             var currentMainMenu = null;
 69             var currentChildMenu = null;
 70 
 71             //完成鼠标悬停在主菜单时，将箭头隐藏
 72             //1、先找到所有的主菜单项
 73             var mainMenuList = document.getElementById("mainMenuArea").getElementsByTagName("div");
 74             console.log("find mainMenu's count is:" + mainMenuList.length);
 75             //2、在所有的主菜单项上分别订阅其onmouseover、onmouseout事件
 76             for(var i=0;i<mainMenuList.length;i++){
 77                 //2.1订阅onmouseover（鼠标悬停事件）
 78                 mainMenuList[i].onmouseover = function(){
 79                     currentMainMenu = this;
 80                     //增加样式
 81                     currentMainMenu.setAttribute("class","hover");
 82                     //隐藏箭头
 83                     currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
 84                     //显示子菜单
 85                     var childMenuIndex = this.getAttribute("data-index");
 86                     console.log("current childMenuIndex is :" + childMenuIndex);
 87                     //拼接出子菜单的ID
 88                     currentChildMenu = document.getElementById("childMenu_" + childMenuIndex);
 89 
 90                     currentChildMenu ?
 91                             currentChildMenu.style.display = "block" :
 92                             void(0);
 93 
 94                     //做到这一步算完了么？
 95                     //if(!currentChildMenu.onmouseover) {
 96                         //当鼠标移动到子菜单上时，还要维持当前的效果
 97                         currentChildMenu.onmouseover = function () {
 98                             console.log('now mouse is on childMenu:' + this.id);
 99                             currentMainMenu.setAttribute("class","hover");
100                             currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
101                             this.style.display = "block";
102 
103                         };
104                         //当鼠标从子菜单上移出后，还要恢复原样
105                         currentChildMenu.onmouseout = function () {
106                             currentMainMenu.setAttribute("class","");
107                             currentMainMenu.getElementsByTagName("span")[0].style.display = "block";
108                             this.style.display = "none";
109                             console.log('in this code');
110                         };
111                     //}
112                 };
113                 //2.2订阅onmouseout（鼠标移出事件）
114                 mainMenuList[i].onmouseout = function(){
115                     //去除主菜单样式
116                     currentMainMenu.setAttribute("class","");
117                     //显示箭头
118                     this.getElementsByTagName("span")[0].style.display = "block";
119                     //要隐藏的子菜单，仍然再找一边么？
120                     currentChildMenu ?
121                             currentChildMenu.style.display = "none" :
122                             void(0);
123                 }
124             }
125         };
126     </script>
127 </head>
128 <body>
129 <div id="top">
130 顶部内容
131 </div>
132 <div id="content">
133     <div id="mainMenuArea">
134         <div data-index="1" class="">
135             <a href="#">女装</a>
136             <a href="#">男装</a>
137             <a href="#">鞋靴</a>
138             <a href="#">箱包</a>
139             <span>&gt;</span>
140         </div>
141         <div data-index="2" class="">
142             <a href="#">婴童</a>
143             <a href="#">美妆</a>
144             <a href="#">食品</a>
145             <a href="#">珠宝</a>
146             <span>&gt;</span>
147         </div>
148     </div>
149     <div id="childMenu_1" class="childMenu">
150 
151     </div>
152     <div id="childMenu_2" class="childMenu">
153 
154     </div>
155 </div>
156 <div id="foot">
157 脚部内容
158 </div>
159 </body>
160 </html>

 

posted @ 2016-03-04 10:34  俺是个写程序的  阅读(288)  评论(0)  编辑  收藏  举报