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>
时间: 2024-11-08 17:27:32

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

js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字

效果: 当鼠标不在自动登录上时,只显示自动登录这个表单,下面的div提示则隐藏. 当鼠标移动到自动登录这个表单时,则显示下面的div提示,当鼠标移出时再将其隐藏 代码实现与原理: HTML代码: <body> <input type="checkbox" />自动登录 <div id="div1">不要再玩游戏啦!!!</div> </body> CSS代码:给id为div1的元素做一下修饰,并且将其最开始

js密码修改显示与隐藏效果

一.添加input框 <form class="login_form"> <input class="password inputpwd" id="oldpwd" name="oldpwd" type="password" placeholder="请输入旧密码" /> <div class="invisible" onclick=&qu

js鼠标滑动图片显示隐藏效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码--> <meta http-equi

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

可控制导航下拉方向的jQuery下拉菜单代码

效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base ta

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法 在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保存任何类型的数据:js数组的大小是可以动态调整的 */ var colors = ["red", "blue", "green"];

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术非常多.样例非常多,仅仅好慢慢学,慢慢实践.!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScript 实现的照片展示 构建软件设计的方法有两种:一种是把软件做得非常easy以至于明显找不到缺陷.还有一种是把它 做得非常复杂以至于找不到明显的缺陷. --C.A.R.Hoare,1980 年图灵奖获得者 在这个自拍自恋的时代,照片是要展示的.在前面的章节里已经解说了事件的绑定.本章主要利用前

纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <ul

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed