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
close icon

Add pictures and footer

Hello,

is there a possibility in ej-menu add something like footer where user can not click with mouse (or nothing happening on click)? And also in that footer between text add some picture?

Also is there a possibility to add picture from WebAPI into menu when picture must be in left side of menu and nodes in right side of menu?

For example:
Menu
-- SubMenu1
-- SubMenu2
---- SubSubMenu1
---- SubSubMenu2
-- SubMenu3
-- Footer (SomeText Picture SomeText)

All in all something like this:





4 Replies

KR Keerthana Rajendran Syncfusion Team July 10, 2017 01:01 PM UTC

Hi Agne, 
 
Thank you for contacting Syncfusion support 
 
Query : is there a possibility in ej-menu add something like footer where user cannot click with mouse (or nothing happening on click)? And also in that footer between text add some picture? 
 
Currently we don’t have  footer option in menu. But we can customize its UI in create event of menu by appending the footer as li  to ul of sub menu items 
 
Query: Also is there a possibility to add picture from WebAPI into menu when picture must be in left side of menu and nodes in right side of menu? 
 
To add image for each menu item we have imageUrl property and spriteCssClass property in menu. We can add image to menu as shown in the attached image by using the below code. 
 
OnCreate(event) 
            { 
                        $(".e-menu ul").append("<li class='e-list'><a class='e-menulink'><img src='src/content/images/dark-arrow2.png'>Text</a></li>") 
                        $(".e-menu ul:first").prepend("<div class='e-image'><img src='src/content/images/chart/grain.png'></div>") 
                        $(".e-menu ul:first").addClass("e-first"); 
            } 
<style> 
.e-image 
{ 
    float:left; 
    margin: 10px; 
} 
.e-first 
{ 
  width: 300px; 
} 
</style> 
 
We have attached sample for reference. Please download sample from below link 
 
 
If we have misunderstood your requirement please get back to us with some additional details on your requirement like video or any online link to showcase the requirement 
 
Regards, 
Keerthana. 



AG Agne July 11, 2017 09:16 AM UTC

Hello,

thank you, it was very helpful. But I have one more question - is there a possibility to add picture not on top all lines, but have one big picture in left menu side and all nodes in right menu side?

Like this:

BIG PICTURE            | Node1

SAME BIG PIC          | Node2

SAME BIG PIC          | Node3

SomeTextNotPictureAnyMore


Something like this  instead of this  



AG Agne July 11, 2017 02:21 PM UTC

Hello again,

one more question - how to disable clicking on specific line (added like in example in OnCreate method)? I tried to do it with disableItemByID(itemId) method, but for me it is not working.



KR Keerthana Rajendran Syncfusion Team July 12, 2017 01:01 PM UTC

Hi Agne, 
Query : thank you, it was very helpful. But I have one more question - is there a possibility to add picture not on top all lines, but have one big picture in left menu side and all nodes in right menu side? 
Like this: 
BIG PICTURE            | Node1 
SAME BIG PIC          | Node2 
SAME BIG PIC          | Node3 
As we mentioned in our previous update we have added picture in left side and menu item on right side through create event and aligned using css. Please refer the below link for video 
 
 
 
Query: one more question - how to disable clicking on specific line (added like in example in OnCreate method)? I tried to do it with disableItemByID(itemId) method, but for me it is not working 
 
We have added id for li item which is added as footer and disabled the footer by using its id. Please refer the below code 
 
OnCreate(event) 
            { 
                        $(".e-menu ul").append("<li class='e-list e-footer' id='footer'><a class='e-menulink'><img src='src/content/images/dark-                     arrow2.png'>Text</a></li>") 
                        $(".e-menu ul:first").prepend("<div class='e-image'><img src='src/content/images/chart/grain.png'></div>") 
                        $(".e-menu ul:first").addClass("e-first"); 
                         var menuObj = $("#menu").data("ejMenu"); 
                         menuObj.disableItemByID("footer"); 
            } 
 
Regards, 
Keerthana. 


Loader.
Live Chat Icon For mobile
Up arrow icon