I would like to add tabs in my homepage. Can you explain me how to do this in canvas? Thank you
Sara, you will need to deploy some creative HTML solutions to achieve this. Please have a look at the resources in the Instructional Designers group for some examples:
Using Tabs in Your Canvas Course
Organizing Media Files with Tabs and Tables
Hi Sara Palasch,
Looking at your screenshot, looks like you want to add button links rather than tabs. Here are a few resources from the community that will help:
Good luck,Cheers - Shar
Good catch, Sharmaine! I took the screenshot to be fancy tabs (and because of the title of the question, my mind was thinking "tabs tabs tabs"), but you're right: it's more likely that they're buttons.
When creating tabs and/or buttons, if you know your students will access your course frequently with a mobile device, take a couple minutes to test your pages. Sometimes the mobile experience can differ from the initial design. The quick check can either confirm your design or will encourage you to make a few modifications. (I do this with each of my courses, and it's definitely worth it!)
This is very good advice Kristin!
I typically set the width of my buttons as a percentage of the available space rather than a fixed pixel width. This will permit them to scale to the device being used.
Agree with you here, Kristin Lundstrum...
The HTML code for tabs would not display as intended on iPhones/iPads. If you used example code like this:
<div class="enhanceable_content tabs">
<li><a href="#fragment-1">Tab One</a></li>
<li><a href="#fragment-2">Tab Two</a></li>
<li><a href="#fragment-3">Tab Three</a></li>
<div id="fragment-1">Tab 1 content</div>
<div id="fragment-2">Tab 2 content</div>
<div id="fragment-3">Tab 3 content</div>
...which displays something like this on the web:
Instead of seeing tabs and the content within those tabs on your mobile device, you're going to see something like this:
Tab 1 content
Tab 2 content
Tab 3 content
The other thing I've thought of is that tabs don't work well for printing. If you use the above code and want to print, you'd have to select each tab in your web browser and then print that page...then select the next tab, print the page, rinse and repeat.
Hope this helps.
Part of what I like about the tabs is how they (don't) display on Mobile. Those tabs then become a table of contents to allow folks to jump down** to the relevant content. In fact, I usually put a hidden-desktop H2 called Contents so that it's specifically stated on Mobile that those links are for the document they are looking at and will bring them there.
**"Assignment" pages do not behave well with the Mobile tabs/TOC and the links will not jump to the selected section. But then again on mobile assignment pages I put a note to head to a desktop (computer) to submit the assignment.
The other thing I like about tabs is that when printing, it will only print just the tab that's showing. I'm not a fan of printing and whenever I can help students cut down on the amount of paper they are printing I feel a small victory. With just the selected tab printing, it also makes sure students are focused only on the information that they need a hardcopy printout.
Also those enhanceable tabs are accessible behind the scenes (with roles and controls already added) without us having to do anything special. Yay! oh and I color my tabs in shades of grey because some of my browsers were not displaying the border line.
Happy New Year!Cheers - Shar
Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment. Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.
Retrieving data ...