网页设计教学单元3_创建超级链接与导航栏课件.pptVIP

【3.3　技术提升】 【任务3-6】创建下拉菜单和自动展开菜单 【任务描述】 （1）创建纵向下拉列表菜单。 （2）创建自动展开与收缩菜单。 （3）编写JavaScript代码，实现菜单的展开与收缩功能。 纵向下拉列表菜单和自动展开与收缩菜单的浏览效果如图3-22所示。 图3-22　纵向下拉列表菜单和自动展开与收缩菜单的浏览效果 【任务实施】 1．创建纵向下拉列表菜单。 打开文件夹“3-3”中网页文档0303.html，在该网页中“ul id=droplist_ul”下面输入以下HTML代码。 li id=n0ema href=default.htm 首页/a/em/li li onmouseover=menu_drop(n1,block); onmouseout=menu_drop(n1,none);em a href=#笔记本/a/em ul id=n1 lia href=#笔记本电脑/a/li lia href=#笔记本配件/a/li lia href=#电脑包/a/li /ul /li li onmouseover=menu_drop(n2,block); onmouseout=menu_drop(n2,none);em a href=#数码影音/a/em ul id=n2 lia href=#数码影像/a/li lia href=#MP3/MP4/a/li lia href=#GPS/a/li lia href=#便携移动存储/读卡器/a/li lia href=#时尚小数码/a/li lia href=#相机/摄象机配件/a/li lia href=#录音笔/a/li /ul /li ……!-- 后面更多的代码在此被省略，详见教材配套光盘中对应的网页文档-- 2．创建自动展开与收缩菜单。 在网页文档0303.html中纵向下拉列表菜单的HTML代码之后输入以下HTML代码。 div id=login-box div id=quick-nav onmouseover=menu_drop(menu,block); onmouseout=menu_drop(menu,none); a class=quick-a href=# onfocus=menu_drop(menu,block); 快速导航/a div id=menu div id=menu-tita id=menu-close“ href=javascript:void(0); onclick=menu_drop(menu,none); title=关闭X/a /div div id=menu-inc dl id=menu-col-1 dt产品/dt dda href=#手机/a | a href=#MP3/MP4/a | a href=#MID/a | a href=#EBook/a /dd dda href=#最新活动/a | a href=#新品信息/a | a href=#产品论坛/a /dd /dl dl id=menu-col-2 dt服务与支持/dt dda href=#定制服务/a | a href=#销售网点/a | a href=#售后网点/a | a href=#服务条款/a /dd dda href=#问吧/a | a href=#在线投诉/a | a href=#常见问题/a /dd dda href=#产品注册/a | a href=#配件真伪查询/a | a href=#资源下载/a /