Separating Course Navigation into Blocks

[lph]

Hi everyone,

I’m curious if anyone has figured out a nice way to separate out “blocks” or groups of similar course navigation links.

Using the redirect tool, and using dashes as the name, here is one idea. 

Here is a screenshot using ********** instead. 

One could also have fun inserting smilies.

What do you think? Do you have a better idea? Is there a better character to use? 

Note: The Quizzes.next is only temporarily in the navigation. It’ll be removed once the course is finished. I just wanted a fast way to get to the Item Banks and this seemed the easiest. The same is true for Khan Academy. More external resources will be added to that block. 

[kona]

lph, greetings! I'm not sure if this is possible, but I've shared this with the Canvas Developers‌ group in the Community to see if they can assist.

Hope this helps! 

Kona

[lph]

Thank you. I was going to share it there but was distracted.

All of the suggestions appear to work, and some students have looked at the separators and like the stars. They also like having things separated out. 

Let's see if someone has some other ideas on characters to make things look nicer. 

[James]

We don't do this, but I'm pondering some approaches using CSS and JavaScript.  It raises some questions.

• How prevalent is this? A few courses, limited to subaccounts, just "Physics", all courses, other?
• Do you use a consistent layout from course to course that would allow you to say, for instance, always break after "Unit Resources"?
• Does this need to work in the mobile apps?
• Does it need to support other languages?
• Where does the redirect tool redirect you to when you click on one of these?

Here's what I'm thinking. The syllabus link has border-bottom, padding-bottom, and margin-bottom applied to it. The Files just has a border-bottom applied.

Ignore the order here, this is my sandbox and I'm just playing to see what's possible.

There's nothing I see that would allow you to mark certain navigation items as needing a separator. That's where the JavaScript comes in.

[jbielecki]

When you write, "The syllabus link has border-bottom, padding-bottom, and margin-bottom applied to it. The Files just has a border-bottom applied," how did you "apply" those? My Redirect tool doesn't allow any coding, just "Name" and "URL Redirect." Thanks!

[Ron_Bowman]

@jbielecki - @James probably wrote a CSS or javascript snippet that would do it for him.  He has several javascript programs to enhance features with Canvas.

If you are interested in looking at some of his work, here is his canvancement page: https://github.com/jamesjonesmath/canvancement

It looks like he just played around with this idea some and never developed anything that the rest of us could use.  

[James]

@jbielecki 

Ron ( @Ron_Bowman ) has me figured out. I didn't do any development on this as there were a bunch of questions I had that would need answered before I could do anything.

That means that I likely just went through with the developer tools in the browser to see what could be done rather than developing any actual code (CSS or JavaScript). Most of the navigation items have CSS classes that could be used in the custom global CSS that the administrator uploads through the theme editor.

The problem is that that classes are on the anchor elements and not on the list element. If you cannot get good looking effects by modifying the anchor element, then you will need to use JavaScript to access the parent list element and apply it there. CSS doesn't have a parent selector which is why JavaScript needs it. You could have the JavaScript add the CSS or you could have the JavaScript add a CSS classname and then use the CSS to define it. 

[GideonWilliams]

Like this layout a lot especially the --- separator. Clever and imaginative too to make the link redirect via the Redirect Tool.

Adding the "spacer" not only helps separate out and group similar items but makes items easier to find. Students often struggle identifying individual elements from very long navigation menus especially when they are not in any particular order. Also sometimes putting menu items in A-Z order is not the most helpful