ASP.Net/Asp Control/Menu

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Adding a hover style to dynamic items in the menu control

   <source lang="csharp">

<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
       <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1">
          <StaticHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid" 
           BorderWidth="1"></StaticHoverStyle>
          <DynamicHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid" 
           BorderWidth="1"></DynamicHoverStyle>          
       </asp:Menu>
   </form>

</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest News" url="News.aspx">
        <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Adding a hover style to static items in the menu control

   <source lang="csharp">

<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
       <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1">
          <StaticHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid" 
           BorderWidth="1"></StaticHoverStyle>            
       </asp:Menu>
   </form>

</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest" url="News.aspx">
        <siteMapNode title="U.S." description="U.S." url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Applying divider images to dynamic items

   <source lang="csharp">

<asp:Menu ID="Menu1" 

         Runat="server" 
         DataSourceID="SiteMapDataSource1" 
         DynamicBottomSeparatorImageUrl="myDivider.gif">

</asp:Menu> 

</source>


A simple use of the Menu control

   <source lang="csharp">

<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
       <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1">
       </asp:Menu>
   </form>

</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest News" url="News.aspx">
        <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Data Binding with Menu Control

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Data Binding with Menu control</title>

</head> <body> 

  <form id="form1" runat="server">

     <asp:Menu id="menuMain" runat="server" DataSourceID="siteSource" />
     <asp:SiteMapDataSource ID="siteSource" 
                            runat="server" 
                            ShowStartingNode="false"  />

  </form>

</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode url="BookHome.aspx" title="Home"  
           description="Return to home page">
     <siteMapNode url="Catalog.aspx" title="Catalog" >
        <siteMapNode url="Categories.aspx" title="Categories" >
           <siteMapNode url="List.aspx?cat=1" title="Graphics" />
           <siteMapNode url="List.aspx?cat=2" title="Internet" />
           <siteMapNode url="List.aspx?cat=3" title="Networking" />
        </siteMapNode>
        <siteMapNode url="Series.aspx" title="Series" >
           <siteMapNode url="List.aspx?series=1" title="Core Series" />
           <siteMapNode url="List.aspx?series=2" title=".NET Series" />
           <siteMapNode url="List.aspx?series=3" title="Signature Series"/>
        </siteMapNode>
     </siteMapNode>
     <siteMapNode url="Search.aspx" title="Search"  />
     <siteMapNode url="Help.aspx" title="Help" >
        <siteMapNode url="About.aspx" title="About Us" />
        <siteMapNode url="Contact.aspx" title="Contact Us" />
     </siteMapNode>
  </siteMapNode>

</siteMap> 

</source>


Forcing the menu items to use a horizontal orientation

   <source lang="csharp">

<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
       <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
        Orientation="Horizontal">
       </asp:Menu>
   </form>

</body> </html> File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest News" url="News.aspx">
        <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Menu control

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> 

   <title>Menu Samples</title>

</head> <body> 

   <form id="form1" runat="server">

     <asp:Menu id="menuOne" 
               runat="server" 
               DataSourceID="siteSource1" 
               BackColor="#B5C7DE" 
               DynamicHorizontalOffset="2" 
               Font-Names="Verdana" 
               Font-Size="1em" 
               ForeColor="#284E98" 
               StaticSubMenuIndent="10px" >
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
        <DynamicMenuStyle BackColor="#B5C7DE" />
        <StaticSelectedStyle BackColor="#507CD1" />
        <DynamicSelectedStyle BackColor="#507CD1" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
     </asp:Menu>
     

     

     
      
      


     <asp:SiteMapDataSource ID="siteSource1" runat="server" 
        ShowStartingNode="false"  />
        

  </form>

</body> </html>

File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest News" url="News.aspx">
        <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Menu style

   <source lang="csharp">

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> 

   <title>Untitled Page</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:Menu ID="Menu1" 
                 runat="server" 
                 BackColor="#FFFBD6" 
                 ForeColor="#990000" 
                 Font-Names="Verdana"
                 Font-Size="0.8em" 
                 StaticSubMenuIndent="10px" 
                 DynamicHorizontalOffset="2" 
                 Orientation="Horizontal">
           <StaticSelectedStyle BackColor="#FFCC66" />
           <StaticMenuItemStyle HorizontalPadding="5" VerticalPadding="2" />
           <DynamicMenuStyle BackColor="#FFFBD6" />
           <DynamicSelectedStyle BackColor="#FFCC66" />
           <DynamicMenuItemStyle HorizontalPadding="5" VerticalPadding="2" />
           <DynamicHoverStyle Font-Bold="True" BackColor="#990000" ForeColor="White" />
           <Items>
               <asp:MenuItem Value="New Item" Text="Windows">
                   <asp:MenuItem Value="Windows XP" Text="Windows XP">
                       <asp:MenuItem Value="Home Edition" Text="Home Edition"></asp:MenuItem>
                       <asp:MenuItem Value="Professional" Text="Professional"></asp:MenuItem>
                   </asp:MenuItem>
                   <asp:MenuItem Value="Windows 2003 Server" Text="Windows 2003 Server"></asp:MenuItem>
               </asp:MenuItem>
               <asp:MenuItem Value="New Item" Text="Mac OS X">
                   <asp:MenuItem Value="Mac OS X" Text="Mac OS X">
                       <asp:MenuItem Value="10.3" Text="10.3"></asp:MenuItem>
                       <asp:MenuItem Value="10.4" Text="10.4"></asp:MenuItem>
                   </asp:MenuItem>
               </asp:MenuItem>
           </Items>
           <StaticHoverStyle Font-Bold="True" BackColor="#990000" ForeColor="White" />
       </asp:Menu>
   </form>

