Sidebar Menu - Show Photo

[jarrad]

@jarrad

get the Plug Bubble Plugin
Add a When Page Load Action - Custom Code Block
For each option in your SlideBarMenu you will need 1 block so here is the block and the example:

The Block:
var pb = $( “div.slideable-option:contains(‘THE-MENU-OPTION-TITLE’)” ); $(pb).prepend(‘<img align=“left” float=“absolute” src=“YOUR-IMAGE-URL” width=“100%” height=“100%” />’);

The Example:
(I have 4 menu options named, Option 1, Option 2, Option 3, Option 4 & my image url is https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png):

The Finished Block Would Be:
var pb1 = $( “div.slideable-option:contains(‘Option 1’)” ); $(pb1).prepend(‘<img align=“left” float=“absolute” src=“https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png” width=“100%” height=“100%” />’);

var pb2 = $( “div.slideable-option:contains(‘Option 2’)” ); $(pb2).prepend(‘<img align=“left” float=“absolute” src=“https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png” width=“100%” height=“100%” />’);

var pb3 = $( “div.slideable-option:contains(‘Option 3’)” ); $(pb3).prepend(‘<img align=“left” float=“absolute” src=“https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png” width=“100%” height=“100%” />’);

var pb4 = $( “div.slideable-option:contains(‘Option 4’)” ); $(pb4).prepend(‘<img align=“left” float=“absolute” src=“https://s3.amazonaws.com/appforest_uf/f1504722854619x869909093482419800/iconwhite.png” width=“100%” height=“100%” />’);

Just make sure you copy them without the gaps to avoid issues, we did this for clarity.

above is the procedure, and you will see once you have a “when page is loaded” event and go to add the action that under the plugin section there is a “custom code block” option. Place your code in the first property.