用Dreamweaver做真正半透明的菜单阴影

　　给您网页上的菜单加上阴影效果能很好的提高视觉效果，当然办法有很多，用Java和图片都能实现，但用Java您是不是觉得太复杂？用图片很简单，但假如菜单下面有内容，效果就太假了。下面我们只用dreamweaver4自身的功能，通过简单的办法就能让您网页上的菜单拥有真正半透明的阴影效果。

　　下图是在Dreamweaver4中用层功能做的一个很简单的弹出菜单：

图1

　　左边是触发条，当鼠标放在这些条目上右边就会弹出相应的菜单。这里我们假设要加上阴影效果的菜单层为submenu1。

　　首先，用层工具新建一个层，大小位置一定要和submenu1层保持一致，到属性面板把层的背景色改为黑色，到层面板选中这个新建出来的层，双击层的名字，将这个层的名字改成submenu1s，z高度设为比submenu1层低一级。

图2

　　选中submenu1s层，用键盘上的方向键往右和下挪动7、8次，使submenu1s层和submenu1层错开。

　　现在开始修改触发元素和菜单层的事件，以让submenu1s层和submenu1层的显示隐藏同步。选中submenu1层，到事件面板，一般这种方法做出的菜单都有两个事件，OnMouseOut和OnMouseOver，双击OnMouseOver事件，出现隐藏-显示层面板，选submenu1s层，点显示按钮，点确定关掉这个窗口。同样，再双击OnMouseOut事件，选submenu1s层，点隐藏按钮，点确定。

　　用上面的方法修改您自己菜单的触发元素的事件，这样submenu1s层和submenu1层就同时显示、隐藏。

　　到CSS面板新建一个样式，取名为shadow，在样式定义的窗口中到扩展栏。点滤镜下拉菜单，选中第一项“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”。

图3

　　修改其中的“？”：Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

　　其中Opocity=？用于控制半透明的程度，取值相当于百分比，您能够根据您自己的情况调整这个值。

　　选择submenu1s层，再到CSS单击shadow样式，对submenu1s层应用这个样式。

　　按F12预览看看吧。

图4

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有