.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

Hover and Selected Styles for Menu

Posted By:      Posted Date: September 18, 2010    Points: 0   Category :ASP.Net
I am using the following code to create a static menu, but using images instead of text..   <asp:Menu ID="Menu1" runat="server"> <Items> <asp:menuitem navigateurl="default.aspx" text="" imageurl="Images\nav_Home.gif" popoutimageurl="Images\nav_Home_selected.gif" tooltip="Home"> </asp:menuitem> Can anyone tell me if it's possible and how to perform an image swap on hover and also an image swap on click so that it is clear which menu item has been selected? Many thanks. 

View Complete Post

More Related Resource Links

How to keep the hover for Parent menu and set the selected menu item css for child menu item?



I'm using cssfriendly control adapter for menu. My asp.net menu control's datasource is a sitemap file I'm using which contains all the urls.

I have the following questions:

  1. Is there a way to keep the parent menu item hovered while hovering over the respective child menu items?
  2. Is there a way to keep the child menu item selected? I am able to set the css for the parent menu, however I was wondering if the same is possible with the child items.

Please help! Smile


Moneka Smile

Modify Menu adapter to show selected


Hey, I need some help modifying the menu adapter code to give child <ul> elements a class value indicating that the parent is selected. It should render like this:


< ul class="AspNet-Menu">
	< li class="AspNet-Menu-WithChildren  AspNet-Menu-ChildSelected">
		< a href="/rockit/admin/Default.aspx" class="AspNet-Menu-Link  AspNet-Menu-ChildSelected">
		< span>Mypage< /span>< /a>
			< ul class="AspNet-Sub AspNet-Sub-Selected">
				< li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
					< a href="/rockit/admin/Default2.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected">
					< span>Test< /span>< /a>
				< /li>
				< li class="AspNet-Menu-Leaf">
					< a href="/rockit/Default3.aspx" class="AspN

.AspNet-Menu-Selected Problems


I am trying to have the selected item in the menu be noticeable different than the other items.  I am able to change the border as in the samples, but nothing else. I would like the selected font color to change as well as the background image / color.  Here is a sample page and style sheet.  Any help is greatly appreciated.

<!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>Untitled Page</title>
    <link href="MainStyle.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                    <!-- Indention Pushes First Link Over -->

ASP.NET 4.0 Menu Top Level selected item style


I want to apply a css class to the level 1 menu item (parent) when it or any or it's children are selected.

I've looked at MSDN documentation and any number of examples and walkthroughs but I haven't come up with a way of managing this. I was thinking something like this might work but the style is not being applied to the parent. To further complicate matters, if I try to apply a css style to StaticSelectedStyle it doesn't pick it up at all.

Menu Markup:

<StaticSelectedStyle  Font-Bold="True" ForeColor="#3333CC" />

Code Behind:

        protected void MenuItemClick_NavMenu(Object sender, MenuEventArgs e)


            MenuItem parentItem = e.Item.Parent;

            if (parentItem != null)


                parentItem.Selected = true;



Conditional styles for selected Html.ActionLink


Hi, I am trying to add an item selected class to an Html.ActionLink, I am very new to MVC so its all a bit confusing.

So far i have each of my ActionLinks lookins like this

<li><%: Html.ActionLink("Home", "Index", "Home", new { @class = ViewData["current"] == "Home" ? "selected" : "" })%></li>

And in the controller i have

