任务目标:通过使用menu控件和CSS样式,实现一级横向竖向和多级横向竖向导航的制作
重点:控件节点值的添加
难点:控件的样式引用与样式设置
步骤:
一、使用Menu控件和样式完成如下导航设置
二、一级横向导航:
1、编辑结点:
2、设置样式:
3、menu控件引用样式和设置属性
Orientation属性值为Horizontal
控件引用类样式nav:CssClass=“Nav”
二、二级横向导航
1、在一级横向导航的基础上添加二级结点,设置如下:
2、Menu控件的属性设置如下:
Orientation属性值为Horizontal
StaticEnableDefaultPopOutImage属性值为false
控件引用类样式nav:CssClass=“Nav”
或在原来Nav样式的基础上,在链接样式中添加背景图,使得二级导航同样有背景
修改DynamicMenuItemStyle样式中的height、HorizontalPadding、VerticalPadding属性值从而修改二级菜单的行距、垂直间隔和水平缩进位置。
三、竖状导航设置
1、节点设置同一级横向导航
2、样式设置如下:
3、使控件引用类样式menu
四、样式中用到的背景图,请自行截取
上一篇:
2-8图表控件统计种类产品数量
下一篇:
3-2树状视图