</body> </html> 

</source>


Menu style: Orientation, StaticSubMenuIndent

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> 

   <title>Menu Samples</title>

</head> <body> 

   <form id="form1" runat="server">

     <asp:Menu id="menuTwo" 
               runat="server" 
               DataSourceID="siteSource1" 
               BackColor="#FFFBD6" 
               DynamicHorizontalOffset="2" 
               Font-Names="Verdana" 
               Font-Size="1em" 
               ForeColor="#990000" 
               Orientation="Horizontal" 
               StaticSubMenuIndent="10px" >
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
        <DynamicMenuStyle BackColor="#FFFBD6" />
        <StaticSelectedStyle BackColor="#FFCC66" />
        <DynamicSelectedStyle BackColor="#FFCC66" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#990000" ForeColor="White" />
     </asp:Menu>
     

      
     

     

     


     <asp:SiteMapDataSource ID="siteSource1" runat="server" 
        ShowStartingNode="false"  />
        

  </form>

</body> </html> 

</source>


Menu with CSS style

   <source lang="csharp">

<%@ Page Language="C#"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head id="Head1" runat="server"> 

   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Styling a Menu</title>
   <style type="text/css" rel="stylesheet">
  1. logo { 
  float: left; 
  width: 10.5em; 
  background: #CCCCCC; 
  padding: 0.5em 0.5em 0.5em 1em;
  margin: 0;

} .primaryStaticMenu { 

  background-color: transparent;
  float: right;

} .primaryStaticMenuItem { 

  width: 10em;
  background-color: #f7f2ea; 
  border-width: 1px;
  border-color: #efefef #aaab9c #ccc #efefef; 
  border-style: solid;
  color: #777777;
  padding: 0.5em 0 0.5em 1em;

} .primaryStaticHover { 

  color: #800000;
  background: #f0e7d7;

} .primaryDynamicMenu { 

  background-color: #f7f2ea;               
  border-bottom: solid 1px #ccc;

} .primaryDynamicMenuItem { 

  width: 10em;
  background-color: #f7f2ea; 
  color: #777;
  padding: 0.5em 0 0.5em 1em;
  border-width: 1px;
  border-color: #f7f2ea #aaab9c #f7f2ea #efefef;  
  border-style: solid;

} .primaryDynamicHover { 

  color: #800000;
  background: #f0e7d7;

} .secondaryLevelOne { 

  background-color: transparent;
  background-repeat: repeat-x;
  margin: 1.5em 0 0 0;
  padding: 5px 0 0 5px;
  width: 12em; 
  height: 35px;

} .secondaryLevelTwo { 

  background: #FAFBFB;
  padding: 5px 0 5px 5px;

} .secondaryStaticHover { 

  color: #800000;

} 

   </style>

</head> <body> 

  <form id="form1" runat="server">

     <asp:Menu id="menuPrimary" 
               runat="server" 
               DataSourceID="siteSource1" 
               Orientation="Horizontal" 
               StaticEnableDefaultPopOutImage="false"
               StaticDisplayLevels="1"  
               MaximumDynamicDisplayLevels="1">
       <StaticMenuStyle CssClass="primaryStaticMenu"/>
       <StaticMenuItemStyle CssClass="primaryStaticMenuItem"/>
       <StaticHoverStyle CssClass="primaryStaticHover"/>   
       <DynamicMenuStyle CssClass="primaryDynamicMenu" />     
       <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem"/>
       <DynamicHoverStyle CssClass="primaryDynamicHover"/>
     </asp:Menu>

     <asp:SiteMapDataSource ID="siteSource1" runat="server" 
        ShowStartingNode="false"  />
        

  </form>

</body> </html>

File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="The Latest News" url="News.aspx">
        <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Style menu

   <source lang="csharp">

