Attention: We are retiring the ASP.NET Community Blogs. Learn more >

Change the hover style on the ContextMenu

Today I had a request regarding the ContextMenu. The person wanted to know how to change the text appearance when the user moves their mouse over a menu item. Each MenuItem item is rendered inside a DIV as text, here is the code for emitting a MenuItem:

var s =  "<div class=\"MarkItUp_ContextMenu_MenuItemBar MarkItUp_ContextMenu_MenuItem\" "
    + " onClick=\"javascript: MarkItUp_ContextMenu_HandleItemClick( this, " + delegateFunction + ", '" 
    + this.Menu.LinkArgument + splitChars + this.CommandArgument + "' ) ; "
    + " event.cancelBubble = true ; \""
    + " onMouseOut=\"javascript: MarkItUp_ContextMenu_MenuItemOver(this, 'out') ; "
    + " document.onmousedown = MarkItUp_ContextMenu_HandleDocumentClick ;\" "
    + " onMouseOver=\"javascript: MarkItUp_ContextMenu_MenuItemOver(this, 'over') ; "
    + " document.onmousedown = null;\""
    + ">" + this.DisplayName + "</div>" ;

... as you can see, there is a handler hooked up to the onMouseOver and onMouseOut events of the DIV. That handler is contained in the .js file which comes with the project and contains the following code:

// private member
function MarkItUp_ContextMenu_MenuItemOver( e, dir )
{
    if(dir == "over" )
        e.className = "MarkItUp_ContextMenu_MenuItemBar_Over MarkItUp_ContextMenu_MenuItem_Over" ;
    else
        e.className = "MarkItUp_ContextMenu_MenuItemBar MarkItUp_ContextMenu_MenuItem" ;
}

Therefore, to affect the text on a mouseover, you can simply change the styles in the MarkItUp_ContextMenu_MenuItem_Over class definition.

7 Comments

  • This is not a very good approach. It's easier to add a class name on mousein and remove it on mouseout so you can set the style of the menu in one class (font, color and so on) and then only change what's different when the item is highlighted instead of having to redefine everything else as well (such as font face or size). If you're going to use CSS do it right (it's called Cascading after all).

  • Jerry, I'm going to show my ignorance here but... how is what I've done *different* to what you are suggesting? You wrote:



    &gt; It's easier to add a class name on mousein and remove it on mouseout



    That's exactly what I do! That's what the MarkItUp_ContextMenu_MenuItemOver function does.

  • Darren, your menu item has one set of class names (MarkItUp_ContextMenu_MenuItemBar and MarkItUp_ContextMenu_MenuItem) when it's not highlighted but completely different class names (MarkItUp_ContextMenu_MenuItemBar_Over and MarkItUp_ContextMenu_MenuItem_Over) when it's got the mouse over it.



    My take is to have one (or more) classes in normal state (in your case MarkItUp_ContextMenu_MenuItem) and add another when it's highlighted (so it would have two class names, MarkItUp_ContextMenu_MenuItem and MarkItUp_ContextMenu_MenuItem_Over). And of course your code needs to parse the existing class names and remove/add to it, instead of just replacing it with what it thinks should be there.

  • Here's how to add/remove a class name using a client side script:



    function highlite(elem, active)

    {

    var arrClasses = elem.className.split(&quot; &quot;);



    for( var i = arrClasses.length; i &gt; 0; i-- )

    {

    if( arrClasses[i - 1] == &quot;highlite&quot; )

    {

    break;

    }

    }



    if( i )

    {

    if( active == false )

    {

    delete arrClasses[i - 1];

    elem.className = arrClasses.join(&quot; &quot;);

    }

    }

    else

    {

    if( active != false )

    {

    elem.className += &quot; highlite&quot;;

    }

    }

    }



    You can parametrize the class name to add/remove as well.

  • Sorry Jerry... I just don't get it! Your way seems too complicated for me.

  • Hello! I'm at work browsing your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the outstanding work!

  • Hey there! I'm at work surfing around your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the excellent work!

Comments have been disabled for this content.