cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How to create a circular menu?

Guys, I'm trying to create a circular menu similar to the one below in Canvas, but the limitations of HTML are not allowing me. Has anyone tried to do something like this?

293020_Animated-Circle-Menu-with-jQuery-CSS3.jpg

36 Replies
Highlighted

Hi Jean! I can not see your complete message. Could you please forward it?Thank's.

Highlighted

Hi Liliane,

I noticed that your code for the image source is:

I hope this works Smiley Happy

Highlighted

Hi Jean! Did not work.
I created a folder in files (in Canvas) where are the image and the html file.
In the html file replaces the url of the image with the url of the image and even then it does not open in the canvas application. In the application, when I go to Files, I can open the image, but when clicking on the HTML file it does not open.

Ps: It seems that the application renames the files. For example, image-2 was renamed to image-2_1699171730 and the initial_page HTML file was renamed to initial_page-601671359.

-------------------------------------------------------------------------------------------------------------------------------------------------------
Here is the code for the HTML file:

<div style="text-align: center">
<img src="https://pucminas.instructure.com/files/209527/download?download_frd=1" alt="" width="611" height="611" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="251,44,362,89" href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">
<area shape="rect" coords="380,76,479,125" href="https://pucminas.instructure.com/courses/1405/pages/demarcacao-cientifica-2" target="_parent">
<area shape="rect" coords="461,164,568,208" href="https://pucminas.instructure.com/courses/1405/pages/tipos-de-conhecimento-2" target="_parent">
<area shape="rect" coords="494,271,593,344" href="https://pucminas.instructure.com/courses/1405/pages/objetos-de-pesquisa-em-psicologia" target="_parent">
<area shape="rect" coords="463,394,562,462" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-qualitativa-e-seus-tipos" target="_parent">
<area shape="rect" coords="377,488,473,536" href="https://pucminas.instructure.com/courses/1405/pages/etica-na-pesquisa" target="_parent">
<area shape="rect" coords="250,514,358,577" href="https://pucminas.instructure.com/courses/1405/pages/a-construcao-de-projetos-de-pesquisa-e-seus-comp..." target="_parent">
<area shape="rect" coords="134,476,232,546" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-bibliografica-e-referencial-teorico" target="_parent">
<area shape="rect" coords="50,396,142,459" href="https://pucminas.instructure.com/courses/1405/pages/estrategias-de-coleta-de-dados" target="_parent">
<area shape="rect" coords="7,268,119,348" href="https://pucminas.instructure.com/courses/1405/pages/metodos-de-analise-definicao-e-uso-de-categorias..." target="_parent">
<area shape="rect" coords="48,166,146,216" href="https://pucminas.instructure.com/courses/1405/pages/analise-de-conteudo" target="_parent">
<area shape="rect" coords="133,72,242,126" href="https://pucminas.instructure.com/courses/1405/pages/relatorios-e-publicacoes" target="_parent">
</map>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------

Iframe code:

<div style="position: relative; overflow: oculto; max-width: 100%;"><a target="_parent"> <iframe src="https://pucminas.instructure.com/courses/1405/files/211472/download" width="100%" height="631px" data-api-endpoint="https://pucminas.instructure.com/api/v1/courses/1405/files/211472" data-api-returntype="File"></iframe></a></div>

Highlighted

Hi Liliane,

You will need to:

1.  Upload the image in Canvas first

2.  Copy the URL link from the 'Files' section, remove /download

3.  Go back to the mapping html document and then relink the image by pasting the URL 

4.  Upload the mapping html document (preferably on the same directory)

If this doesn't work, would you mind sending me your mapping html document codes? Smiley Happy

Highlighted

Thanks. It worked to open the link on the same page, but I still have the problem of not displaying the image in the canvas application. Does anyone know why this happens?

Highlighted

Have you tried to first create the mapping which loads to --> target="_parent"?  For example:

<img src="https://canvas.sydney.edu.au/files/4582048/download?download_frd=1" width="1600" height="320" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="482,175,689,311" href="https://canvas.sydney.edu.au/courses/1576" target="_self" />
</map>

Then the iFrame tag:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"><a target="_parent"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://canvas.sydney.edu.au/courses/1576/files/4582106/preview" width="300" height="150" data-api-endpoint="https://canvas.sydney.edu.au/api/v1/courses/1576/files/4582106" data-api-returntype="File"></iframe></a></div>

Highlighted

I used this solution. Thank you!
I created the image and mapped the links. Then I inserted the html in the page through the IFRAME. The disadvantage is that the links need to open in a new tab. I hosted the html page and the image on the server, because hosted on the canvas, the iframe does not open on the mobile. Does anyone have a solution for this?

Highlighted

We've had mixed results with storyline in the mobile app. Sometimes it fits within the space (with large gray areas above and below the storyline), and sometimes it doesn't fit horizontally, causing the user to have to scroll back and forth horizontally. The code and settings for the files are the same, so I have no idea where the discrepancy is coming from. It's possible I'm missing some minuscule code that's out of place with the one that doesn't work.

Community Member

Create the image and map it using DreamWeaver Smiley Happy Then embed in an iFrame.

Highlighted

Hmmmm,,,,  haven't tried it yet but I will!