cancel
Showing results for 
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?

64 Replies

jtorres​, I did some digging to try and find the code that  @kenneth_rogers ​ was talking about and apparently found a version that was before adding the option to open in a new tab. I have updated the code above to include that addition. You will only need to replace the function part, you can keep the lines where you are setting up your items.

Let me know if I forgot anything else :smileylaugh:

jtorres1
Community Participant

Brilliant! Thank you. It worked beautifully!

 @kenneth_larsen ​ as always - you're the best. jtorres​ - you prove why this Community is awesome. When someone (me) overlooks something, there's someone else going "Hey, I don't think that's *quite* right...yet." Plus, you saved me looking like the jerk bugging Kenneth for more free code! :smileylaugh:

Updated code worked amazingly well for me, too...but it came from The Kenneth Larsen, so that's to be expected, right  @kenneth_larsen ​?

Greetings Kenneth,

We had been using the .js override for a custom popout menu which recently broke. This particular override really suited our needs. The "customize popout help menu" does not work for us. We are a Tier 1 client and already have 7 links on that popout menu. Adding 3 more creates a mess.

Given that situation we feel that this particular button may work for our needs. In our CSS, we also have code for USU Design Tools and CIDILABS design tools, I am pasting the below code below the CSS for those two items and them updating the override and the button is not appearing. I will also attach our full CSS override. Could you perhaps provide direction as to what I am doing wrong?

  var styleAdded = false;   

    function addMenuItem('Catalog and Certificates', 'http://myescu.net/#/' , 'student-view', '_blank') {   

        var iconHtml = '',   

            itemHtml, 

            linkId = linkText.split(' ').join('_'),   

            iconCSS = '<style type="text/css">' +   

                '   i.custom_menu_list_icon:before {' +   

                '       font-size: 27px;' +   

                '       width: 27px;' +   

                '       line-height: 27px;' +   

                '   }' +   

                '   i.custom_menu_list_icon {' +   

                '       width: 27px;' +   

                '       height: 27px;' +   

                '   }' +   

                '   body.primary-nav-expanded .menu-item__text.custom-menu-item__text {' +   

                '       white-space: normal;' +   

                '       padding: 0 2px;' +   

                '   }' +   

                '</style>';   

        if (icon !== '') {   

            // If it is a Canvas icon   

            if (icon.indexOf('icon') === 0) {   

                iconHtml = '<div class="menu-item-icon-container" role="presentation"><i class="' + icon + ' custom_menu_list_icon"></i></div>';   

            // for an svg or other image   

            } else if (icon !== '') {   

                iconHtml = '<div class="menu-item-icon-container" role="presentation">' + icon + '</div>';   

            }   

        } 

        // Process Target 

        if (target !== undefined && target !== null && target !== '') { 

            target = ' target="' + target + '"'; 

        } else { 

            target = ''; 

        } 

        // Build item html   

        itemHtml = '<li class="ic-app-header__menu-list-item ">' +   

                '   <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + target + '>' + iconHtml +   

                '       <div class="menu-item__text custom-menu-item__text">' + linkText + '</div>' +   

                '   </a>' +   

                '</li>';   

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

        // Add some custom css to the head the first time   

        if (!styleAdded) {   

            $('head').append(iconCSS);   

            styleAdded = true;   

        }   

    } 

Hi  @ndragisic ​,

In my first glance at your code, two things stick out.

  1. This code goes in your global JavaScript file not your CSS file.
  2. Line 02 (as pasted above) is defining a JavaScript function and variable names for the information that will be passed into the function. It should read:

        function
    addMenuItem(linkText, linkhref, icon, target) {

    After this function is defined you can call this function as many times as you need and pass in different values. To do this (based on what you had entered on line 2) you would add the following after the final } on line 48:

        addMenuItem('Catalog and Certificates', 'http://myescu.net/#/', 'student-view', '_blank');

    You can then duplicate that line as many times as needed with different values. That being said, the third value should represent the icon that you would like displayed. That can include a Canvas icon class or the html for an image.

If that doesn't resolve the problem, let me know and I will dig a little deeper.

Thank you I will try this now!

Okay, This is what I have now:

var styleAdded = false;   

    function addMenuItem(linkText, linkhref, icon, target) {   

        var iconHtml = '',   

            itemHtml, 

            linkId = linkText.split(' ').join('_'),   

            iconCSS = '<style type="text/css">' +   

                '   i.custom_menu_list_icon:before {' +   

                '       font-size: 27px;' +   

                '       width: 27px;' +   

                '       line-height: 27px;' +   

                '   }' +   

                '   i.custom_menu_list_icon {' +   

                '       width: 27px;' +   

                '       height: 27px;' +   

                '   }' +   

                '   body.primary-nav-expanded .menu-item__text.custom-menu-item__text {' +   

                '       white-space: normal;' +   

                '       padding: 0 2px;' +   

                '   }' +   

                '</style>';   

        if (icon !== '') {   

            // If it is a Canvas icon   

            if (icon.indexOf('icon') === 0) {   

                iconHtml = '<div class="menu-item-icon-container" role="presentation"><i class="' + icon + ' custom_menu_list_icon"></i></div>';   

            // for an svg or other image   

            } else if (icon !== '') {   

                iconHtml = '<div class="menu-item-icon-container" role="presentation">' + icon + '</div>';   

            }   

        } 

        // Process Target 

        if (target !== undefined && target !== null && target !== '') { 

            target = ' target="' + target + '"'; 

        } else { 

            target = ''; 

        } 

        // Build item html   

        itemHtml = '<li class="ic-app-header__menu-list-item ">' +   

                '   <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + target + '>' + iconHtml +   

                '       <div class="menu-item__text custom-menu-item__text">' + linkText + '</div>' +   

                '   </a>' +   

                '</li>';   

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

        // Add some custom css to the head the first time   

        if (!styleAdded) {   

            $('head').append(iconCSS);   

            styleAdded = true;   

        }   

    } 

        addMenuItem('Catalog', 'http://myescu.net/#/', 'materials-required-light', '_blank');

        addMenuItem('My Sessions and Certificates', 'https://myescu.net/#/user_session', 'student-view', '_blank');

When I apply the attached JS override it does not give me buttons and it breaks my CIDILABS design tools. Any ideas? Seems like they are coming in conflict. I have attached the .js override.

The error is taking place in the code for the custom slide out tray (between the Design Tools code and the code we are discussing). Let me hunt down the original code for that and I will see if I can figure out what is going wrong.

Are you even using the custom slide out menu? It looks like you are missing some of the code which would prevent it from working. The question is, do you want me to fix it so the custom slide out code works or just remove it?

I would like the custom slide out to work so I do not have to redo the graphics on all the instructions referring to it. I was just taking what I could get and trying not to be fussy. This is what it used to look like before it broke:

SessionsAndCertificates.png

This is my code which used to work:

$(document).ready(function() {

var trayLinks = [

{key: 'http://myescu.net/', val: 'Catalog</br></br>'},

{key: 'http://myescu.net/#/user_session', val: 'My Sessions & Certificates</br></br>'},

{key: 'https://www.escweb.net/tx_r18/', val: 'ESC 18 Legacy Catalog and Certificates</br></br>'},

];

var slide_out_title = "Catalog and Certificates"; //Changes the title on the slide out menu

var global_nav_name = "Catalog and Certificates"; //Change the title on the global navigation menu

var footerContent = 'Region 18 legacy users should use legacy catalog to register for or download certificates for past courses.'; //Changes the text of the bottom on the slide out tray

This is what it looks like now:

Broken.PNG

I am not sure why it stopped working, but I have been fussing with it for weeks.