使用Dreamweaver MX 方便添加下拉式菜单

原创 2005年03月02日 04:36:00

几乎不懂做网页, 更不懂JAVA了, 看到不少网站都有下拉式菜单,简洁、美观、实用,于是也想用在自己管辖下的网站首页上,因为不懂JAVA,所以花了一下午时间去截取和修改别人的代码,发觉事半功倍,得不到自己满意的效果,而且好些代码,看得很是头大。

晚上在网上搜了一下, 提到其实Dreamweaver MX 本身就提供功能强大的下拉菜单的制做,主要是利用新建层加上一些行为来完成,相关简单制做如下(取自网上):

 

Dreamweaver 4 制作弹出式菜单
 
 
本篇已刊登在《计算机应用文摘》十一月刊,不得转载!
 
   
 
自动滚屏(右键暂停)
 
   
   DW是梦幻的编织者,它努力为你的头脑注入新的活力,Dreamweaver有着不断变化的丰富的内涵,和长久不衰的设计思想。我们总会看到一些网站的弹出式菜单、状态栏特效、图片移动等效果。为了实现这些效果,网页设计师都喜欢利用代码直接编辑,而自Macromedia出品的 Dreamweaver4.0上市,所有的特效无需你写一行程序代码,仅需频频点击鼠标,便可实现,真正地实现操作简捷、所见即所得! 
   Dreamweaver 4 强大功能的详解,请浏览:http://favorites.myrice.com/eschool/frontpage/dw4_new.htm 
   现在我们来共同学习制作弹出式下拉菜单的效果,先看看下面的例子,用鼠标点一下,是否出现下拉菜单?(具体特效,请参看本页面的导航菜单!)
 
   
 
互动学院
 
   
   下面让笔者来解释一下,这是怎样的效果:当鼠标移动主菜单时,就激发一个Behaviors事件,在本例中响应的事件是显示隐藏图层,当然这种效果有很多。今后,我会将我所知的一些技巧都写出来供大家参考。
 
   1.在需要建立主导航菜单的相应位置,建立类似上面效果的主菜单; 
   2.新建一个层(layer),在层中建立表格。这个层就是弹出子菜单; 
   3.在这个层的表格中,加入导航文字,并添加超链接; 
 
 
   4.调整一下层与主菜单之间的位置啊,使层放置在主菜单的下面,这时,主菜单与子菜单(层)并排显示着; 
   5.打开Windows菜单,在下拉菜单中,选择Layer层命令,这时就会出现层窗口,同时在层窗口中会看到一个层(layer1);
 
   6.将这个层设置隐藏(hide)特性。 
   用鼠标在Layer1层上,点击一下眼睛的按钮,熟悉flash、photoshop的都会知道,他是用来进行显示和隐藏层的按钮,大家看一下,现在 Layer1层是不是隐藏了。跟大家解释一下,因为我们是想做当鼠标放在主菜单中会出现下拉式菜单的效果,所以这时必须将Layer1隐藏起来。不然就看不到特效了! 
 
 
   7.将主菜单的文字选中(我们这里是“互动学院”四个字),选择Windows菜单中的行为命令,打开行为面板,点击一下“+”找到show-hide layer(显示-隐藏层)的命令,弹出窗口,选择Layer1,点击show(显示)按钮,最后点击ok退出。
 
 

========================================================================完=====

有些东西要注意,一般网页制做人员想要实现的效果是MOUSE移到目标上的时候菜单显示,移走的时候,菜单消失,且菜单上肯定要有可以点击的操作,如果只是在目录上加对菜单的显示和隐藏操作,那么MOUSE一离开目标,那菜单也立即消失了, 根本没办法在菜单上做选择或是点击等操作;摸索了一下,同时在菜单里的对象上(如:表格)也加上对自身菜单的显示和隐藏形为就OK了。

8.将事件改为onMouseOver(即鼠标移至)。在行为窗口中,从事件列的下拉按钮中直接选择onMouseOver。    

      9.同样,我们依照步骤7,在show-hide layer(显示-隐藏层)窗口中,将layer1设为hide(隐藏)。并将事件改为onMouseOut(鼠标移出)。       现在我们尝试着,将鼠标移至主菜单,看看什么效果:          
互动学院
            子菜单确实能显现出来,但为何无法定位至子菜单呢?我们继续·····       10.在层面板中选择layer1,在行为窗口中,将layer1的行为与事件设置与主菜单相同。
  即在show-hide layer(显示-隐藏层)窗口中,将layer1设为show(显示),并将事件改为onMouseOver(鼠标移至);还在show-hide layer(显示-隐藏层)窗口中,将layer1设为hide(隐藏),并将事件改为onMouseOut(鼠标移出)。
      注意:我们对主菜单与子菜单(层)的设置,都是对layer1进行的,不能混淆!       现在我们看看,是不是在主菜单与子菜单的行为窗口中,显示的是两个事件,分别为onMouseOver、onMouseOut。    

      其中关系是:onMouseOver相对应是layer1的显示;onMouseOut相对应是layer1的隐藏。
      12.现在保存页面,打开Internet Explorer 浏览器(F12),是不是你所预览的效果了??             我们已成功制作完成了弹出式菜单的效果。现在对子菜单加些特效:       1.在层面板中,选择layer1,并在该层中,选择整个表格。       2.将表格的背景设为浅谈色#F5F5F5,在第一行中,添加如下代码:       onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'"       这样,就会在代码窗口中出现如下完全代码:       <td onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'">
  ···········
  </td>       同样,在其它各行,也这样设置!    
互动学院
            现在,一张具有特效的弹出式菜单就正式制作完成了!如果你在制作时,发现有问题的话,请通过邮件,或者我们网站的技术支持进行咨询。我们会及时回复!

jquery导航菜单上下都行,可以上弹也可以下拉,方便配置使用

可控制导航下拉方向的jQuery下拉菜单代码 - 何问起.nav * {margin: 0;padding: 0;list-style: none;} .nav {width: 700px;heigh...
  • wybshyy
  • wybshyy
  • 2016年07月29日 14:08
  • 189

如何在adobe dreamweaver cs6中添加动态下拉列表

1. 从Dreamweaver 右侧的Bindings -> Add RecordSet(Query). 选择Table中包含要添加的列表的内容的那个表的列。 我们这里是从ProductCompo...

使用活动条ActionBar---实现Tab以及下拉式导航---导航方便你我他

1.概述:活动条是Android3.0的重要更新之一。位于传统标题栏的位置,即屏幕的顶端,可显示应用的图标和Activity标题,除此之外,ActionBar的右边还可以显示活动项(Action It...

为下拉式菜单(DropDownList)添加第一个选项

很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: View Code body>     for...

[终端工具] 方便实用的下拉式(Top-Down)终端 --- Guake Terminal

看到Guake的时候,相见恨晚,这不正是我需要的么?! 对于经常需要打开Terminal的人而言,你有没有觉得每次都要通过Super+T来启动终端,之后再exit的方式很无聊; 亦或者不退出终端,...

为下拉式菜单(DropDownList)添加第一个选项

为下拉式菜单(DropDownList)添加第一个选项 很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html co...
  • lchyz89
  • lchyz89
  • 2011年12月02日 23:05
  • 402

QPushButton下拉式菜单.zip

  • 2016年04月22日 11:20
  • 7KB
  • 下载

Dreamweaver下拉菜单全攻略

下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。 ...

使用 Dreamweaver MX

  • 2007年11月13日 16:09
  • 8.79MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Dreamweaver MX 方便添加下拉式菜单
举报原因:
原因补充:

(最多只允许输入30个字)