External links on your Site's Navigation

Adding extra options to a site menu

A useful hack for menus

UPDATED - FrogCode widget

A popular request on the Ideas Portal is to be able to add external links to a site's menu and to be able to link directly to a sub page of a site.  While we're waiting on such a development, this tutorial should allow you to replicate the end-user functionality.

To make things easier, we have created a FrogCode widget that handles most of the code for you.

You can still use the HTML code but either can change Frog's menus to:

• Open another page on the same site
• Open an external website in a new tab
• Open a Frog Site

Not used FrogCode before?
Click here to find out how to install a downloaded widget

You will need one widget for each page link you wish to alter.  You only need to add this widget to the front page of your site.

Once installed, you can now find your links:
 

Preferences

The Label preference makes it easier for you to identify the widget if you have more than one Page to External Widget on your site.

Link URL is always the target and while external websites are easiest, it is possible to open subpages and even other sites using this widget.

Page allows you to use the page selector preference to identify the page link you wish to overwrite.
 

Link to a subpage from the top menu

To link to a subpage, we need to identify the data-uuid of the page.  This screencast shows what you need to look for...
 

Screencast

Paste this result into the Link URL box and close the developer console
 

Link to another site

In order to link to another site, we need the Site's alias (named link in the developer tools).  To get this link, we have create a bookmarklet for Google Chrome browsers.   

In order to install this bookmarklet, simply drag the text link below into Chrome's bookmark bar...
 

The site's alias is copied to your clipboard.  You can then add this to the Link URL preference.

Using HTML

Step 1

On your site with multiple pages, right-click on the menu link you want to go somewhere else and choose Inspect
 

Step 2

Copy the data-uuid value - This screencast shows what you need to look for...
 

Screencast

Step 3

Copy the codes below into an HTML widget on the front page of your site.   

Important! If your code is not on the first page to load, the code will not run

<script type="text/javascript">
    // On Dashboards, menus get re-rendered after the pages are loaded!!
    setTimeout(function() {
        var $menu,
            uuidMap = {
                /* Opens a sub page */ 
                "Empty page UUID":"Target page UUID",
                /* Opens an internet site */
                "Empty page UUID":"http://forum.froginfra.net/",
                /* Opens another stite in FrogLearn */
                "Empty page UUID":"Site Link"

            };
        // polyfil for Curie RC3
        polyfil: {
            if (this === window) {
                this.element = arguments[0];
                this.elements = {
                    site: this.element.closest('.sites_core'),
                    page: this.element.closest('.sites_page')
                };
            }
        
            if (!FrogOS || !FrogOS.openSite) {
                window.FrogOS = FrogOS || {};
                window.FrogOS.openSite = function(o){$('.os_core:first').trigger('os.app.siteviewer',{data:o}); return FrogOS;};
            }
        }
        $menu = this.elements.site.find('.sites_menu');
        for (var from in uuidMap) {
            $menu.find('a[data-uuid='+from+']').on('click', function(ev) {
                var uuid,target;
                uuid = jQuery(ev.target).parent().data('uuid');
                if (!uuid) {
                    uuid = jQuery(ev.target).parent().parent().data('uuid');
                }
                if (!uuid) {
                    uuid = jQuery(ev.target).data('uuid');
                }
                target = uuidMap[uuid];
                if (target) {
                    ev.stopImmediatePropagation();
                    if (target.match(/http[s]*:\/\//g)) {
                        window.open(target, '_blank');
                        return;
                    }
                
                    if (target.match(/\/[^\/]+\/[a-z0-9_.]+\//gi)) {
                        FrogOS.openSite({ site: target });
                        return;
                    }
                
                    $menu.trigger('sites.changeLocation', {
                        uuid: target
                    });
                }
            });
        }
    }.bind(this));
</script>

Link to a subpage from the top menu

Replace "Empty page UUID" and "Target page UUID" with your pages. 
 

Link to an external website

To have a menu element open an external website from a menu, use the following code, replacing "Empty page UUID" with the menu item's UUID and http://forum.froginfra.net/ with the web address
 

Link to another site

In order to link to another site, we need the Site's alias (named link in the developer tools).  To get this link, we have create a bookmarklet for Google Chrome browsers.   

In order to install this bookmarklet, simply drag the text link below into Chrome's bookmark bar...
 

Once installed:

• Click the bookmark
• Click anywhere on the site you wish to link to
• The bookmark's code will copy the site's link to your clipboard.
• Paste this into the code replacing Site link with the contents of your clipboard
• Use the guide above to determine the empty page's UUID to replace "Empty page UUID"