asp:Menu导航菜单CSS

在使用.NET Framework 4里的Menu控件时，要注意这个属性：RenderingMode

这个属性有3个选项：Default、Table、List

要想在.NET Framework 4里的Menu也正常地使用css来美化菜单，需要将RenderingMode设为Tbale！

 

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" RenderingMode="Table">

......
</asp:Menu>

 

----------------------------------

用menu绑定站点地图sitemap是一种快速建立导航条的方式。但是要把导航条、菜单做得漂亮，还是需要费点功夫的。虽然有静态(statisticsmenu)和动态(dynamicmenu)很多属性可以来设置菜单的表现，但是最有用的应该就是属性中的cssClass值了。先吃饭，等会儿再写。

 

--2012.04.04--

这顿饭吃的！

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" CssClass="Menu"  Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" DynamicVerticalOffset="1">
          <StaticMenuItemStyle      CssClass="StaticMenuItem" ItemSpacing="1px" />
          <StaticHoverStyle         CssClass="StaticHover" />
          <DynamicMenuStyle         CssClass="DynamicMenu" />
          <DynamicMenuItemStyle     CssClass="DynamicMenuItem"  />
          <DynamicHoverStyle        CssClass="DynamicHover" />
          <StaticMenuStyle          CssClass="StaticMenu" />
          <StaticSelectedStyle      CssClass="StaticSelected" />
</asp:Menu>

下面是相应的CSS代码：

/*#region MasterPage:Menu*/
.Menu{
/*background-color:Orange;*/
/*margin:2em 0 0 5em;*/  
}
.StaticMenu{
/*background-color:Green;*/
}
.StaticMenuItem{
color:Black;
background-color:#F7F7F7;
border:1px solid gray ; 
border-bottom:0;
font-weight:bold;
height:2em;
padding:5px 10px 6px 10px ;/*The layout of the ITEM in the BOX*/
}
.StaticHover{
background-color:#FE9955;
}
.StaticSelected{
background-color:Maroon;
}
.DynamicMenu{
z-index:10;
/*border-top:1px solid gray;*/
}
.DynamicMenuItem{
border:1px solid gray;
border-top:0;
width:10em;
background-color:#F7F7F7;
}
.DynamicMenuItem a{
padding:3px 0 3px 10px;/*The DynamicMenuItem's padding should set here*/
display:block;/*Increase the Click area*/
}
.DynamicHover{
background-color:#FE9955;
/*color:White;*/
}
/*#endregion MasterPage:Menu*/

这样基本上把所有的属性都照顾到了，直接copy吧！