6

Estou com uma arte e agora ela está em um arquivo SVG. O problema é que o cliente quer que ao passar o mouse (ou se clicar) em um bloco, ele deve abrir um menu. Não sei se tem a possibilidade de criar isso, mas queria saber. O código SVG que tenho hoje: http://codepen.io/anon/pen/LpwmdE

7
  • No click você quer que abra um menu ? ou quer que redirecione para uma pagina com um menu? 30/11/2015 às 16:10
  • Dá sim e fica maravilhosamente belo. Tem esse exemplo aqui com SVG: tympanus.net/codrops/2013/08/09/… Procure também o Pie Menu Generator (SVG). Tem esse B4D455 aqui: creative-punch.net/2014/02/… Tem a resposta da Ana no SOF em Inglês: stackoverflow.com/questions/13132864/… Tem um monte de coisa. Se foi possível criar o Highcharts, claro que dá pra fazzer um menu. 30/11/2015 às 17:03
  • Eu tenho o arquivo SVG, o que preciso é que ao passar o mouse em um <path> abra um submenu ao lado tipo com um postion relative/absolute. Esse ta sendo maior problema e o pessoal da agência tem que entregar para o cliente ;/ 30/11/2015 às 20:01
  • @GabrielRodrigues Quero que abra um menu ao lado. Por exemplo, se eu clicar no "6" vai abrir um menu do lado dele, no lado esquerdo 30/11/2015 às 20:05
  • 2
    Você deseja fazer isso com SVG?
    – Randrade
    1/12/2015 às 13:06

1 Resposta 1

1

Creio que talvez tenha resolvido seu problema, fiz assim:

Adicionei uma div, que contém os menus fora do seu SVG e coloquei todos os 6 menus dentro dela, com display: hidden no CSS e tomei a liberdade de escolher cores básicas. Assim, você tem total controle visual (seja alterando o HTML ou o CSS) do menu.

Fiz também um pequeno código jQuery para ativar/desativar a visualização dos menus após o clique para o usuário. Ele irá carregar o submenu na tela exatamente na posição que o usuário clicou.

Aqui se encontra o código: https://jsfiddle.net/p4ypat03/4/

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .