SVG drop down menu

Post Reply
Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

SVG drop down menu

Post by Boothy » Mon Nov 11, 2013 8:37 pm

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 7622 times
svg_text drop menus.zip
(337.43 KiB) Downloaded 498 times

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Wed Nov 13, 2013 10:08 am

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 394 times

User avatar
George Palov
Posts: 58
Joined: Mon Jun 13, 2011 11:18 pm
Location: Sofia, Bulgaria
Contact:

Re: SVG drop down menu

Post by George Palov » Fri Nov 15, 2013 7:00 pm

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

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Fri Nov 15, 2013 7:46 pm

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

User avatar
Hopki
Gnome
Posts: 9653
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: SVG drop down menu

Post by Hopki » Tue Nov 19, 2013 9:09 pm

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

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Tue Nov 19, 2013 9:25 pm

Thanks Hopki

I will give it a try

Boothy

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Fri Nov 22, 2013 5:59 pm

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

User avatar
Hopki
Gnome
Posts: 9653
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: SVG drop down menu

Post by Hopki » Fri Nov 22, 2013 9:50 pm

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
Attachments
text.zip
(138.56 KiB) Downloaded 227 times

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Fri Nov 22, 2013 11:40 pm

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

User avatar
Hopki
Gnome
Posts: 9653
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: SVG drop down menu

Post by Hopki » Sun Nov 24, 2013 12:15 am

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
Attachments
svg_text_drop_menus.zip
(361.21 KiB) Downloaded 341 times

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Sun Nov 24, 2013 5:01 pm

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
Attachments
dropmenu_blue.zip
(141.84 KiB) Downloaded 316 times

User avatar
Hopki
Gnome
Posts: 9653
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: SVG drop down menu

Post by Hopki » Sun Nov 24, 2013 9:09 pm

Hi Boothy,
If your making the graphics then just make them with a transparent centre. :wink:
Regards,
Hopki

Boothy
Posts: 177
Joined: Mon Mar 19, 2012 10:45 am
Location: Warrington, United Kingdom
Contact:

Re: SVG drop down menu

Post by Boothy » Sun Nov 24, 2013 9:15 pm

Hi Hopki

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

Thanks

Boothy

hilbrands
Posts: 3
Joined: Thu Jan 30, 2014 5:14 pm

Re: SVG drop down menu

Post by hilbrands » Sun Feb 02, 2014 11:11 am

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

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest