您好,欢迎来到素彩网!

基础(32)用Dreamweaver CS3打造下拉菜单

来源:sc115.com | 447 次浏览 | 2011-07-29

标签: Dreamweaver cs3 基础用Dreamweaver CS3制作下拉菜单 基础

第一步,做好父级菜单。
第二步,插入一个层,如下图所示:
注意层的属性设置,去掉层的left和top值,这样Layer1就成了相对定位的层,把它的默认属性设置为hidden,不要设置背景色。
第三步,在这个层里插入一个表格,如图所示,注意上面一行背景透明,下面几行设置背景色为白色。
第四步,选中父级菜单中的“酷站欣赏”,打开Behaviors面板,对它添加Show/Hide Layers动作。
设置OnMouseOver的时候显示Layer1,OnMouseOut的时候隐藏Layer1。
第五步,拖动Layer1的层标签,把它放到“酷站欣赏”所在的单元格里。
接下来我们还需要手工修改一下代码: 打开源代码编辑状态,我们可以看到“酷站欣赏”处被加上了OnMouseOver和OnMouseOut动作,代码如下所示:
<a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">酷站欣赏</a>

复制这里的红色部分代码,粘贴到Layer1的<div>标签里:
<div id="Layer1" style="position:absolute; width:70px; height:80px; z-index:1; visibility: hidden" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">

OK,大功告成了。相信这时候你会明白我为什么要在Layer1中设置一行表格背景透明了:当鼠标经过“酷站欣赏”的时候,激发Show Layer的动作,隐藏的层Layer1显示出来,它的位置压在父级菜单“酷站欣赏”上,但父级菜单之上的部分恰好是一个透明区域,所以父级菜单依然可 见。当鼠标移动到层Layer1的范围之外时,激发Hide Layer动作,这时层Layer1再次隐藏。

搜索: Dreamweaver cs3 基础用Dreamweaver CS3制作下拉菜单 基础 

最热-Dreamweaver CS3

使用Dreamweaver管理Contribute站点

使用Dreamweaver清理Word的HTML文件

设置Dreamweaver站点文件FTP传输首选参数

Dreamweaver站点测试指南

使用Dreamweaver报告测试站点

在Dreamweaver中创建和管理收藏资源列表

将可视化助理与非 CSS 布局块元素一起使用

在Dreamweaver中集成ps、Flash和Fireworks

素材
精美实用的提示框矢量图7精美实用的提示框矢量图7
精美实用的提示框矢量图6精美实用的提示框矢量图6
折纸网站设计矢量图5折纸网站设计矢量图5
精美实用的提示框05—矢量图精美实用的提示框05—矢量图
精美实用的提示框矢量图4精美实用的提示框矢量图4
折纸网站设计矢量图4折纸网站设计矢量图4
精美实用的提示框矢量图3精美实用的提示框矢量图3
精美实用的提示框矢量图2精美实用的提示框矢量图2
精美实用的提示框矢量图精美实用的提示框矢量图