Page 1 of 1

SVG drop down menu

Posted: Mon Nov 11, 2013 8:37 pm
by Boothy
Hi all

Produced a side scrolling svg based control panel + drop down room menu with svg borders and changeable room descriptions. See attached file below. Hopki thanks for the input regarding enabling backgrounds in flash.

Regards

Boothy
svg_drop1.jpg
svg_drop1.jpg (49 KiB) Viewed 26230 times
svg_text drop menus.zip
(337.43 KiB) Downloaded 1051 times

Re: SVG drop down menu

Posted: Wed Nov 13, 2013 10:08 am
by Boothy
Slight variation to the above with automatic closing of room menu after individual rooms have been selected, attachment below. Seems to work OK, any comments welcome

Boothy
svg_text_drop_menu_2.zip
(337.47 KiB) Downloaded 902 times

Re: SVG drop down menu

Posted: Fri Nov 15, 2013 7:00 pm
by George Palov
hi Boothy,
I downloaded the second skin and opened the example. Looks great, maybe on mobile devices even better. I saw one thing, which I have also experienced. On mouse over on the room menu once opened, you've got the hand cursor only on boundaries, not on text, where you've got the regular pointer. I also had this "problem" and couldn't figure it out, as hand cursor was selected for the text itself. Maybe this is a bug?
Thanks again, George

Re: SVG drop down menu

Posted: Fri Nov 15, 2013 7:46 pm
by Boothy
Hi George

I did notice the issue in Flash output but appeared fine in html5. Not sure what the solution is, I may contact Martin for his take on thints. The closing of menus are not quite as elegant in Flash.
Thanks

Boothy

Re: SVG drop down menu

Posted: Tue Nov 19, 2013 9:09 pm
by Hopki
Hi Guys
In Flash the hand cursor does not work. The simplest thing to do is swap the order of things.

Add the text box first then the rectangle as a child of it. Set the rectangle's background to visible but set the alpha to 0.
Select hand cursor and away you go as with the background set to alpha 0 you will see the text through it.
Regards,
Hopki

Re: SVG drop down menu

Posted: Tue Nov 19, 2013 9:25 pm
by Boothy
Thanks Hopki

I will give it a try

Boothy

Re: SVG drop down menu

Posted: Fri Nov 22, 2013 5:59 pm
by Boothy
Hi Hopki

The above sample is a svg rollover not a rectangle, this appears a little more complex with a `rollover image` tried your solution but does not work in this context (good chance I may have done something wrong!). The only way I can think is to have 2 buttons \ svg images which would have to be hidden\shown when mouse is over. Any simpler ideas much appreciated. I will experiment some more

Thanks

Boothy

Re: SVG drop down menu

Posted: Fri Nov 22, 2013 9:50 pm
by Hopki
Hi Boothy
The problem was no hand cursor with text box in Flash.
The solution was to put a rectangle over the text box.
Please see attached project.
Regards,
Hopki

Re: SVG drop down menu

Posted: Fri Nov 22, 2013 11:40 pm
by Boothy
Thanks for this Hopki

I understand your example and the concept but still cannot grasp how this principle works with a rollover svg or button with a hover\over state ? I understand covering the text with a rectangle but not how to reveal both text and rollover via alpha channel in output unless I constuct multiple buttons to simulate rollover via hide\show actions. I have tried with your attached example but still cannot get the hover state and the rollover button to work at the same time in flash ( I am using 4.5beta 1 at present ).

Thanks again

boothy

Re: SVG drop down menu

Posted: Sun Nov 24, 2013 12:15 am
by Hopki
Hi Boothy,
In this case you need to do the same thing but with your SVG rather than with the rectangle.
However you need to wrap the SVG and Text boxes in a container to get the order of elements correct.
Please see attached project.
Regards,
Hopki

Re: SVG drop down menu

Posted: Sun Nov 24, 2013 5:01 pm
by Boothy
Thanks Hopki

This works great, slightly changing the brief I am now trying to produce similar menu with solid colours either svg or a rollover button, the above works because the svg is transparent and therefore you see text through, obviously does not work with `solid`svg. Can the same be done with a solid button ? Please see attached.

By the way please ignore when I become a nuisance !

Many Thanks

Boothy

Re: SVG drop down menu

Posted: Sun Nov 24, 2013 9:09 pm
by Hopki
Hi Boothy,
If your making the graphics then just make them with a transparent centre. :wink:
Regards,
Hopki

Re: SVG drop down menu

Posted: Sun Nov 24, 2013 9:15 pm
by Boothy
Hi Hopki

Not sure if I understand this, I would like to make solid blocks of colour for buttons if possible

Thanks

Boothy

Re: SVG drop down menu

Posted: Sun Feb 02, 2014 11:11 am
by hilbrands
Hi Hopki
Thanks a lot for the drop down menu, which I happily used for a friends summerhouse in Spain.
http://hilbrands.dk/photo/html_casa_cadiz_10/
It work flawless in windows browsers so far and Chrome, Firefox and Opera are doing a good job i Android.
I have however a little problem running the virtual tour on a iPad. The menu does not always recover to full horizontally size
after et has been pressed.
Any suggestions?
Kind regards
Geert Hilbrands