<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
       <asp:Menu ID="Menu1" 
                 Runat="server" 
                 DataSourceID="SiteMapDataSource1"
                 BackColor="Navy" 
                 ForeColor="White" 
                 Font-Names="Verdana" 
                 Font-Size="0.8em" 
                 StaticSubMenuIndent="10px" 
                 DynamicHorizontalOffset="2">
          <StaticSelectedStyle BackColor="#507CD1"></StaticSelectedStyle>
          <StaticMenuItemStyle HorizontalPadding="5" 
           VerticalPadding="2"></StaticMenuItemStyle>
          <DynamicMenuStyle BackColor="#B5C7DE"></DynamicMenuStyle>
          <DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle>
          <DynamicMenuItemStyle HorizontalPadding="5" 
           VerticalPadding="2"></DynamicMenuItemStyle>
          <DynamicHoverStyle ForeColor="White" Font-Bold="True" 
           BackColor="#284E98"></DynamicHoverStyle>
          <StaticHoverStyle ForeColor="White" Font-Bold="True" 
           BackColor="#284E98"></StaticHoverStyle>
       </asp:Menu>
   </form>

</body> </html>

File: Web.sitemap <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > 

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
     <siteMapNode title="News" description="News" url="News.aspx">
        <siteMapNode title="U.S." description="News" url="News.aspx?cat=us" />
        <siteMapNode title="World" description="News" url="News.aspx?cat=world" />
        <siteMapNode title="Technology" description="Technology" url="News.aspx?cat=tech" />
        <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
     </siteMapNode>
     <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>

</siteMap> 

</source>


Using custom images

   <source lang="csharp">

<asp:Menu ID="Menu1" 

         Runat="server" 
         DataSourceID="SiteMapDataSource1" 
         Orientation="Horizontal" 
         DynamicPopOutImageUrl="myArrow.gif" 
         StaticPopOutImageUrl="myArrow.gif">

</asp:Menu> 

</source>


Using the MenuItemClick event (C#)

   <source lang="csharp">

<%@ Page Language="C#" %> <script runat="server"> 

  protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
  {
     Listbox1.Items.Add(e.Item.Parent.Value + " : " + e.Item.Value);
  }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:Menu ID="Menu1" 
                 Runat="server" 
                 DataSourceID="XmlDataSource1" 
                 OnMenuItemClick="Menu1_MenuItemClick">
           <DataBindings>
               <asp:MenuItemBinding DataMember="Item" 
                TextField="Category"></asp:MenuItemBinding>
               <asp:MenuItemBinding DataMember="Option" 
                TextField="Choice"></asp:MenuItemBinding>
           </DataBindings>
       </asp:Menu>
       <asp:ListBox ID="Listbox1" Runat="server">
       </asp:ListBox>
       <asp:xmldatasource ID="XmlDataSource1" runat="server" 
        datafile="Data.xml" />
   </form>

</body> </html> File: Data.xml <?xml version="1.0" encoding="utf-8"?> <Hardware> 

 <Item Category="A">
   <Option Choice="A1" />
   <Option Choice="A2" />
 </Item>
 <Item Category="B">
   <Option Choice="B1" />
   <Option Choice="B2" />
   <Option Choice="B3" />
 </Item>

</Hardware> 

</source>


Using the MenuItemClick event (VB)

   <source lang="csharp">

<%@ Page Language="VB" %> <script runat="server"> 

   Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.MenuEventArgs)
       Listbox1.Items.Add(e.Item.Parent.Value & " : " & e.Item.Value)
   End Sub

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu Server Control</title>

</head> <body> 

   <form id="form1" runat="server">
       <asp:Menu ID="Menu1" Runat="server" DataSourceID="XmlDataSource1" 
        OnMenuItemClick="Menu1_MenuItemClick">
           <DataBindings>
               <asp:MenuItemBinding DataMember="Item" 
                TextField="Category"></asp:MenuItemBinding>
               <asp:MenuItemBinding DataMember="Option" 
                TextField="Choice"></asp:MenuItemBinding>
           </DataBindings>
       </asp:Menu>

<asp:ListBox ID="Listbox1" Runat="server"> </asp:ListBox>

       <asp:xmldatasource ID="XmlDataSource1" runat="server" 
        datafile="Data.xml" />
   </form>

</body> </html>

File: Data.xml <?xml version="1.0" encoding="utf-8"?> <Hardware> 

 <Item Category="A">
   <Option Choice="A1" />
   <Option Choice="A2" />
 </Item>
 <Item Category="B">
   <Option Choice="B1" />
   <Option Choice="B2" />
   <Option Choice="B3" />
 </Item>

</Hardware> 

</source>
Источник — «http://www.nfex.ru/index.php?title=ASP.Net/Asp_Control/Menu&oldid=2111»