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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Formatting issues with the ASP.NET Web Form Menu control

Formatting issues with the ASP.NET Web Form Menu control

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

5 Replies
IB Ilakkiya Baskar Syncfusion Team August 23, 2017 08:59 AM UTC

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   


LH L. Hummel September 5, 2017 12:09 AM UTC

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



PO Prince Oliver Syncfusion Team September 5, 2017 10:12 AM UTC

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 


LH L. Hummel September 5, 2017 12:07 PM UTC

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.


PO Prince Oliver Syncfusion Team September 6, 2017 07:20 AM UTC

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: https://www.syncfusion.com/downloads/support/forum/132237/ze/Menu-1382107122 
  
  
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   


Loader.
Live Chat Icon For mobile
Up arrow icon