网页设计与制作-日职网络教学平台

网页设计与制作
唐海和

1

2

3

4

5

6

7

8

9

10

11

任务3.6 创建下拉菜单和自动展开菜单

发布时间：2017-09-27 23:32 发布人：唐海和浏览次数：2835

【任务3-6】创建下拉菜单和自动展开菜单

【任务描述】

（1）创建纵向下拉列表菜单。

（2）创建自动展开与收缩菜单。

（3）编写JavaScript代码，实现菜单的展开与收缩功能。

纵向下拉列表菜单和自动展开与收缩菜单的浏览效果如图3-22所示。

【任务实施】

1．创建纵向下拉列表菜单。

2．创建自动展开与收缩菜单。

3．编写JavaScript代码，实现菜单的展开与收缩功能。

在网页文档0303.html中的“<head>”与“</head>”之间添加以下JavaScript代码，实现菜单的展开与收缩功能。

4．保存网页与浏览网页效果。

保存网页0303.html，按快捷键F12浏览其效果，如下图所示。

（1）浏览纵向下拉列表菜单

（2）浏览自动展开与收缩菜单

0303.html源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function menu_drop(menuId, displayWay)

{

document.getElementById(menuId).style.display=displayWay;

}

</script>

</head>

<body>

<li><a href="#">笔记本电脑</a></li>

<li><a href="#">笔记本配件</a></li>

</ul>

</li>

<li><a href="#">便携移动存储/读卡器</a></li>

<li><a href="#">时尚小数码</a></li>

<li><a href="#">相机/摄象机配件</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

<dd><a href="#">手机</a> | <a href="#">MP3/MP4</a> | <a href="#">MID</a> | <a href="#">EBook</a></dd>

</dl>

<dt>服务与支持</dt>

<dd><a href="#">产品注册</a> | <a href="#">配件真伪查询</a> | <a href="#">资源下载</a></dd>

</dl>

<dt>品牌与娱乐</dt>

<dd><a href="#">会员中心</a> | <a href="#">酷炫抽大奖</a> | <a href="#">O币商城</a></dd>

</dl>

</div>

</body>

</html>

+添加讨论

马福坦 2017-09-28 10:16:09
谢谢老师我学会啦
丁帅 2017-09-28 10:17:45
讲的很细都学会了谢谢老师。
毕洁壮 2017-09-28 10:18:17
思路清晰谢谢老师
王家敏 2017-09-28 10:19:57
讲的好好谢老师
徐勤翰 2017-09-28 10:21:05
老师讲课很细致
秦瑶 2017-09-28 10:22:33
非常棒的课程！
杨永吉 2017-09-28 10:22:36
讲课生动形象，容易理解
赵浩权 2017-09-28 10:23:23
谢谢老师我也学会了！
陈然然 2017-09-28 10:23:31
严谨有效的教学方法很适用
丁杨 2017-09-28 10:24:14
老师讲课很认真

网页设计与制作唐海和

任务3.6 创建下拉菜单和自动展开菜单

网页设计与制作
唐海和