Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

Dear All,

I created a Facebook style navigation menu based on this post
facebook style navigation which works perfectly for my needs:

Image

however when i tried to add different icons to the buttons in the menu using CSS i encounter many problems (same icon appear in all buttons, the button itself lost his click able behavior (design wise) and so on..) , can you please help me with some tips on how to make this work?

Many thanks in advance!
Best,
R.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Adding Image to button within facebook style navigation menu

Hi Ram,

Is everything ok when you turn off creating menu?

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

Dear Katya,

hmm, didnt try that, i'm still playing with it trying to find a workaround, ill try that too soon and let you know.

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

Dear Katya,

i had some progress however i need your assistant with one thing, i successfully added an image to the button using CSS:

codeAppery("btnSettings").css('text-align','left');
Appery("btnSettings").css('text-indent','20px');
Appery("btnSettings").css('background','no-repeat url(http://png-2.findicons.com/files/icons/2583/sweetieplus/24/settings.png) 6px 8px');/code

so far so good, however since the above CSS the click effect is gone (the background of the button doesn't change) please have a look at this screen capture VIDEO

Many thanks in advance!
Best,
R.

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

one more thing, i added icons to the rest of the buttons and since none of them execute the "Navigate to page" command as if they are all disabled... its the same with on click event to show an alert... button is locked.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Adding Image to button within facebook style navigation menu

Hello! Could you post your public app link and steps to reproduce?

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

this is my public link:

http://appery.io/app/mobile-frame?src...

the only button that is working is the first one (settings), the "current credit" has the same "Navigate to page" and an alert on click event which doesn't fire...

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

well, the click event is firing once again so thats behind us, however the click pressed effect is still doesnt show though it does the event itself..

http://appery.io/app/mobile-frame?src...

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Adding Image to button within facebook style navigation menu

Hi, if we understand correctly all events work, but there is no push button effect? You would need to add corresponding style classes for button (ui-btn-up, ui-btn-down and ui-btn-hover). In these styles background-images are defined which give such effect. The problem is that you rewrote this property (background-image) in corresponding classes with your own styles. That's why there is no such effect.

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

Adding Image to button within facebook style navigation menu

Thx, I'll fill up the missing CSS parts, again, many thanks!!

Return to “Issues”