public ActionResult Index() {
            ViewData.Add("current", "Home");
            return View();

Can any one tell where i am going wrong because the links now fail to respond, basically it isn't checking the condition == Home and if it is then its failing because it doesn't get to the controller.

Any ideas would be appreciated


asp:Menu submenu hover/expansion + HTTPS = Security Information Popup

Hello,I have a an asp:Menu with a datasource and the page is being accessed by https. If I hover over one of the menu items that has a subitem I get this popup.Here is my code,//asp <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="UI_Common_Test" %> <!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> </head> <body> <form id="form1" runat="server"> <div> <asp:Menu ID="Menu1" runat="server" DataSourceID="dsSiteMap" Orientation="Vertical" StaticDisplayLevels="2"> <DataBindings> <asp:MenuItemBinding DataMember="SiteMapNode" TextField="Title" /> </DataBindings> </asp:Menu> <asp:SiteMapDataSource ID="dsSiteMap" runat="server" SiteMapProvider="Public" /> </div> </form> </body> </html> //cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI;

Want a menu with two levels, but I don't want the dropdowns that appear on hover

I am using the CSSFriendly adapters with the menu.  I have a menu control in my master page, and a site map that includes all the pages in the web site.  For the second level on the menu, I have a separate menu control, and I add the items programmatically.When I select an item on the second line, the parent on the top line is also highlighted in the same way.  This is the intent, and uses the .AspNet-Menu-ChildSelected style from the adapter.My problem is that when I hover over the top line, the leaf items cover up the lower line, and I don't like how it looks.  I would prefer to have no fly-outs, if that is what they are called.  So I changed MaximumDynamicDisplayLevels to 0, and these go away.  But then .AspNet-Menu-ChildSelected no longer works, and the parent item is no longer styled.  Everything works except that the parent item is not highlighted.I'm hoping to find a simple solution.

Menu selected item formatting problem in mozilla

Hello, I have a problem with menu slected item. when i click on menu item it shold display in different color for that i hv wrote below code in my master page cs file. on page load.  string thispage = this.Page.AppRelativeVirtualPath; int slashpos = thispage.LastIndexOf('/');string pagename = thispage.Substring(slashpos + 1); string pagename = thispage.Substring(slashpos + 1); foreach (MenuItem mi in Menu7.Items) { if (mi.NavigateUrl.Contains(pagename)) mi.Selected = true; break; } this works fine in IE but when i run in firefox my page formatting disturbs means the content page not coming in a proper place. thanx in advance. do the needfull.         

Highlighting Menu during sub-menu hover


I can highlight a menu-itm when the mouse is hovering over it.  How do I highlight a menu item when a sub-menu item is hovered?  I have a 4 level menu, 2 static accross the top, one drop-down, and one pop-out from the drop-downs.

While selecting level-4 items, it is a little confusing as to which level-3 item is being popped-out because I have alot of level 3 and level 4 items.  I want the appropriate level 3 item highlighted while hovering over its level 4 popout.

Menu Control: Swap Image on Hover Over


hi, im working on a menu control with a horizontal orientation and 4 gifs for the individual menu items that are separated by about 10px. what im trying to do is to swap these images out on a mouse hover over. i know the menu control doesn't support an image-swap-on-hover functionality, so im looking for a work around. someone over at the stackoverflow website suggested i try this, but it didn't work for me.

<asp:Menu ID="menu" runat="server" Orientation="Horizontal" StaticMenuItemStyle-CssClass="staticMenu" StaticHoverStyle-CssClass="hoverMenu">
<asp:MenuItem NavigateUrl="~/benefits.aspx" />

How to Context Menu when i right click on Gridview selected Row using Jquery



I have a requirement that

When i select a row in Gridview,it will High light the row and when Right click on selected

Row,It will open Context Menu.

In that menu i want to do Add new row delete row etc.

Help me in that.


Rama krishna.

Some End-Users are not seeing the OCS context menu when they hover over the precense orb.


I am running MOSS with several hundred users.  Most users are able to see and use the Office Communicator integration for SharePoint without issue.  A few of the end-users see the precense orb, but do not see the context menu that comes up when hovering the mouse over the orb.  All users are using Internet Explorer 8 and all sites have been added to the trusted sites.

Question:  Why aren't all users seeing the context menu for the Office Communicator orb?  What are the steps to resolve the issue?

ASP.NET Menu with jQuery Superfish

Choosing the right type of menu for a website is not easy at all. The ASP.NET Menu Control is definitely NOT a good starting point due to the horrendous markup it renders, nor is it good for SEO because of the Markup/Content ratio, neither can it be easily styled.

Dropdown list in ASP.NET - How to get value selected

am sure this must be very simple, but unforunately I can't figure it out.
I have the following code which populates the dropdown lists from the database. This works fine. Now, when the user selects a particular employee name from the list, I want to get the Employee Id of the selected employee. i.e. I need to get the "Eid" value. I can do this if the EId is loaded in the dropdown list, but in this case only the employee name is displayed. Please let me know howI can get the Eid value even though it is not loaded in the dropdown list.
I would really appreciate your help

Gridview that exports selected rows to Excel

his seems like a messy workaround, but I ended up using two Gridviews - one to display my data and show my checkboxes, and the other which was invisible amd would eventually end up as my Excel spreadsheet.

How to let user edit selected gridview columns, not entire row



I've got a gridview I would like to let the user edit a couple of columns.  Seems like everything I'm coming across so far makes the entire row editable.  

Hopefully the solution isn't too complicated.  Can someone point me in the right direction?


Row command working on all rows not selected one?



I have this code that hides a column in a gridview.  (The column houses another nested gridview).

    Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
        If e.CommandName = "Select" Then
            If GridView1.Columns(0).Visible = False Then
                GridView1.Columns(0).Visible = True
                GridView1.Columns(0).Visible = False
            End If
        End If
    End Sub

The trouble is that if I click the select link on one row that action to hide is carried out on all rows.  How can I set this up so that it only hides the row that is selected?


ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend