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>
/*#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吧!