Separate icons for each parent id in menu

[Carlos Palomino]

Dear,

How I can add separate icons for each parent id in menu?

Greetings.

[Keerthana Rajendran]

Hi Carlos, 

We have prepared a sample in MVC to add icons for parent id in menu. Please refer the below given link 

Sample link: http://www.syncfusion.com/downloads/support/forum/124623/ze/Menu1109728024.zip 

1.Add sprite class to parent menu  

<code> 

menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" }); 

</code> 

2.Inside <style>tag add background image and position for each sprite class added 

<code> 

  [class^="flag-"], 

    [class*="flag-"] { 

        background-image: url("../Content/images/Menu/flags.png"); 

        height: 14px; 

        left: 2px; 

        top: 4px; 

        width: 24px; 

         

    } 

   

.flag-in { 

        background-position: -125px -30px; 

    } 

</code> 

UG Link for menu: http://help.syncfusion.com/aspnetmvc/menu/icons-and-navigation 

Regards, 

Keerthana. 

 

[Carlos Palomino]

Hello such.

How do I add an image individually to each parent?

Greetings.

[Keerthana Rajendran]

Hi Carlos,   

 You can add an image individually by using SpriteCssClass   

   

1.Add sprite class to each parent element   

   

<code>   

   

menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" });   

</code>   

   

  

   

2.Define separate css for each sprite class in order to position the icon correctly   

   

<style>   

  .flag-in {   

        background-image: url("../Content/images/Menu/en_IN_flag.png");   

        background-position: -126px -30px;   

        height:13px;   

        width:18px;   

    }   

</style>   

  

   

We have prepared a sample in which we have used a single image for each parent and applied css individually for each icon. Please refer the below given link.   

   

Sample Link: http://www.syncfusion.com/downloads/support/forum/124623/ze/Menuicon421024851.zip   

  

Please let us know if any concern.   

   

Regards,   

Keerthana.   

 

[Carlos Palomino]

Thanks for the answers.

But what I want is to add a different alongside the name of each parent id image, but that is dynamic and not declare each value of sprite:

 Controller:

 public ActionResult MenuFeatures()

        {

            menu.Add(new MenuJson { pid = 1, mtext = "India", parent = null, sprite = "flag-in" });

            menu.Add(new MenuJson { pid = 2, mtext = "Canada", parent = null, sprite = "flag-cn" });

            menu.Add(new MenuJson { pid = 3, mtext = "US", parent = null, sprite = "flag-us" });

            menu.Add(new MenuJson { pid = 4, mtext = "Argentina", parent = null, sprite = "flag-ag" });

            menu.Add(new MenuJson { pid = 5, mtext = "Belgium", parent = null, sprite = "flag-bg" });

View:

.e-menu li > ul > li > a {

        padding: 3px 24px 3px 35px;

    }

    .flag-cn{

         background-image: url("../Content/images/Menu/flag_icon_small.gif");

          background-position: -131px -18px;

          height:18px;

          width:25px;

    }

    

    .flag-in {

         background-image: url("../Content/images/Menu/en_IN_flag.png");

        background-position: -126px -30px;

         height:13px;

          width:18px;

    }

Greetings.

[Keerthana Rajendran]

Hi Carlos, 

We have prepared a sample in which we added icons to parent menu dynamically on button click. When button is clicked icons will be added to corresponding menu item. We have prepared a sample based on our understanding of your requirement. Please refer the below given sample link. 

Sample: http://www.syncfusion.com/downloads/support/forum/124623/ze/Samplemenu-1046694768.zip 

Note: You can add icons to parent menu dynamically by appending the span class to the corresponding parent menu. If this doesn’t meet your requirement ,please revert with clear scenario of your requirement  

 

Regards, 

Keerthana. 

 

[Carlos Palomino]

Dear,

What I want is to generate a dynamic menu, but the image of each parent should not be declared as the example:

  #menujson {

         margin-left: 50px;

     }

     .e-menu li> ul> li> a {

         padding: 3px 3px 24px 35px;

     }

     {.flag-cn

          background-image: url ("../ Content / images / Menu / flag_icon_small.gif");

           background-position: -18px -131px;

           height: 18px;

           width: 25px;

     }

    

    .flag-in {

          background-image: url ("../ Content / images / Menu / en_IN_flag.png");

         background-position: -30px -126px;

          height: 13px;

           width: 18px;

     }

Greetings.

[Keerthana Rajendran]

Hi Carlos,   

Thanks for the update.   

 Yes, we can add the any image to menu items while sending the data list to menu component by using imageUrl property. With the help of this property, you don’t need to pre-define/declare any CSS classes earlier; by passing the image URL to dataSource property with proper field mapping.    

    

<code>   

  

  menu.Add(new MenuItem { id = 1, mtext = "India", parent = null,    

                 imageURL = "../Content/images/Menu/en_IN_flag.png" });   

</code>   

    

We have prepared a sample based on this. Please refer the below given sample link:   

http://www.syncfusion.com/downloads/support/forum/124623/ze/sample1090569492.zip  

  

If we misunderstood your requirement, please provide us a sample about your scenario henceforth we could give you appropriate solution ASAP.   

  

Please let us know if any concerns.    

  

Regards,   

Keerthana.   

 

[Carlos Palomino]

Thank you very much for the answers.

[Keerthana Rajendran]

Hi Carlos, 

  

Thank you for your update. Please get back to us if you have further queries we will be happy to assit you 

  

Regards, 

Keerthana.