标签,子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。
由于Dreamweaver在“设计”视图中仅支持两级子菜单,但是在“代码”视图中可以添加任意多个子菜单。
(3)为每个菜单项目定义对应的超链接
由于Dreamweaver生成的是标准的HTML标签和CSS样形文件,因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。
只需要在“文档”窗口中选择一个菜单栏组件,在属性检查器(“窗口”>“属性”)中,选择要应用链接的菜单项的名称。
在“链接”文本
杨教授工作室,版权所有,XX,7/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料框中键入链接,或者单击文件夹图标以浏览到相应的文件。
采用无序列表ul和li组成菜单结构,并设置li中的a的display为block。
、可以在属性面板中修改相关的CSS属性项目和显示的风格7
8、为各个菜单项添加动态帮助提示信息(ToolTip帮助信息)
在“文档”窗口中选择一个菜单栏组件,在属性检查器(“窗口”>“属性”)中,选择要为其创建工具提示的菜单项的名称。
在“标题”文本框中键入工具提示的文本。
杨教授工作室,版权所有,XX,8/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
9、测试现在的效果
(1)允许浏览器执行其中的JavaScript脚本程序
(2)最终的结果如下
由于Spry菜单栏组件使用DHTML层实现将菜单显示在其它的HTML标签实体所代表的内容的上方。
如果页面中包含有Flash内容,可能会出现问题。
因为Flash影片总是显示在所有其它DHTML层的上方,此问题的解决方法是,更改Flash影片的参数,让其使用wmode="transparent"。
1.1.2自定义菜单栏组件的显示风格(修改CSS文件)
1、可以直接对SpryMenuBarHorizontal.css文件进行修改满足项目的特殊要求
尽管使用属性检查器可以简化对菜单栏构件的编辑,但是属性检查器并不支持自定义的样式设置任务。
但可以通过修改菜单栏组件的CSS文件中特定的样式规则,并创建根据自己的喜好、设置菜单栏的样式。
基本的实现原理也就是修改SpryMenuBarHorizontal.css或SpryMenuBarVertical.css文件中的默认定义的规则。
2、改变菜单的对齐形式的实现示例
(1)水平菜单省缺是放置在页面的左边的
如果希望将它放到页面的右边对齐。
在CSS视图窗口中可以点击:
ul.MenuBarHorizontalli项目,然后在下面的属性面板中,点击float项右边的下拉列
表,将left换为right——将每个菜单项目“右对齐”。
杨教授工作室,版权所有,XX,9/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
再修改ul.MenuBarHorizontal的显示风格为“右对齐”——新增一个“float:
right;”
项目
ul.MenuBarHorizontal{
margin:
0;
padding:
0;
list-style-type:
none;
font-size:
100%;
cursor:
default;
width:
auto;
float:
right;
}
(2)再测试修改后的效果——现在菜单被对齐到页面的右边了
杨教授工作室,版权所有,XX,10/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
当然,也可以双击ul.MenuBarHorizontalli,在打开的CSS规则面板中设置菜单项的格式。
3、改变页面刚加载时的超链接的文本的颜色的实现示例
1)需要修改"ul.MenuBarHorizontala."属性项目的定义(
而如果想修改当鼠标移到连接上时连接的背景和文本颜色,那么应该修改"ul.MenuBarHorizontala.MenuBarItemHover,ul.MenuBarHorizontala.Menu„."属性项目的定义。
当然,如果所建立的是垂直的菜单,那么MenuBarHorizontal将是MenuBarVertical。
(2)默认文本的颜色主要是由“ul.MenuBarVerticala”或者“ul.MenuBarHorizontala”属性项目控制定义
默认的值为“color:
#333;text-decoration:
none;”,修改该值就可以达到改变菜单的文本的颜色。
(3)修改当鼠标指针移过文本上方时文本的颜色
主要是由“ul.MenuBarVerticala:
hover”或者“ul.Men