Sidebar Menu - Show Photo

yaron.regev · September 3, 2017, 3:21am

Does anyone know if there is a way to present a photo in the side bar menu ?

gf_wolfer · September 5, 2017, 11:45pm

It doesn’t look like a photo works for the Slidable Menu plugin. But Icons will work

example of both attempted here

Geoff | Wolfer Tech
Check out
The Best Selling Bubble Template
The Most Used Bubble Template (FREE)

gf_wolfer · September 5, 2017, 11:47pm

If you really want to add a photo and have full flexibility on the design and are willing to put in some time, you can make your own side menu using Groups, Text, Links, images etc.

yaron.regev · September 6, 2017, 6:23am

Thanks !
It works… just it takes now ages for the Sidebar menu to present the content …

AlonsoC · September 6, 2017, 2:44pm

yep, a Floating Group works for this. I´m currently using it for an app I´m building to show search filtering options that don´t fit the mobile screen

jarrad · September 6, 2017, 8:21pm

I put the code together if your keen to try it out

yaron.regev · September 8, 2017, 11:46pm

Thanks Jarrad.
Where should I put this piece of code in ?
I added the Bubble plug in but cant find how to use it.

jarrad · September 8, 2017, 11:58pm

He just said add this code!

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.

yaron.regev · September 9, 2017, 12:38am

Thanks. Found the place to paste the code… however, how this custome event is linked to the SideBar menu ? do I have to pust somthing in the Sidebar menu area as well ?

jarrad · September 9, 2017, 12:45am

All you do is add your menu options first. then change: Option 1
to be what that menu items name is. so if you went and made a menu with 2 options and the labels were Account and the other was aBc123 then your two blocks (1 block per menu option remember) would be -

var pb1 = $( “div.slideable-option:contains(‘Account’)” ); $(pb1).prepend(’<img align=“left” float=“absolute” src=“YOUR-URL-HERE” width=“100%” height=“100%” />’);

var pb2 = $( “div.slideable-option:contains(‘aBc123’)” ); $(pb2).prepend(’<img align=“left” float=“absolute” src=“YOUR-URL-HERE” width=“100%” height=“100%” />’);