实训实践
您当前位置: 实训实践> 项目教学上机实训> 3-1基于Menu的一级二级导航

3-1基于Menu的一级二级导航

发布时间:2017-04-10 15:02 浏览次数:6554    
字体大小 默认
  • 默认
  • 13pt
  • 14pt
  • 15pt
  • 16pt
  • 17pt
  • 18pt
  • 19pt
  • 20pt
  • 21pt
  • 22pt
  • 23pt
  • 24pt
  • 25pt
字体颜色

默认

  • 默认
背景颜色

默认

  • 默认

任务目标:通过使用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


 


 


四、样式中用到的背景图,请自行截取


      


 


 


 

操作成功!此窗口3秒钟后自动关闭!
立即关闭