cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
kenneth_rogers
Community Champion

Help With Custom Menu Icons and Script

Jump to solution


Hello, community. I am hoping you can provide me with some assistance as I pose these series of questions. Thanks so much!

First, a little background...

course_menu.jpg

We utilize some code (I believe generously borrowed from  @kenneth_larsen ​) to add a few menu items to our menu in Canvas. Because we support a district of five individual colleges in our instance, these items need to remain in our menu and cannot be moved to the updated Help Menu. Also, we previously decided to not include any icons with these items (see graphic to the right).

With the update to the course menu and it now being collapsible (see https://community.canvaslms.com/docs/DOC-8403#jive_content_id_Global_Navigation​ within Canvas Production Release Notes (2016-10-29)), we have now realized that the text is removed (makes sense), so we must have icons present.

Here's probably the biggest problem - I can read through javascript, steal some people's code (thanks, guys!), and basically understand what's going on - but sometimes you just need to wave the white flag and ask for help!

I have gone through several pages and sites, but I still need assistance with adding an image (I presume svg) as my icon.

I have modified our current javascript file to add an icon from the style sheet - this works, but the icon is removed with the text when you collapse the menu.

I found  @jblumberg ​'s post on Has anyone been working on scripts for the new Beta UI? (his code can be found here) - and while this utilizes a svg image, but it creates a popup window. Although, in reading his notes, it says it is generalized so it can create items with or without the modal window.

So - the questions - does someone have a javascript fix (or js and css fix even) to add custom menu items, including an icon, that won't vanish when the menu collapses? Or is there a way to add svg icons with  @kenneth_larsen ​'s code? What about modifying  @jblumberg ​'s code to add three individual items instead of one item and a popup window?

Help?

65 Replies
estradak
Community Participant

Thank you.

estradak
Community Participant

Thanks a bunch!

dloomis
Community Participant

Thanks to everyone for providing code and instructions for adding custom links/icons. I was able to get it to work but now need to hide one icon from students - has anyone done this and have code they would share? Thanks!

JACOBSEN_C
Community Contributor

What's the trick to get two custom options to show in the global navigation column?  Does code need to be added to both the CSS and JS file?

Hi, Kennith - what's the trick to getting two/multiple custom global options to show?  What code needs to be added/adjusted in the CSS and/or JS files?

Hi,  @JACOBSEN_C ‌! I was just whipping up a response to your question below for you!

To add the three items in our menu, we used the following code in the .js file (no CSS):

252429_menu.jpg
addMenuItem('Student Quick Guide','https://alamo.instructure.com/courses/293886', 'icon-note-light', '_blank');


addMenuItem('Technical Support','https://alamo.instructure.com/courses/293886/pages/technical-information?module_item_id=2163467', 'icon-settings-2', '_blank');


addMenuItem('College Resources','https://alamo.instructure.com/courses/293886/pages/college-resources-and-contacts', 'icon-collection', '_blank');

These were done on lines 50-52 on this file. Essentially, it's telling the function to:

  • Add the Menu Item
  • What to name it
  • Where it's located
  • The icon we are using (from the style guide)
  • And that it's opening in a new window

We just added to the .js file. See my example above!

Kenneth - this is Great!  Much appreciated!  ... got any idea on how to slip the custom options above the help icon?

Man. That's where you've got me. I like to say that I can read and understand some programming languages, but to write something?! Yeah, that's not happening! (Except HTML and CSS - gotta throw that in there!).

Looking over the .js file I included, when it's building the html portion, it appears to say that it is building what the function will do in lines 37-41 (as I mentioned above), and then it takes the itemHTML and appends it to the menu in line 42. Granted, I could be totally off here, but that's what my brain reads.

I'm going to tag  @kenneth_larsen ‌ again, because he's the best. If I'm way off base, he'll tell us! 

Hopefully this is possible for you!

You should be able to change the following line in the JavaScript from:

$('#menu').append(itemHtml);

to: 

$('#menu .ic-app-header__menu-list-item').last().before(itemHtml);

This will find the last item in the menu and insert the new item before it.