cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
lilianedias
Community Participant

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
lilianedias
Community Participant

Hello, Jean!
I did exactly as you said and it does not work on the phone.
On the desktop it works normally, but on the mobile the image is not displayed.

The problem is in the Canvas application that can not load the image.

In the application when I go to Files and click on the image, it opens. But when you click on the html page it can not load the image. Only one blank page appears.

298923_pastedImage_1.png

Pagina_inicial.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página inicial</title>
</head>
<body>
<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>
</body>
</html>

Página

<div style="overflow: hidden; max-width: 100%;"><a target="_parent"> <iframe src="https://pucminas.instructure.com/courses/1405/files/220005/download" width="100%" height="631px" data-api-endpoint="https://pucminas.instructure.com/api/v1/courses/1405/files/220005" data-api-returntype="File"></iframe></a></div>
<div style="clear: both; min-width: 700px; max-width: 100%;"><hr style="border: 2px solid #c2f4ff;" /></div>

jean_meyer
Community Participant

Hi Liliane,

You still don't have the course number in your img src tag:

<img src="https://pucminas.instructure.com/files/209527/download?download_frd=1"alt="" width="611" height="611" usemap="#Map"/>

Change it to:

<img src="https://pucminas.instructure.com/courses/1405/files/209527/download?download_frd=1"alt="" width="611" height="611" usemap="#Map"/>

lilianedias
Community Participant

Hi Jean!
It still does not work.
I've tested everything. I do not know what else to do.
I repeated exactly what you did and it did not work.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página inicial</title>
</head>
<body>
<div style="text-align: center">
<img src="https://pucminas.instructure.com/courses/1405/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>
</body>
</html>

jean_meyer
Community Participant

Your map name doesn't have an ID.  Try this.  And please make sure that you log on using Google Chrome on both your computer and phone.

First and foremost, clear your CACHE/History in Google Chrome

1.  Save the image I have attached here as Menu.jpg:

299117_Menu.jpg

2.  Go to your HTML editor and paste this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img src="menu.jpg" alt="Round menu" width="566" height="572" usemap="#Map" border="0" />
<map name="Map" id="#Map">
<area shape="circle" coords="275,71,62" href="https://www.youtube.com/watch?v=CSvFpBOe8eY" target="_parent" alt="SOAD" />

</body>
</html>

3.  Save this HTML as RoundMenu.html

4.   Log into Canvas

5.   Go to Files

6.   Create a folder called 0_RoundMenu

7.  Upload both the files --> Menu.jpg and RoundMenu.html

8.  Once uploaded, RIGHT click the file called Menu.jpg

9.  This will give you a drop down menu and then click on "Copy link address"

10.  Go back to your HTML editor, open up the RoundMenu.html

11.  Select what is highlighted in red from the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img src="menu.jpg" alt="Round menu" width="566" height="572" usemap="#Map" border="0" />
<map name="Map" id="#Map">
<area shape="circle" coords="275,71,62" href="https://www.youtube.com/watch?v=CSvFpBOe8eY" target="_parent" alt="SOAD" />

</body>
</html>

12.  Once selected, paste the link that you have copied from your Canvas site.  It will be very different on mine because we don't share files and folders, but it should look relatively like this:

_______________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img src="https://canvas.sydney.edu.au/files/4616899/download?download_frd=1" alt="Round menu" width="566" height="572" usemap="#Map" border="0" />
<map name="Map" id="#Map">
<area shape="circle" coords="275,71,62" href="https://www.youtube.com/watch?v=CSvFpBOe8eY" target="_parent" alt="SOAD" />

</body>
</html>

_________________

Please do not change anything else.  What we are doing here is recoding so that the image relinks back to where you have saved this file in Canvas and not from your computer hard drive because no one has access to your hard drive.  We are recoding to redirect the image source.

13.  Save the RoundMenu.html file

14.  Go back to your Canvas site and go to the folder you have created in Step 6 above "0_RoundMenu"

15.  REUPLOAD the file called RoundMenu.html which should replace the previously uploaded file.

16.  Once you have uploaded this file, RIGHT click RoundMenu.html from Canvas and select "open link in new tab"

17.  If you can see the image and the mapping works, then the next step is to place in an iFrame.

Let me know if you can see the image and mapping.  

Again, please make sure you logged in using Google Chrome on all devices.

lilianedias
Community Participant

Hi Jean!
You were right.
It was the ID that was missing.
Thank you for your support!

299125_Screenshot_20181204-114219.png @jean_meyer ‌

Looks fab. Good on you for persevering  @liliane_d .

lilianedias
Community Participant

Thank you  @Bobby2 !

I thank you immensely for friend  @jean_meyer .