在Dreamweaver中轻松实现滑动折叠菜单

goodluck · 发表于 2009-12-20 21:15:51

<

>　在网页展示平面有限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将<a class="channel_keylink" href="http://www.itbulo.com/hardware/input/" target="_blank">鼠标</a>移动到菜单上时，菜单才会滑动展开。 </P><

>　　<STRONG>效果说明</STRONG></P><

>　　当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图 18-1 所示。当<a class="channel_keylink" href="http://www.itbulo.com/hardware/input/" target="_blank">鼠标</a>移动到菜单栏上时，该菜单的子菜单就会慢慢滑动展开，如图 18-2 所示。 </P><

align=center><A href="http://edu.itbulo.com/UploadFiles_1485/200604/20060403000002690.jpg&namecode=pcedu&subnamecode=pcedu_index" target=_blank><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200604/20060403000002397.jpg" border=0></A></P><

>　　<STRONG>创作思想</STRONG></P><

>　　先在一个图层中输入文字，形成菜单折叠时的状态，再使用图层展开时间轴动画来实现滑动展开菜单的效果。 </P><

>　　<STRONG>操作步骤</STRONG></P><

>　　（ 1 ）新建文件并添加层。新建一个网页文件，在网页中添加一个父层（第一级的层）和一个子层（第二级的层），分别设置两个图层的大小和位置，如图 18-3 所示。 </P><

align=center><A href="http://edu.itbulo.com/UploadFiles_1485/200604/20060403000002762.jpg&namecode=pcedu&subnamecode=pcedu_index" target=_blank><IMG alt="" src="http://edu.itbulo.com/UploadFiles_1485/200604/20060403000002209.jpg" border=0></A></P><

>　　</P><

><FONT color=#ff0000></p><p align='center'><b><font color='red'>[1]</font> <a href='http://edu.itbulo.com/200604/93394_2.htm'>[2]</a> <a href='http://edu.itbulo.com/200604/93394_3.htm'>[3]</a> <a href='http://edu.itbulo.com/200604/93394_4.htm'>[4]</a> <a href='http://edu.itbulo.com/200604/93394_5.htm'>[5]</a> <a href='http://edu.itbulo.com/200604/93394_2.htm'>下一页</a></b></p><div class="box_art_07"><div id="left03"></div></div><div id="rrxgxx">关注此文的读者还看过：</div><div id="rrxgxx1"><ul><li>2009-9-24 12:36:39 <a class='LinkAC' href='http://edu.itbulo.com/200909/126286.htm' target="_blank">去除Dreamweaver表格宽度辅助线</a></li><li>2008-6-9 12:15:04 <a class='LinkAC' href='http://edu.itbulo.com/200806/124321.htm' target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></li><li>2008-4-15 18:39:07 <a class='LinkAC' href='http://edu.itbulo.com/200804/123795.htm' target="_blank">Dreamweaver CS3中Spry详细区域功能</a></li><li>2008-4-10 18:42:44 <a class='LinkAC' href='http://edu.itbulo.com/200804/123695.htm' target="_blank">网站设计师职业生涯状况及前景</a></li><li>2008-4-10 18:41:32 <a class='LinkAC' href='http://edu.itbulo.com/200804/123694.htm' target="_blank">如何制作出非常美观的网页</a></li><li>2008-4-8 20:50:12 <a class='LinkAC' href='http://edu.itbulo.com/200804/123660.htm' target="_blank">建立自己的博客的过程中学习到的知识</a></li><li>2008-4-7 21:19:58 <a class='LinkAC' href='http://edu.itbulo.com/200804/123633.htm' target="_blank">网站栏目和页面的策划</a></li><li>2008-3-24 18:47:21 <a class='LinkAC' href='http://edu.itbulo.com/200803/123400.htm' target="_blank">海量素材的准确位置和用途</a></li></ul></div></div><div id="left04"></div><div id="rrxgpl"><ul><span class="cDRed">用户评论</span></ul></div><script language=javascript>function refreshimg(){ document.all.checkcode.src='http://img.itbulo.com/Inc/CheckCode.asp?'+Math.random();}</script><script language='JavaScript' type='text/JavaScript'> function Check() { if (document.form1.Name.value=='') { alert('请输入姓名！'); document.form1.Name.focus(); return false; } if (document.form1.Content.value=='') { alert('请输入评论内容！'); document.form1.Content.focus(); return false; }return true; } </script><div class="yzsmpl"><b>评论内容：</b>不能超过100字，需审核，请自觉遵守互联网相关政策法规。</div><div class="globalComments"><table cellSpacing="1" cellPadding="3" width="95%" border="0" align="center"><form action="/Comment.asp" onsubmit="return Check();" method="post" name="form1" id="form1"><tr><td class="title12"><table width="100%" border="0" cellspacing="3"><tr><td>发表评论：</td><td><input name="anonymous" type="checkbox" value="1" checked="checked"/> 匿名发表</td><td>用户名:<Input name="Name" type="text" id="Name" size="16" value="部落网友" maxLength="16" class="input1" /></td><td><font color="#999999">有 <span id="CommentCount">loading</span> 位网友发表了评论　<a href="/Comment.asp?Articleid=93394&Action=ShowAll" target="_blank">查看评论</a></font></td></tr></table></td></tr><tr><td class="title12"><center><table width="100%" border="0"><tr><td><div class="editorContent"><textarea name="Content" rows="5" cols="45" id="Content" onpropertychange="if(value.length>100) value=value.substr(0,100);sNum.innerText=this.value.length;" onkeyup="" style="background:url(http://img.itbulo.com/images/pllogo.gif) center no-repeat #fff;"></textarea></div></td><Input id="Action" type="hidden" value="Save" name="Action" /><Input id="ArticleID" type="hidden" value="93394" name="ArticleID" /><td>(<FONT color=red><SPAN id=sNum>0</SPAN></FONT>/100)<input type="image" src="http://img.itbulo.com/images/kp_submit.jpg" value="发送" onclick="ShowComment();" /></td></tr></table></center></td></tr></form></table></div></div></div><div id="fleft"><img src=http://img.itbulo.com/images/zfbg.gif width="25" height="400"></div><div id="slistr" class="right"><div id="right01"></div><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 最新文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" width="34" class="tj1">06-09</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123795.htm" target="_blank">Dreamweaver CS3中Spry详细区域功能</a></td><td align="left" width="34" class="tj1">04-15</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123660.htm" target="_blank">建立自己的博客的过程中学习到的知识</a></td><td align="left" width="34" class="tj1">04-08</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123633.htm" target="_blank">网站栏目和页面的策划</a></td><td align="left" width="34" class="tj1">04-07</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123366.htm" target="_blank">页面设计中的层次感</a></td><td align="left" width="34" class="tj1">03-21</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123296.htm" target="_blank">改进网站设计提供的有意的建议</a></td><td align="left" width="34" class="tj1">03-18</td></tr><tr></tr></table></ul></div></div><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://edu.itbulo.com/show/" class="cDRed1">平面设计作品欣赏</a><a href="http://edu.itbulo.com/show/poster/">海报</a><a href="http://edu.itbulo.com/show/bz/">包装</a><a href="http://edu.itbulo.com/show/biaoz/">标志</a><a href="http://edu.itbulo.com/show/chahua/">插画</a><a href="http://edu.itbulo.com/show/ads/">招贴</a></span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121016101973.gif' width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank">rudy hurtado 标志设计（二）</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120918040463.gif' width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank">创导国际标志设计作品欣赏</a></td></tr></table></ul></div></div><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 推荐文章</span></div><div class="crc list"><ul><li>此栏目下没有推荐文章</li></ul></div></div><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/" class="cDRed1">软件学院</a>" 焦点图文</span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="

