Ticket T241438
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

How to inspect CSS rules

Menu - How to customize item and pop-out image during hover action

created 10 years ago

Hello,
I want to create a menu that when hovered the style of text and the pop-out image will change.

Here is the simplified version of the menu

Html.DevExpress().Menu(settings =>
{
    settings.Name = "Menu2";

settings.Orientation = System.Web.UI.WebControls.Orientation.Horizontal;
    settings.ShowPopOutImages = DefaultBoolean.True;

settings.AllowSelectItem = true;
    settings.EnableClientSideAPI = true;
    settings.ClientSideEvents.ItemClick = "function(s, e) {OnSelectingMenuItem1(s, e); }";

/********************************************/
    settings.Images.HorizontalPopOut.Url = "/images/down_bleu.png";
 /********************************************/
    settings.Items.Add(item =>//Ajouter menu
    {
        item.Name = "Reglement";
        item.Text = Xml_Doc_Langue.Instance.Get_Title(xmlDocument1, "Editer");
        item.Items.Add(Xml_Doc_Langue.Instance.Get_Title(xmlDocument1, "Editer01"), "ModifierEncaissement", "");
        item.Items.Add(Xml_Doc_Langue.Instance.Get_Title(xmlDocument1, "Editer02"), "SupprimerEncaissement", "");
        item.Items.Add(Xml_Doc_Langue.Instance.Get_Title(xmlDocument1, "Editer03"), "MemoireReglement", "");

});

and this is a picture to explain you my problem
thanks

Answers approved by DevExpress Support

created 10 years ago (modified 10 years ago)

Hello,

To achieve your goal, assign the CSS class to the MenuSettingsBase.Styles.Item.HoverStyle.CssClass  property and customize the item appearance according to your requirements.
Refer to the K18570: How to inspect CSS rules KB article that should help you apply CSS rules to correct Html elements.

    Comments (3)

      thanks ,
      but it's not Ok :)
      I use the CSS to correct the style of Text but not pop-Out Image

        Hello,

        It is possible to update the image using CSS as well. For instance, refer to the CSS: Change image src on img:hover article for additional details.
        See the code below:

        CSS
        .SomeClass img { background: url('http://imgur.com/SZ8Cm.jpg'); width: 5px; height: 5px; }
        C#
        settings.Styles.Item.HoverStyle.CssClass = "SomeClass";

        Feel free to contact us if you need further clarification on this issue.

          Hi,
          Thanks it's Ok :)

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.