菜单控件选定项的颜色更改（取决于选择）

• 下载演示 - 8.09 KB

这是我关于“菜单控件选中项的颜色根据选择变化”的第一篇文章。在某些情况下，菜单控件在浏览器中可能无法正常工作。我们也会尝试解决这个问题。如果本文档有任何错误，我深表歉意。欢迎提出所有建议。让我们开始工作吧。

引言

本文将帮助您在不使用任何后台代码的情况下，使用具有站点地图路径的简单菜单控件并利用控件适配器。在本文中，我们将了解如何更改菜单项的选中颜色。希望您喜欢本文。请提供您宝贵的建议和反馈。

菜单控件

ASP.NET 菜单控件允许您为 ASP.NET Web 页面开发静态和动态显示的菜单。您可以直接在控件中配置菜单控件的内容，或者通过将控件绑定到数据源来指定内容。无需编写任何代码，即可控制 ASP.NET 菜单控件的外观、方向和内容。除了控件公开的视觉属性外，该控件还支持 ASP.NET 控件皮肤和主题。

Web.sitemap 文件

要使用 ASP.NET 站点导航，您必须描述站点的结构，以便站点导航 API 和站点导航控件能够正确显示站点结构。默认情况下，站点导航系统使用包含站点层次结构的 XML 文件。但是，您也可以将站点导航系统配置为使用备用数据源。创建站点地图的最简单方法是创建一个名为 Web.sitemap 的 XML 文件，该文件以层次结构组织站点的页面。此站点地图会自动被 ASP.NET 的默认站点地图提供程序识别。

SiteMap PathControl/面包屑导航

ASP.NET 2.0 SiteMapPath 控件显示导航路径，使用户能够了解他们在网站上的当前位置。它本质上提供了“您在这里”的功能。这种类型的导航元素通常称为面包屑导航。基本呈现方式显示当前页面位置，并显示链接以返回主页。

ASP.NET 浏览器注册工具/.Browser 文件

ASP.NET 浏览器注册工具会将所有系统范围的浏览器定义解析并编译到一个程序集中，并将该程序集安装到全局程序集缓存中。该工具使用 .NET Framework .Browsers 子目录中的浏览器定义文件（.BROWSER 文件）。该工具可以在 %SystemRoot%\Microsoft.NET\Framework\version\ 目录中找到。通过将新的 .BROWSER 文件添加到位于系统上 %SystemRoot%\Microsoft.NET\Framework\version\CONFIG\Browsers 的文件夹中，可以添加新浏览器的信息。由于应用程序在每次需要浏览器信息时都不会读取 .config 文件，因此您可以创建一个新的 .BROWSER 文件并运行 Aspnet_regbrowsers.exe 来将所需的更改添加到程序集中。这样，服务器就可以立即访问新的浏览器信息，而无需关闭任何应用程序来获取信息。应用程序可以通过当前 HttpRequest 的 Browser 属性访问浏览器功能。

Using the Code

• 通过以下方式启动 Visual Studio：
• 开始 --> 运行 --> DEVENV
  • 文件 --> 新建网站 -->
    • 位置：Http；语言：C#
      • 名称：https:///MenuDemo
      • 好的

为了演示，请添加 1 个母版页和 5 个内容页。将母版页分配给内容页。给它们起名字。我给它们起了名字：

1. Default.aspx
2. SecondPage.aspx
3. ThirdPage.aspx
4. FourthPage.aspx
5. MasterPage.master
6. SecondPageSubPage.aspx

在母版页中，添加以下 HTML

<div id="topNavigation" align="center">
    <asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"
        MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
        <StaticSelectedStyle CssClass="staticSelectedStyle" />
        <StaticHoverStyle CssClass="staticHoverStyle" />
    </asp:Menu></div>

<div class="subNavigation" align="left" >
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
        ShowStartingNode="false" StartingNodeOffset="0" />    
    <asp:Menu ID="subMenu" runat="server" DataSourceID="subMenuData"
        Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="substaticMenuItemStyle" />
        <StaticHoverStyle CssClass="substaticHoverStyle" />
    </asp:Menu>
</div> 

在上面的 HTML 中，我们需要探索一些内容