hotoshop制作千与千寻的DVD封面" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121010160758.gif' width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="

hotoshop制作千与千寻的DVD封面" target="_blank">

hotoshop制作千与千寻的DVD封面</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="

hotoshop制作简洁红色圣诞壁纸" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120521123294.gif' width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="

hotoshop制作简洁红色圣诞壁纸" target="_blank">

hotoshop制作简洁红色圣诞壁纸</a></td></tr></table></ul></div></div><div id="right02"></div><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 热门文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" class="tj1" width="34">28117</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94701.htm" target="_blank">初学解惑：常用CSS样式图文设置教程</a></td><td align="left" class="tj1" width="34">17629</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" class="tj1" width="34">16027</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123295.htm" target="_blank">什么是静态网页和动态网页？</a></td><td align="left" class="tj1" width="34">12799</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200608/103608.htm" target="_blank">Dreamweaver 入门：使用CSS设置页面格式</a></td><td align="left" class="tj1" width="34">12447</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" class="tj1" width="34">10149</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94704.htm" target="_blank">用Dreamweaver自己动手制作网页活动菜单条</a></td><td align="left" class="tj1" width="34">9026</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94630.htm" target="_blank">DW网页设计：制作弹出菜单</a></td><td align="left" class="tj1" width="34">8800</td></tr><tr></tr></table></ul></div></div><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://desk.itbulo.com/" class="cDRed1">桌面壁纸</a><a href="http://desk.itbulo.com/star/">明星</a><a href="http://desk.itbulo.com/katong/">卡通</a><a href="http://desk.itbulo.com/game/">游戏</a><a href="http://desk.itbulo.com/scenery/">风景</a><a href="http://desk.itbulo.com/auto/">汽车</a><a href="http://desk.itbulo.com/paint/">艺术</a><a href="http://desk.itbulo.com/feast/">节日</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://desk.itbulo.com/200508/30368.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/disney/160/25.jpg" alt="迪士尼-25" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200508/30368.html">迪士尼-25</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200802/75440.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/KTMHTN/160/40.jpg" alt="卡通梦幻童年40" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200802/75440.html">卡通梦幻童年40</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200704/73664.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/design/KrCartoon/160/120.jpg" alt="韩国风格壁纸120" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200704/73664.html">韩国风格壁纸120</a></i></li></ul></div></div><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://photo.itbulo.com/" class="cDRed1">素材图库</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/mrxx/">美容</a><a href="http://photo.itbulo.com/plant/">植物</a><a href="http://photo.itbulo.com/personality/">人物</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/food/">食物</a><a href="http://photo.itbulo.com/tech/">科技</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42590.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/14.jpg" alt="青蛙-14" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42590.html">青蛙-14</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42555.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/dog/120/19.jpg" alt="小狗写真-19" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42555.html">小狗写真-19</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42592.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/16.jpg" alt="青蛙-16" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42592.html">青蛙-16</a></i></li></ul></div></div><div id="right03"></div></div></div><script src='http://img.itbulo.com/js/10/09_footer.js' language='javascript'></script>

账号		自动登录	找回密码
密码			论坛注册

在Dreamweaver中轻松实现滑动折叠菜单

客服中心

投诉建议