dw添加下拉菜单_怎样用dw制作导航栏下拉菜单

一、工具:dw工具

二、操作步骤:

【1】打开dw软件,新建立一个新的文件。

e258f75b83c906898e312f14c2a18c91.png

【2】点击常用,选择布局,绘制一个层。

b85983d6de5019f0b7c2a764b94c36f6.png

【3】再点击层,再绘制一个。可以看到,第一个层是layer1,第二个是layer2,这都是系统默认的。

95d9b09405ebeff6aec7f8d51523965c.png

【4】通过界面下方属性栏,设置layer2的属性。益处设置为hidden,他的意思是,如果这个层装不下文字,就隐藏文字。

afb9420694fba08636946edc22489830.png

【5】将光标放在layer1,然后点击插入表格。建立一个一行三列,宽388的表格。

f9946bdc268364235d045400884f6662.png

【6】在表格内输入百度经验,百度知道,百度文库,然后在属性栏设置如下属性。

5891a006479f32c52863d784dfb53f0e.png

【7】在layer2中输入经验首页,个人中心,小测首页,帮帮首页。然后设置如下属性。

703d4c7f953b55c7267665a948ffc225.png

【8】调处时间轴:点击窗口——时间轴。

b52a1287547f40ca58fcceacebdb3953.png

【9】需阿泽layer2,右键单击图中所示,然后选择添加对象。

eca2dcfbfcea592be4a0a8ca8403f40b.png

【10】鼠标将时间针定位在第一帧,然后设置layer2的高度为0。

bf87e5c5b387910af5fd68cb9449616e.png

【11】选择时间轴,播放时间轴。

7de533ce9b81aab71246c4b5a12b13a6.png

【12】接着在标签栏设置鼠标动作为onmouseover,意思是鼠标移动到上面就执行时间轴1,就会展开layer2。

69d23828ee526a4d5e02acfb0dc140d4.png

【13】同样的方法,添加如下动作,下图有各个动作的解释。

c785148a65a81d3176056fc25d0e6915.png

【14】按快捷键F12,来到了浏览器,可以看到效果。

e9d1b580855abce259d4c2d93f4a5c39.png

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DW中使用onmouseover实现网站导航菜单的步骤如下: 1. 在DW中创建一个新页面,然后在页面上创建一个导航,可以使用表格或div等元素来创建。 2. 对导航中的每个菜单项设置一个超链接,同时为每个菜单添加一个下菜单的容器,可以使用div等元素来实现。 3. 设置下菜单容器的样式,包括宽度、高度、背景色等,并将其隐藏起来,可以使用CSS中的display:none属性来隐藏。 4. 将下菜单容器放置在对应的菜单项下方,并设置其位置为绝对定位。 5. 使用onmouseover事件来实现鼠标移入菜单项时显示下菜单容器的效果,可以使用JavaScript来实现。具体实现方法如下: a. 首先给菜单添加一个onmouseover事件,例如:onmouseover="showMenu('menu1')" b. 在JavaScript中定义showMenu函数,该函数的作用是显示对应的下菜单容器。例如: ``` function showMenu(menuId) { var menu = document.getElementById(menuId); menu.style.display = "block"; } ``` 6. 使用onmouseout事件来实现鼠标移出菜单项时隐藏下菜单容器的效果,可以使用JavaScript来实现。具体实现方法如下: a. 首先给菜单添加一个onmouseout事件,例如:onmouseout="hideMenu('menu1')" b. 在JavaScript中定义hideMenu函数,该函数的作用是隐藏对应的下菜单容器。例如: ``` function hideMenu(menuId) { var menu = document.getElementById(menuId); menu.style.display = "none"; } ``` 7. 最后保存页面并预览效果。当鼠标移入菜单项时,对应的下菜单容器会显示出来;当鼠标移出菜单项时,下菜单容器会隐藏起来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值