We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Formatting issues with the ASP.NET Web Form Menu control

Thread ID:

Created:

Updated:

Platform:

Replies:

132237 Aug 22,2017 07:00 AM Sep 6,2017 03:20 AM ASP.NET Web Forms 5
loading
Tags: Menu
L. Hummel
Asked On August 22, 2017 07:00 AM

Hello,

We have a couple of issues with the Menu control for ASP.NET Web Forms. It regards the formatting of the menu items when they have been clicked, as well as the dropdown menus. The three pictures in the attached .zip file shows the situation. As example we have used Syncfusion's own Menu Sample.

A .css file with the extracted menu selectors has been included in the .zip file. All places where we have made changes, have been marked with /* NB: <description> */

At first, we can describe what we have succeeded sorting out: in Fig. 1, the main menu is shown as it looks before any items have been selected (clicked). A background image has been added to the menu, and a second section to the right has been made with a different background. In the top part of Fig. 2 is the green and yellow callouts showing what has been done until now. The yellow shows how a menu item looks when the mouse hover over it. If the mouse leaves the menu w/o anything being clicked, the menu reverts to the earlier state. So far so good.

Now, first issue, shown in Fig. 2: When an item is being clicked, we want it to look like the bottom part of Fig. 2. Furthermore, we would like the item to stay this way, even when the mouse has left the clicked item. The intention is to give a visual clue at the menu itself about the section in the website where the user is situated at the moment. we have tried everything we could imagine, to no avail; when we click an item, as soon as the mouse leaves it, the item reverts to the "normal" look in Fig. 1.

Second issue, shown in Fig. 3: When hovering over an item with a dropdown menu, it looks unreadable - dark text on a black background. We've tried finding out where these formats are configured within the .css selectors - with no luck. Where do we find that?

We hope there's someone out there who's able to help. Any assistance will be greatly appreciated.

Thanks in advance.

Best regards.


Attachment: Syncfusion_question_3bfcfa7c.zip

Ilakkiya Baskar [Syncfusion]
Replied On August 23, 2017 04:59 AM

Hi Hummel,       
Thank you for contacting Syncfusion Support.     
Query 1:  When an item is being clicked, we want it to look like the bottom part of Fig. 2. Furthermore, we would like the item to stay this way, even when the mouse has left the clicked item. The intention is to give a visual clue at the menu itself about the section in the website where the user is situated at the moment. we have tried everything we could imagine, to no avail; when we click an item, as soon as the mouse leaves it, the item reverts to the "normal"    
Response: We suggest you to use click event to change the background color of the visited menu item for menu control.      
   
    <style type="text/css">   
        .e-menu.e-horizontal .visited>.e-menulink{   
              background-color:red;   
              }   
            
    </style>   
    <body>   
        <script type="text/javascript">   
            function CssChange(args) {                 
                this.element.find("li.e-active").addClass('visited');   
            }   
        </script>   
    </body>   
   
  
Query2:  When hovering over an item with a dropdown menu, it looks unreadable - dark text on a black background.    
Response: We suggest you to use the below css code style tag for changing the color of the text in menu list via cssclass property for menu control.   
<style type="text/css">   
        .WhiteTheme .e-menu.e-horizontal .e-list>ul .e-menulink{   
          color:white;            
        }   
    </style>   
  
For more details, please refer the below link   
We have attached a sample for your reference. Please download a sample from the below link       
Sample:    
  
Regards    
Ilakkiya.B   


L. Hummel
Replied On September 4, 2017 08:09 PM

Hello,

Thank you for your answer - regret the late response. We're not sure how you mean we should use the click event - we have tried using code both on the client and server side, but nothing seems to work. We've also tried the suggestion you have regarding CssChange(args)... - but that event never fires at all.

We hope for clarification. Thanks in advance.

Best regards



Prince Oliver [Syncfusion]
Replied On September 5, 2017 06:12 AM

Hi Lasse, 

Thank you for your update. 

We suggested to set OpenOnClick property to true in Menu control, so that the sub menu item will be displayed only upon on clicking on the Menu item. Now we can use the ClientSideOnClick event to get the clicked item and add a CSS class. Using CSS class, you can alter the background color or gradient to show the visual clue that the item is clicked. Kindly refer to the following code snippet. 

<ej:Menu ID="JobSearch" runat="server" OpenOnClick="true" ClientSideOnClick="CssChange" SubMenuDirection="left" CssClass="WhiteTheme"> 
        <Items> 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  
        </Items> 
    </ej:Menu> 
 
<script type="text/javascript"> 
    function CssChange(args) {               
        this.element.find("li.e-active").addClass('visited'); 
    } 
</script> 
 
<style type="text/css"> 
  .e-menu.e-horizontal .visited>.e-menulink{ 
       background-color:red; 
  } 
</style> 

If you are facing any trouble in implementing the above code in your sample, please provide us code snippet or sample.so that we could help you better.   

Regards, 
Prince 


L. Hummel
Replied On September 5, 2017 08:07 AM

Hi,

Thanks for your answer. I have tried following your model, and used your example as-is; however, the menu doesn't get the red background color at any point - and everything falls back to the default "non-selected" state after click.

Best regards.


Prince Oliver [Syncfusion]
Replied On September 6, 2017 03:20 AM

Hi Lasse,   
  
Thank you for your update.   
  
We have attached a sample with all the assemblies intact in bin folder. Also, we have prepared a video demonstrating a sample at our end. Kindly refer to the following link for the video: http://www.syncfusion.com/downloads/support/forum/132237/ze/Menu-1382107122 
  
Please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/132237/ze/MenuSample-1547215116 
  
If you still face any issue at your end. please provide us an issue reproducible sample or modify the above sample to reproduce the issue. it will help us provide solution.   
  
Regards,   
Prince   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;