Link to home
Start Free TrialLog in
Avatar of KaranGupta
KaranGupta

asked on

problem in menu

Hi

I have a menu control (see code section). When I click on other menu option this is not affected the selected menu item color change

Why it is not happening
Avatar of Ajay Sharma
Ajay Sharma
Flag of India image

Try to remove  Selected="true" property and check again
Avatar of Manoj Patil
Avatar of KaranGupta
KaranGupta

ASKER

Hi ajaysharmaapjs

Even I have removed selected="true" this is nor working.

techChallenger1

I have already checked it. Could you please tell me which section you want me to see to fix this issue.
Hi try using following

<staticselectedstyle backcolor="Blue" borderstyle="Solid" bordercolor="Black" borderwidth="1"/>



instead of your code

<StaticSelectedStyle CssClass="staticSelectedStyle" />
Stll not working.

Please check the code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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></title>
    <style type="text/css">
    .menu
    {
        background-color : Red;
    }
    .staticSelectedStyle
    {
        background-color:Blue;
    }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="NavigationMenu" runat="server" StaticMenuItemStyle-CssClass="menu" EnableViewState="true"
             Orientation="Horizontal">
            <Items>
                <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Accounts" />
                <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Messages" />
            </Items>
            
            <%--<StaticSelectedStyle CssClass="staticSelectedStyle" />--%>
            <StaticSelectedStyle backcolor="Blue" borderstyle="Solid" bordercolor="Black" borderwidth="1"/>


            
        </asp:Menu>
    </div>
    </form>
</body>
</html>

Open in new window

Any updates
I'm not too familiar with ASP but if you could post the generated HTML it might help...
<!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"><title>

</title>
    <style type="text/css">
    .menu
    {
        background-color : Red;
    }
    .staticSelectedStyle
    {
        background-color:Blue;
    }    
    </style>
<style type="text/css">
	.NavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
	.NavigationMenu_1 { text-decoration:none; }
	.NavigationMenu_2 {  }
	.NavigationMenu_3 { border-style:none; }
	.NavigationMenu_4 {  }
	.NavigationMenu_5 {  }
	.NavigationMenu_6 { background-color:Blue;border-color:Black;border-width:1px;border-style:Solid; }

</style></head>
<body>
    <form name="form1" method="post" action="delete.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjcyMDkyMTY0ZGTNek3BlgJ3R0mR0rkcH2JtMsZhyQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



    <div>
        <a href="#NavigationMenu_SkipLink"></a><table id="NavigationMenu" class="NavigationMenu_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun0"><table class="menu NavigationMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="NavigationMenu_1 menu NavigationMenu_3" href="../Default.aspx" style="border-style:none;font-size:1em;">Accounts</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun1"><table class="menu NavigationMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="NavigationMenu_1 menu NavigationMenu_3" href="../Default.aspx" style="border-style:none;font-size:1em;">Messages</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="NavigationMenu_SkipLink"></a>
    </div>
    

<script type="text/javascript">
//<![CDATA[
var NavigationMenu_Data = new Object();
NavigationMenu_Data.disappearAfter = 500;
NavigationMenu_Data.horizontalOffset = 0;
NavigationMenu_Data.verticalOffset = 0;
//]]>
</script>
</form>
</body>
</html>

Open in new window

as i suspected the page is reloaded with each click so the asp is doing the selection.  sorry i couldnt help
Hi tagit

Thanks for the response. Still waiting for other experts to respond
Apparently, this only works with multi-level menus. Must be something in the client side scripts that are included in the output by asp for asp:Menu controls.

Here's one way to work around it:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" StaticDisplayLevels="2" StaticSubMenuIndent="0" Orientation="Horizontal" EnableViewState="True">            
                <StaticSelectedStyle BackColor="LightBlue" BorderStyle="Solid" BorderColor="Black" BorderWidth="1"/>
                <Items>
                    <asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Accounts" />
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Messages" />
                    </asp:MenuItem>
                </Items>            
            </asp:Menu>
Hi tommyBoy

Still it is not working

<style type="text/css">
        .menu
        {
            background-color: Red;
        }
        .staticSelectedStyle
        {
            background-color: Blue;
        }
    </style>
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" StaticDisplayLevels="2"
        StaticSubMenuIndent="0" Orientation="Horizontal" EnableViewState="True">
        <StaticSelectedStyle BackColor="LightBlue" BorderStyle="Solid" BorderColor="Black"
            BorderWidth="1" />
        <Items>
            <asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Accounts" />
                <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Messages" />
            </asp:MenuItem>
        </Items>
    </asp:Menu>

Open in new window


Am I missing something
Can you explain your situation in a little more detail? Is this menu on a Master Page? Otherwise, how is the menu recreated when you navigate away from the page that this menu is on. If you have another copy of the menu on Default.aspx, then it's not going to work. There may be a better way to approach the whole menu requirement.
Hi

Please find the handout application attached.

Please rename the to .zip
Border-Less-TB.txt
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial