Dropdown with SVG

Asked

Viewed 133 times

6

I have an art and now it’s in an SVG file. The problem is that the client wants that when passing the mouse (or if clicking) on a block, he should open a menu. I don’t know if you have the ability to create this, but I wanted to know. The SVG code I have today: http://codepen.io/anon/pen/LpwmdE

javascript html css svg

  • On click you want to open a menu ? or you want me to redirect to a page with a menu?

  • Yes, it does, and it’s wonderfully beautiful. You have this example here with SVG: http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/ Also look for Pie Menu Generator (SVG). You have this B4D455 here: http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/ You have Ana’s answer on SOF in English: http://stackoverflow.com/questions/13132864/creating-a-radial-menu-in-css There are a lot of things. If it was possible to create Highcharts, of course you can make a menu.

  • I have the SVG file, what I need is that when passing the mouse in a <path> open a submenu to the type side with a postion relative/Absolute. This is the biggest problem and the staff of the agency has to deliver to the client ;/

  • @Gabrielrodrigues I want you to open a menu on the side. For example, if I click on "6" it will open a menu on the left side of it

  • 2

    You wish to do that with SVG?

  • @Randrade In fact SVG already try right. I just want to create a dropdown when passing the mouse on the <path elmento>

  • Whoa, you got it?

Show 2 more comments

1 answer

1

I think I may have solved your problem, I did so:

I added a div, which contains the menus outside of your SVG and put all 6 menus inside it, with display: hidden in CSS and I took the liberty of choosing basic colors. So you have full visual control (either by changing HTML or CSS) from the menu.

I also made a small jQuery code to enable/disable the menu view after the user click. It will load the submenu onto the screen at exactly the position the user clicked.

Here is the code: https://jsfiddle.net/p4ypat03/4/

I hope I’ve helped.

Browser other questions tagged javascript html css svg

You are not signed in. Login or sign up in order to post.