滑动菜单的制作

滑动菜单的制作滑动菜单的制作 今天应朋友们要求 来对我网站上一个滑动菜单效果写一篇简单的教程 在牛筋大学软件部有一个关 于层滑动的效果 好像 Itnow 上的广告也是采用的这样效果 不用的时候隐藏 用的时候点击一下按钮层 就慢慢的滑动出来 即节省了有限的页面空间 还达到了令人羡慕的视觉效果 感觉起来还不错 这个效 果大家可以点击这里察看 言归正传 废话少说 准备工作如下 1 在 dw 中新建一个空白文档 或者打开你要添加效果的页面 2 设置好你自己的 css 风格 3 在页面上插入一个长 500pix 的表格 这里说明 插入表格的目的是为了控制层在不同分辨率下 保持相对的位置不变 如果你的页面之前没有做相关设置 那么这一部你可能要费点功夫整理一下你的页 面结构 4 将光标置入表格内 点击菜单 插入 层 插入一个长 500 高 20 的图层 并命名为 layer1 5 然后再将光标置入图层 layer1 点击菜单 插入 层 再插入一个长 500 高 130 的图层 layer2 并将 layer2 的属性中左边距和上边距都设置为 0 并为它指定一个你喜欢的背景色 6 然后重复步骤 5 的方法 再插入一个图层 layer3 这个图层没什么特殊的用处 在我的这个教程 中 我只不过是为了放置几个按钮而已 最后我的开起来如图 TIPS 这里这么做的目的是为了给你要滑动的图层前面加一个挡板 只有当点击的时候图层才从你的 这个图层下缓缓的滑动出来 现在开始 才正式进入到我们今天要制作的滑动菜单的制作过程中 现在让我们再次重复上面的步骤 5 再插入一个图层 layer4 设置图层属性为宽 500 150 高 刚好是 刚才 layer2 和 layer3 的高度之和 并将图层 layer4 调整到另外两个图层下面 如图 然后我们点击图层 layer2 前面的眼睛让他闭合 这样可以让我们看到它下面的图层 layer4 这时 我们点击 ALT F9 打开时间轴面板 DW 已经为我们添加了默认的时间轴 Timeline1 然后 我们选中我们要滑动的图层 layer4 在上面点击右键 选择 添加到时间轴 这时我们可以在时间轴面 板中看到我们刚刚制定的图层 layer4 这说明 我们已经添加成功了 然后我们点击时间轴上的第 15 桢 将图层 layer4 的属性面板中的上边距调整为 150 到这里 一个 能滑动的图层就算做好了 你可以拖动时间轴上面的红色方块慢慢从 1 走向 15 你就可以看到你的这个 图层慢慢的从 layer2 和 layer3 下面滑动出来 好了 现在我们只需要给这个会滑动的图层 layer4 设置一个可以激活他的动作就算 over 了 这之 前 我已经在我添加的 layer3 上插入了一个表格 并为 layer4 设置了两个按钮 我们先设置激活滑动图层的动作 选择上展开这个按钮 转到行为面板 点击面板中的 在出来的 菜单中选择 时间轴 播放时间轴 DW 会弹出一个窗体 在上面的下拉菜单中选择 timeline1 然后在行为面板中确认事件为 onclick 好了 到这里 你可以预览一下 当你点击上展开按钮时 你的图层就会慢慢的从上而下滑动出来 怎么样 看到了吧 我们再给图层添加上一个简单的关闭动作 就是点击关闭按钮后图层隐藏 选 择上关闭按钮 转到行为面板 点面板中的 在出来的菜单中选择 显示隐藏层 在跳出的窗体中选 择上 layer4 然后点击下面的隐藏按钮 将其设置为隐藏 如图 好了 再预览一下 发现展开后点击关闭图层就没有了 不过 似乎有一个问题 再次点击展开的 时候 似乎没什么反应了 那是我们还有一个动作没有设置 重复刚才的步骤 5 选择上展开按钮 添加动作 时间轴 转到时间轴桢 在跳出的窗体中的下 拉菜单选择 timeline1 桢数添上 1 好了 这次预览发现这个问题解决了 但是我们似乎还是忽略了一个问题 点击关闭后这个图层被设 置为隐藏了 再点击展开也没反应了 还是运用老办法 给展开按钮添加一个动作就可以解决了 重复步骤 5 选择 显示隐藏层 和刚才步骤 6 相反 这次我们选择显示 确定后 保证行为面板 中显示隐藏图层的时间都是 onclick 此刻展开按钮的行为面