problem in menu

KaranGupta
KaranGupta used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try to remove  Selected="true" property and check again

Author

Commented:
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.
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Manoj PatilSr. Software Engineer

Commented:
Hi try using following

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



instead of your code

<StaticSelectedStyle CssClass="staticSelectedStyle" />

Author

Commented:
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

Author

Commented:
Any updates
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
I'm not too familiar with ASP but if you could post the generated HTML it might help...

Author

Commented:
<!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

RobOwner (Aidellio)
Most Valuable Expert 2015

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

Author

Commented:
Hi tagit

Thanks for the response. Still waiting for other experts to respond
Top Expert 2015

Commented:
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>

Author

Commented:
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
Top Expert 2015

Commented:
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.

Author

Commented:
Hi

Please find the handout application attached.

Please rename the to .zip
Border-Less-TB.txt
Top Expert 2015
Commented:
All you really need to get this to do what you want is remove or leave blank the navigation URLs, but that wouldn't be much of a menu then would it?

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal" EnableViewState="True">
        <StaticSelectedStyle BackColor="LightBlue" BorderStyle="Solid" BorderColor="Black"
            BorderWidth="1" />
        <Items>
            <asp:MenuItem NavigateUrl="" Text="Accounts" />
            <asp:MenuItem NavigateUrl="" Text="Messages" />
        </Items>
    </asp:Menu>

Menus need to persist across multiple pages, otherwise what's the point of having a menu. The above would not work on a live website with multiple pages because as soon as you navigate away from Default.aspx, the css class to turn the menu item background light blue is no longer applicable. If you want to use the asp:Menu control, look into a MasterPages scenario and the use of sitemaps to create your menus. Personally, I never found a practical use for the asp:Menu control. It adds a layer of abstraction that makes it difficult, and sometimes impossible, to apply styling. The more modern approach is either using prefabricated plug-in menus like jQuery menus or just create menus from scratch using <ul>s and CSS.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial