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

Thank you bobby.pedersen@education.tas.gov.au!

I thank you immensely for friend jean.meyer@sydney.edu.au.

Highlighted

Looks fab. Good on you for persevering liliane.d@gmail.com.

Highlighted

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

299125_Screenshot_20181204-114219.pngjean.meyer@sydney.edu.au

Highlighted

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.

Highlighted

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>

Highlighted

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"/>

Highlighted

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>

Highlighted

OK.  I just tried it by recreating your Round menu.  First thing I did was create the image and called it Menu.jpg:

298895_Menu.jpg

Please note that I only mapped Menu item 1 and nothing else.

Then I created HTML Document.  The tags below sits between <body> </body>tags:

<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" />
</map>

I called the HTML file RoundMenu.html

Then I uploaded the files HTML and image in Canvas under subdirectory called "0_Roundmenu".  Once I uploaded these files, I right click the the image file Menu.jpg and copied its link address.  

 

Go back to the HTML editor on your PC and open up the RoundMenu.html and change the link of the image file.  NOTE: DO NOT AMEND THE HTML FILE FROM CANVAS. Go back to the original HTML document you saved on your hard drive.  The HTML code now, looks like this:

<img src="https://canvas.sydney.edu.au/files/4616910/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" />

Save the HTML document again and REUPLOAD back in Canvas in the same directory. This will replace the existing HTML document.

 

Then from Files in Canvas right click the RoundMenu.html and copy its link address.

Then paste the RoundMenu.html link address on the iFrame tag below:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://canvas.sydney.edu.au/courses/1576/files/4616914" width="300" height="150"></iframe></div>

 

Just place the above tag somewhere in Notepad or Word for the moment.

 

Now create a NEW page in Canvas.  Paste the above iFrame tag on your page (through HTML editor).

This time, I hope it works.

 

Highlighted

Hi Jean!
Did not work. I have tried the image link in many ways, with no success in the app.

<div style="text-align: center">
<img src="https://pucminas.instructure.com/courses/1405/files/209527/preview" 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>

Do you have any other suggestions? Thank you for your support.

Stay on the mobile:

mob

Highlighted

Hi Liliane,

That is so weird. I don't know why it removed?? Let's try again. As I was saying, your image source is:

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

It didn't have the course URL which is so obvious in your mapping href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">.

Try changing your your image source to --> <img src="https://pucminas.instructure.com/courses/1405/files/209527/preview" alt="" width="611" height="611" usemap="#Map"/>. You will need to add courses/1405 and then remove download and change it to preview.  Try that.

Hope this time you can see my response Smiley Happy