asp:Menu different images for every menu static item when hover on it
原问题：
asp:Menu different images for every menu static item when hover on it
hello all,
原问题：
asp:Menu different images for every menu static item when hover on it
hello all,
I'm trying to make an asp.net menu control,
but the problem is that ..when hovering on an item i want a different image for every item ..
i guess <StaticHoverStyle> just gives me the chance to put 1 image.
is there away i can do that ?
thx all.
解答如下：
As we know, the menu will render likes this HTML code,
<div>
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/JQuery/WebResource.axd?d=aw2yVq1OE0PQ6AvYNSzeiQ2&t=633748109086475139" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="../StaticMenuItemCollection_cs.aspx">Book 0</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="../StaticMenuItemCollection_cs.aspx">Book 1</a></td><td style="width:0;"><img src="/JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139" alt="Expand Book 1" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div id="Menu1n1Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Chapter 0</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Chapter 1</a></td><td style="width:0;"><img src="/JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139" alt="Expand Chapter 1" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n1ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n1ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139" alt="Scroll down" />
</div>
</div><div id="Menu1n3Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Page 1</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n3ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n3ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139" alt="Scroll down" />
</div>
</div><a id="Menu1_SkipLink"></a>
</div>
As we have seen, the menu will auto generate like these IDs as follwoing,
ID = Menu1n0
ID = Menu1n1
ID = Menu1n1Items
ID = Menu1n2Items
So we can use the following CSS for these IDs, and you just need to use "background-image" to instead of "background-color",
#Menu1n1
{
background-color: Aqua;
}
#Menu1n2
{
background-color: Lime;
}
#Menu1n3
{
background-color: Purple;
}
#Menu1n4
{
background-color: ButtonShadow;
}
#Menu1n1Items
{
background-color: Gray;
}
#Menu1n2Items
{
background-color: Green;
}
#Menu1n3Items
{
background-color: Red;
}
#Menu1n4Items
{
background-color: Blue;
}
and here is a demo code for your reference,
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#Menu1n0
{
background-color: Gray;
}
#Menu1n1
{
background-color: Aqua;
}
#Menu1n2
{
background-color: Lime;
}
#Menu1n3
{
background-color: Purple;
}
#Menu1n4
{
background-color: ButtonShadow;
}
#Menu1n1Items
{
background-color: Gray;
}
#Menu1n2Items
{
background-color: Green;
}
#Menu1n3Items
{
background-color: Red;
}
#Menu1n4Items
{
background-color: Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"
Font-Names="Verdana" ForeColor="#990000" StaticSubMenuIndent="10px">
<Items>
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Book 0" Value="Book 0" />
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Book 1" Value="Book 1">
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Chapter 0" Value="Chapter 0" />
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Chapter 1" Value="Chapter 1">
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Page 1" Value="Page 1" />
</asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticSelectedStyle BackColor="#FFCC66" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
<StaticHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
</asp:Menu>
</div>
</form>
</body>
</html>
<div>
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/JQuery/WebResource.axd?d=aw2yVq1OE0PQ6AvYNSzeiQ2&t=633748109086475139" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="../StaticMenuItemCollection_cs.aspx">Book 0</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="../StaticMenuItemCollection_cs.aspx">Book 1</a></td><td style="width:0;"><img src="/JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139" alt="Expand Book 1" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div id="Menu1n1Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Chapter 0</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Chapter 1</a></td><td style="width:0;"><img src="/JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139" alt="Expand Chapter 1" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n1ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n1ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139" alt="Scroll down" />
</div>
</div><div id="Menu1n3Items" class="Menu1_0 Menu1_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="../StaticMenuItemCollection_cs.aspx">Page 1</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_6 Menu1_0" id="Menu1n3ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139" alt="Scroll up" />
</div><div class="Menu1_6 Menu1_0" id="Menu1n3ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139" alt="Scroll down" />
</div>
</div><a id="Menu1_SkipLink"></a>
</div>
As we have seen, the menu will auto generate like these IDs as follwoing,
ID = Menu1n0
ID = Menu1n1
ID = Menu1n1Items
ID = Menu1n2Items
So we can use the following CSS for these IDs, and you just need to use "background-image" to instead of "background-color",
#Menu1n1
{
background-color: Aqua;
}
#Menu1n2
{
background-color: Lime;
}
#Menu1n3
{
background-color: Purple;
}
#Menu1n4
{
background-color: ButtonShadow;
}
#Menu1n1Items
{
background-color: Gray;
}
#Menu1n2Items
{
background-color: Green;
}
#Menu1n3Items
{
background-color: Red;
}
#Menu1n4Items
{
background-color: Blue;
}
and here is a demo code for your reference,
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#Menu1n0
{
background-color: Gray;
}
#Menu1n1
{
background-color: Aqua;
}
#Menu1n2
{
background-color: Lime;
}
#Menu1n3
{
background-color: Purple;
}
#Menu1n4
{
background-color: ButtonShadow;
}
#Menu1n1Items
{
background-color: Gray;
}
#Menu1n2Items
{
background-color: Green;
}
#Menu1n3Items
{
background-color: Red;
}
#Menu1n4Items
{
background-color: Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"
Font-Names="Verdana" ForeColor="#990000" StaticSubMenuIndent="10px">
<Items>
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Book 0" Value="Book 0" />
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Book 1" Value="Book 1">
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Chapter 0" Value="Chapter 0" />
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Chapter 1" Value="Chapter 1">
<asp:MenuItem NavigateUrl="~/StaticMenuItemCollection_cs.aspx" Text="Page 1" Value="Page 1" />
</asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticSelectedStyle BackColor="#FFCC66" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
<StaticHoverStyle BackColor="#990000" Font-Bold="False" ForeColor="White" />
</asp:Menu>
</div>
</form>
</body>
</html>
