Embed a menu bar file onto multiple pages

Jump to solution
DonAlbin
Community Member

I have created weekly "Calendar Pages" for my students.  I would like to embed into each of these pages, onto the top, one single menu bar so that students can quickly click on any date in the menu bar and go to the desired page.  Is there a way to do this so that every page shows the same menu on top?

Labels (1)
0 Likes
2 Solutions
kmeeusen
Community Champion

Hi @DonAlbin 

If you are familiar with the HTML editor in Canvas pages, this can be done with a bit of HTML coding, and using the "Duplicate Page" function. Essentially you would..........

  • Create a new Canvas page. Title the page for the first week.
  • Duplicate the page for the appropriate numbers of weeks, titling each duplicate for its appropriate week.How do I duplicate a page in a course?
  • Create a row of buttons across the top (see button html code snippets below) with for each week. For easier consistency, I suggest putting the buttons in the cells of a single-row table.
  • Link each button to its appropriate page.
  • On the page you created the row of buttons, copy the html code for the entire row of buttons. If the buttons are in a table, include the code for the table.
  • Open the HTML editor for each subsequent page, and paste the code in and save.
  • Add any desired text below each button row - instructions, assignments, etc.
  • Place pages where desired, like in each week's module.

Button code snippets

Below are examples of buttons and the code snippets used to create them.The button target code (where it will take you when clicked) is noted by bold red text, the button's visible title is noted in bold blue text and the button length is noted in bold green text.

kmeeusen_0-1614526469992.png

 

<p style="text-align: left;"><a class="Button" style="width: 20%;" title="Button -- Normal" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Normal</strong></a></p>

kmeeusen_1-1614526499221.png

 

<p style="text-align: left;"><a class="Button Button--primary" style="width: 20%;" title="Button -- Primary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Primary</strong></a></p>

kmeeusen_2-1614526524849.png

 

<p style="text-align: left;"><a class="Button Button--secondary" style="width: 20%;" title="Button -- Secondary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Secondary</strong></a></p>

kmeeusen_3-1614526548246.png

 

<p style="text-align: left;"><a class="Button Button--success" style="width: 20%;" title="Button -- success" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Success</strong></a></p>

kmeeusen_4-1614526566825.png

 

<p style="text-align: left;"><a class="Button Button--warning" style="width: 20%;" title="Button -- warning" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Warning</strong></a></p>

kmeeusen_5-1614526591354.png

 

<p style="text-align: left;"><a class="Button Button--danger" style="width: 20%;" title="Button -- danger" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Danger</strong></a></p>

 

TIPS

  • The key to which type of button is displayed is the following code in the button: <a class="Button Button--danger". The first use of the word "button" creates a button, and the second "button" followed by the dashes and a button type creates a specific button style. So if you have copied the code for the "Button - - Danger" shown above, look at it and decide that the dark red is a bit much, you can simply substitute "Danger" for "Warning" or any other of the styles without having to replace the entire code.
  • These buttons are designed for in-course navigation (the "target"). To acquire the URL for the target, first navigate to that page in Canvas, then copy everything in the URL from "/Courses" on. This is what you will paste in the code sections identified in red above.
  • In Edit mode on your page, first identify where you want to place the button, and take note of the text above there. then, when you switch to the HTML Editor, you can scroll down to where you see that text, insert your cursor and hit "enter a couple time to drop below that point before pasting in the code. This helps you to both properly place the button, and isolate the code so that you can make revisions.
  • Often you will find yourself needing the same button in more than one place in your classroom. Create an unpublished Canvas page (or even a Word document) that you can paste the button's code into for easy access the next time you need it.
  • In Edit mode, buttons can be selected and copied, then pasted into  another Canvas location without needing to go into the HTML Editor.
  • The title of a button can also be edited directly from the Rich Content Editor, without having to go into the HTML Editor.

 

How To Use This Code

  • Pick the style of button you would like to place into a Canvas page, and select and copy the code snippet below it;
  • Navigate to a page of a Canvas Course (or create a new page) where you would like to add the button and click "Edit",
  • Click HTML Editor, and scroll down to where you want the button to appear. See my tip above concerning identifying the correct location before opening the HTML Editor.
  • Click Enter a couple times to clear a bit of space, and paste the code,
  • Replace the button target and visible title,
  • Click "Save"

 

I hope this helps,

Kelley

View solution in original post

0 Likes
James
Community Champion

@DonAlbin 

There are ways.

The Canvas-preferred way is to host the the page on an external site that has SSL support (https, not http) and then use the embed feature to embed it in an iframe. The problem with this is that you probably want it to look like it belongs in Canvas and content in an iframe is sandboxed (for security purposes) and cannot see the styling applied to the parent. That means that you would need to do all of the styling yourself. You can also add any JavaScript that you want here.

There may be a way to embed the content within Canvas. To do this, you create an HTML file and upload it into your course Files. Then you embed that page in an iframe at the top of each page. For example, I was able to go the course Files, find the file I wanted to include, and then right click and copy the location. It had something like .../files/123456/download?download_frd=1. You need to remove the ?download_frd from the src for the iframe. This still suffers from the iframe sandboxing, so you will want to include the CSS within that file to make your buttons look right.

The second way is a hack. There was a big discussion about it and it has security implications if you intend to use JavaScript.

 

View solution in original post