By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,124 Members | 1,569 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,124 IT Pros & Developers. It's quick & easy.

ASP.NET 2.0 - MenuItems and hovering

P: 80
Hello, I am currently attempting to modify an ASP.NET menu that I found online so that I will be better able to control the look and feel of menus that I create in the future. The current one that I am modifying is a simple "pop out" menu with a Horizontal orientation. If you compile that code that I am including in this post, you will see that when one hovers over the "main" ASP.NET Menu Items, there is a change in the color of "main" menu items (the menu items that are there when the page first renders and yield the "pop out" menu items);however, when one hovers over the MenuItems that pop out, I just can't seem to figure out how to make the color of the MenuItems change when they are hovered over unless I eliminate the background color property in the CSS code controlling the look of the "pop out" MenuItems. Can someone please tell me what code I need to add to be capable of creating an ASP.NET Menu with background colored "pop out" MenuItems that change color when hovered over? Any help would be greatly appreciated.

Here is the Code:
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head id="Head1" runat="server">
  5.     <style type="text/css">
  6.         .staticMenuItem
  7.         {
  8.             color:White;
  9.  
  10.             border:solid 1px black;
  11.             padding:2px 4px;
  12.         }
  13.         .menuHover
  14.         {
  15.             color:#ffcc00;
  16.             background-color:blue;
  17.         }
  18.         .dmenuHover
  19.         {
  20.             color:blue;
  21.             background-color:#ff9900;
  22.         }
  23.         .dynamicMenuItem
  24.         {
  25.             color:black;
  26.             background-color:#FF6600;
  27.             padding:2px 4px;       
  28.         }
  29.         .dynamicMenu
  30.         {
  31.             background-color: #ffcc00;            
  32.             border:Solid 1px black;
  33.             filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;
  34.         }
  35.     </style>
  36.     <title>Menu Desktop</title>
  37. </head>
  38. <body>
  39.     <form id="form1" runat="server">
  40.     <div>
  41.  
  42.     <asp:Menu
  43.         id="Menu1"
  44.         Orientation="Horizontal"
  45.         StaticMenuItemStyle-CssClass="staticMenuItem"
  46.         StaticHoverStyle-CssClass="menuHover"
  47.         DynamicHoverStyle-CssClass="menuHover"
  48.         DynamicMenuItemStyle-CssClass="dynamicMenuItem"
  49.         DynamicMenuStyle-CssClass="dynamicMenu"
  50.         Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600">
  51.         <Items>
  52.         <asp:MenuItem 
  53.             Text="File"
  54.             Selectable="False" Value="File">
  55.             <asp:MenuItem 
  56.                 Text="Save" Value="Save" />
  57.             <asp:MenuItem 
  58.                 Text="Open" Value="Open" />
  59.         </asp:MenuItem>    
  60.         <asp:MenuItem 
  61.             Text="Format"
  62.             Selectable="False" Value="Format">
  63.             <asp:MenuItem 
  64.                 Text="Bold" Value="Bold" />
  65.             <asp:MenuItem 
  66.                 Text="Italic" Value="Italic" />
  67.             <asp:MenuItem 
  68.                 Text="Underline" Value="Underline" />
  69.             <asp:MenuItem
  70.                 Text="Left Align" Value="Left Align" />
  71.             <asp:MenuItem
  72.                 Text="Center Align" Value="Center Align" />            
  73.             <asp:MenuItem
  74.                 Text="Right Align" Value="Right Align" />                
  75.         </asp:MenuItem>    
  76.         </Items>
  77.         <StaticMenuItemStyle CssClass="staticMenuItem" />
  78.         <DynamicHoverStyle CssClass="menuHover" />
  79.         <DynamicMenuStyle CssClass="dynamicMenu" />
  80.         <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
  81.         <StaticHoverStyle CssClass="menuHover" />
  82.     </asp:Menu>    
  83.  
  84.     </div>
  85.     </form>
  86. </body>
  87. </html>
  88.  
Sep 12 '07 #1
Share this Question
Share on Google+
1 Reply


P: 80
I identified the problem in my code that was preventing the "pop out" menus from having a color change when hovered over, I had both the <asp:Menu> property for the Hovering background color and a CSS version of the same thing active at the same time, apparently, this caused some conflict from within the code. Here are the revisions to my code, I changed the colors around a bit for the hec of it, and I commented out the conflicting code in the CSS section of the code. Here is my revised code:
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head id="Head1" runat="server">
  5.     <style type="text/css">
  6.         .staticMenuItem
  7.         {
  8.             color:White;
  9.  
  10.             border:solid 1px black;
  11.             padding:2px 4px;
  12.         }
  13.         .menuHover
  14.         {
  15.             color:#ffcc00;
  16.             background-color:red;
  17.         }
  18.         .dmenuHover
  19.         {
  20.             color:blue;
  21.             background-color:#ff9900;
  22.         }
  23.         .dynamicMenuItem
  24.         {
  25.             color:black;
  26.             /*background-color:#FF6600;*/
  27.             padding:2px 4px;       
  28.         }
  29.         .dynamicMenu
  30.         {
  31.             /*the background color for the dynamic menus both "popout" and non is covered by the
  32.             DynamicMenuStyle-BackColor="#FF6600" in the <asp:Menu> tag*/
  33.             /*background-color: #ffcc00;*/
  34.             /*background-color: green;*/            
  35.             border:Solid 1px black;
  36.             filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;
  37.         }
  38.     </style>
  39.     <title>Menu Desktop</title>
  40. </head>
  41. <body>
  42.     <form id="form1" runat="server">
  43.     <div>
  44.         &nbsp;<asp:Menu
  45.         id="Menu1"
  46.         Orientation="Horizontal"
  47.         StaticMenuItemStyle-CssClass="staticMenuItem"
  48.         StaticHoverStyle-CssClass="menuHover"
  49.         DynamicHoverStyle-CssClass="menuHover"
  50.         DynamicMenuItemStyle-CssClass="dynamicMenuItem"
  51.         DynamicMenuStyle-CssClass="dynamicMenu"
  52.         Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600">
  53.         <Items>
  54.         <asp:MenuItem 
  55.             Text="File"
  56.             Selectable="False" Value="File">
  57.             <asp:MenuItem 
  58.                 Text="Save" Value="Save" />
  59.             <asp:MenuItem 
  60.                 Text="Open" Value="Open" />
  61.         </asp:MenuItem>    
  62.         <asp:MenuItem 
  63.             Text="Format"
  64.             Selectable="False" Value="Format">
  65.             <asp:MenuItem 
  66.                 Text="Bold" Value="Bold" />
  67.             <asp:MenuItem 
  68.                 Text="Italic" Value="Italic" />
  69.             <asp:MenuItem 
  70.                 Text="Underline" Value="Underline" />
  71.             <asp:MenuItem
  72.                 Text="Left Align" Value="Left Align" />
  73.             <asp:MenuItem
  74.                 Text="Center Align" Value="Center Align" />            
  75.             <asp:MenuItem
  76.                 Text="Right Align" Value="Right Align" />                
  77.         </asp:MenuItem>    
  78.         </Items>
  79.         <StaticMenuItemStyle CssClass="staticMenuItem" />
  80.         <DynamicHoverStyle CssClass="menuHover" />
  81.         <DynamicMenuStyle CssClass="dynamicMenu" />
  82.         <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
  83.         <StaticHoverStyle CssClass="menuHover" />
  84.     </asp:Menu>    
  85.  
  86.     </div>
  87.     </form>
  88. </body>
  89. </html>
  90.  
Also, here is the website where I got the original <asp:Menu> I was playing around with.
Sep 13 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.