1. 如果 MaximumDynamicDisplayLevels 设置为 0，则不会动态显示任何菜单节点。如果 MaximumDynamicDisplayLevels 设置为 负数，则会引发异常。
2. 方向可以设置为 Vertical/Horizontal。我使用了 Horizontal。
3. StartingNodeProperty 获取或设置一个指示是否检索并显示起始节点的值。ShowStartingNode 属性在调用 GetView 和 GetHierarchicalView 方法时进行评估，此时 Populate 返回的节点树。
4. SiteMapDataSource.StartingNodeOffset 属性获取或设置一个正整数或负整数偏移量，从起始节点开始，该偏移量决定数据源控件暴露的根层次结构。

• 添加新的 ASP.NET Folder --> Theme
  • 在 Solution Explorer 中选择 Theme1
    • 添加新项 Style Sheet
      • 添加 <--

根据您的需求设计样式表。

以下是 CSS 代码块

// Main CSS and Heading Section
.Main1
{
    background-color: #66FF99;
}
.h1
{
    background-color: #99FFCC;
    color: #009900;
}

//Navigation Section
 #topNavigation
{
    width: 100%;
    background-color: #99FF33;
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    z-index: 0;
    height: 30px;
}
  
   #subNavigation
{
    width: 100%;
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    padding: 0;
    margin: 0;
    height: 30px;
    background-color: #009900;
    color: #66FF66;
}  

//Style CSS
    .staticMenuItemStyle
{
    width: 89px;
    background-color: #009900;
    border: solid 1px #000;
    color: #CCFF33;
    text-align: center;
    height: 30px;
}
    .staticSelectedStyle
{
    background-color: #CCFF33;
    color: #003300;
    border-bottom: solid 1px #eee;
    z-index: 100;
}
    .staticHoverStyle
{
    background-color: #00CC66;
}
   
    .substaticMenuItemStyle
{
    width: 89px;
    background-color: #009933;
    text-align: center;
    color: #66FF33;
}
    .substaticHoverStyle
{
    background-color: #99FF99;
    border: solid 1px #A68F8F;
    color: #009900;
}

在上面的 CSS 中，我们需要探索一些内容

1. StaticMenuItemStyle 是未选中项的样式
2. StaticSelectedStyle 是选中项的样式
3. StaticHoverStyle 是鼠标悬停时的项样式

• 添加新项
  • -->SiteMap
    • --> Ok <--

在站点地图中给出导航。有关站点地图的更多信息，请参阅此链接。现在，请按如下所示配置站点地图：

<sitemap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<sitemapnode title="Main">     
<sitemapnode title="HomePage" description="Redirects To HomePage" url="Default.aspx">
       
        <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title="Main"  description="">
      <siteMapNode url="Default.aspx" title="HomePage" 
            description="Redirects To HomePage" />
        <siteMapNode url="SecondPage.aspx" title="SecondPage" 
            description="Redirects To SecondPage" >
          <siteMapNode url="SecondPageSubPage.aspx" title="SecondPageSubPage"
              description="Redirects To SecondPage SubMenu" />
        </siteMapNode>
       <siteMapNode url="ThirdPage.aspx" title="ThirdPage" 
           description="Redirects To ThirdPage" />
       <siteMapNode url="FourthPage.aspx" title="FourthPage" 
           description="Redirects To FourthPage" />
           </siteMapNode>
</siteMap>

<sitemapnode title="SecondPage" description="Redirects To SecondPage"
    url="SecondPage.aspx"> 
</sitemapnode> 
</sitemapnode> 
</sitemapnode> 
</sitemap>

在上面的站点地图中，我们需要探索一些内容

title 属性定义了通常用作链接文本的文本，description 属性既作为文档，又作为 SiteMapPath 控件中的工具提示。控件的渲染不支持 Google Chrome，即根据我的观察。因此，我们可以通过添加 .browser 文件来解决这个问题。

• 添加新项
  • -->Browser File-->
    • 添加 <--

这将在 AppBrowser 文件夹中添加 .Browser 文件。

复制以下代码

<!--
    You can find existing browser definitions at
    <windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers
-->
<browsers>
	<!----><browser refID="safari1plus">
		<!----><controlAdapters>
			<adapter controlType="System.Web.UI.WebControls.Menu"
                               adapterType="" />
		</controlAdapters>
	</browser>
</browsers>

到此，我们的示例就完成了。现在您可以亲自测试了。

历史

这是第一个版本。