js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果

Posted 为伊消得

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果相关的知识,希望对你有一定的参考价值。

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *{margin:0px auto;padding:0px;}
 6 #menu{width:800px;height:40px;margin-top:100px;}
 7 .list{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;float:left;border:1px solid #333;}
 8 .erji{width:0px;height:0px;float:left;}
 9 .erwai{width:100px;height:122px;border:1px solid 
10 #333;position:relative;top:41px;left:-102px; display:none;}
11 .item{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;border-bottom:1px solid #333;}
12 </style>
13 
14 </head>
15 
16 <body>
17 <div id="menu">
18     <div class="list" onmouseover="show(‘chanpin‘)" onmouseout="hide(‘chanpin‘)">产品</div>
19     <div class="erji">
20         <div class="erwai" id="chanpin" onmouseover="xianshi(‘chanpin‘)" onmouseout="xiaoshi(‘chanpin‘)">
21             <div class="item">食品</div>
22             <div class="item">家电</div>
23             <div class="item">手机</div>
24         </div>
25     </div>
26     <div class="list" onmouseover="show(‘xinwen‘)" onmouseout="hide(‘xinwen‘)">新闻</div>
27     <div class="erji">
28         <div class="erwai" id="xinwen" onmouseover="xianshi(‘xinwen‘)" onmouseout="xiaoshi(‘xinwen‘)">
29             <div class="item">美食</div>
30             <div class="item">旅游</div>
31             <div class="item">家庭</div>
32         </div>
33     </div>
34     <div class="list" onmouseover="show(‘lianxi‘)" onmouseout="hide(‘lianxi‘)">联系</div>
35     <div class="erji">
36         <div class="erwai" id="lianxi" onmouseover="xianshi(‘lianxi‘)" onmouseout="xiaoshi(‘lianxi‘)">
37             <div class="item">电话</div>
38             <div class="item">网址</div>
39             <div class="item">地址</div>
40         </div>
41     </div>
42 </div>
43 </body>
44 <script type="text/javascript">
45 function show(id){
46     var a=document.getElementById(id);
47     a.style.display="block";
48 }
49 function hide(id){
50     var a=document.getElementById(id);
51     a.style.display="none";
52 }
53 function xianshi(id){
54     var a=document.getElementById(id);
55     a.style.display="block";
56 }
57 function xiaoshi(id){
58     var a=document.getElementById(id);
59     a.style.display="none";
60 }
61 </script>
62 </html>

 

以上是关于js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果的主要内容,如果未能解决你的问题,请参考以下文章

显示下拉子级别(autonav Concrete5)

Bootstrap 导航栏下拉子菜单在折叠模式下不起作用

如何将 Bootstrap 下拉子菜单设置为“dropup”

Bootstrap 3 是不是有下拉子菜单的官方类? [复制]

JS实例之左侧菜单下拉效果,实现左侧菜单栏点击打开关闭效果

网站制作如何实现下拉菜单前面的小三角