Allow the easy creation of graphical menus on pages

Idea created by Tony Sales on Nov 27, 2018

Comment • 13

Open for Voting

Score5

I would like to be able to create attractive looking graphical menus on pages to simplify navigation (see images below). It can be achieved but it requires a lot more work than it should.Three simple additions would make creating a nice clean looking menu system so much easier:

1. The ability to be able to pad images and overlay text over them in the content editor.

2. The ability to make the content editor full screen or at least expandable in both directions.

3. That changing a page/object name automatically updates any existing internal links to it on other contents pages.

If you would like to be able to make menus like these vote this idea up

13 Comments

Darren Burris Nov 29, 2018 7:53 AM

Could you post the html to one of these pages?

Actions

Tony Sales @ Darren Burris on Nov 29, 2018 8:16 AM

Sure - I assume you just want the html from the content editor window not from the chrome inspect view? Here is the code from the first example... As you can see all of the hard work is done in creating the images with over-layed text and padding - if this could be done in the editor itself things would be a lot easier...

<pstyle="text-align: right;"><a class="Button" title="BIFM Level 3 Diploma: Front Page" href="https://gowercollege.instructure.com/courses/8" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/bifm-level-3-diploma-front-page" data-api-returntype="Page">Home</a></p>
<pstyle="text-align: center;"><a title="Introduction and Course Resources" href="https://gowercollege.instructure.com/courses/8/pages/introduction-and-course-resources" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/introduction-and-course-resources" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/867/download" alt="Introduction and Course Resources" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/867" data-api-returntype="File" /></a><a title="FM3.01 Introduction to Facilities Management" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-01-introduction-to-facilities-management" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-01-introduction-to-facilities-management" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/873/download" alt="FM3.01 Introduction to Facilities Management" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/873" data-api-returntype="File" /></a><a title="FM3.02 Corporate Social Responsibility and Sustainability" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-02-corporate-social-responsibility-and-sustainability" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-02-corporate-social-responsibility-and-sustainability" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/874/download" alt="FM3.02 Corporate Responsibility and Sustainability" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/874" data-api-returntype="File" /></a><a title="FM3.03 Customer and Stakeholder Relations" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-03-customer-and-stakeholder-relations" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-03-customer-and-stakeholder-relations" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/875/download" alt="FM3.03 Customer and Stakeholder Relations" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/875" data-api-returntype="File" /></a><a title="FM3.04 Specification and Procurement of Supplies and Services" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-04-specification-and-procurement-of-supplies-and-services" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-04-specification-and-procurement-of-supplies-and-services" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/876/download" alt="FM3.04 Specification and Procurement of Supplies and Services" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/876" data-api-returntype="File" /></a><a title="FM3.05 Health and Safety Responsibilities" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-05-health-and-safety-responsibilities" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-05-health-and-safety-responsibilities" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/877/download" alt="FM3.05 Health and Safety Responsibilities" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/877" data-api-returntype="File" /></a><a title="FM3.06 Project Management of Operations" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-06-project-management-of-operations" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-06-project-management-of-operations" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/878/download" alt="FM3.06 Project Management of Operations" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/878" data-api-returntype="File" /></a><a title="FM3.07 Budget Management of Operations" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-07-budget-management-of-operations" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-07-budget-management-of-operations" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/879/download" alt="FM3.07 Budget Management of Operations" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/879" data-api-returntype="File" /></a><a title="FM3.08 Understanding the Context Within an Organisation" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-08-understanding-the-context-within-an-organisation" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-08-understanding-the-context-within-an-organisation" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/880/download" alt="FM3.08 Understanding the Context Within an Organisation" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/880" data-api-returntype="File" /></a><a title="FM3.09 Understanding Support Services in an Organisation" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-09-understanding-support-services-in-an-organisation" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-09-understanding-support-services-in-an-organisation" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/881/download" alt="FM3.09 Understanding Support Services in an Organisation" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/881" data-api-returntype="File" /></a><a title="FM3.10 Space Allocation" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-10-space-allocation" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-10-space-allocation" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/898/download" alt="FM3.10 Space Allocation" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/898" data-api-returntype="File" /></a><a title="FM3.11 Building Maintenance" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-11-building-maintenance" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-11-building-maintenance" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/883/download" alt="FM3.11 Building Maintenance" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/883" data-api-returntype="File" /></a><a title="FM3.12 Understanding the Estate Management Function" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-12-understanding-the-estate-management-function" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-12-understanding-the-estate-management-function" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/884/download" alt="FM3.12 Understanding the Estate Management Function" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/884" data-api-returntype="File" /></a><a title="FM3.13 Disaster Recovery and Contingency Planning" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-13-disaster-recovery-and-contingency-planning" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-13-disaster-recovery-and-contingency-planning" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/885/download" alt="FM3.13 Disaster Management and Contingency Planning" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/885" data-api-returntype="File" /></a><a title="FM3.14 Understanding Access Management and Inclusion" href="https://gowercollege.instructure.com/courses/8/pages/fm3-dot-14-understanding-access-management-and-inclusion" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fm3-dot-14-understanding-access-management-and-inclusion" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/886/download" alt="FM3.14 Understanding Management and Inclusion" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/886" data-api-returntype="File" /></a><a title="FMP413 Managing Operational Performance" href="https://gowercollege.instructure.com/courses/8/pages/fmp413-managing-operational-performance" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/pages/fmp413-managing-operational-performance" data-api-returntype="Page"><img src="https://gowercollege.instructure.com/courses/8/files/903/download" alt="FMP413 Managing Operational Performance" width="300" height="300" data-api-endpoint="https://gowercollege.instructure.com/api/v1/courses/8/files/903" data-api-returntype="File" /></a></p>

Actions

Tony Sales @ Tony Sales on Nov 30, 2018 8:56 AM

Hi I have now managed to get this working using CSS and HTML - add this code to your CSS file:

.container-block {
 display: inline-block;
 width: 300px;
 height: 300px;
 position: relative;
 text-align: center;
 font-weight: bold;
 color: black;
}
.container-slab {
 display: inline-block;
 width: 600px;
 height: 300px;
 position: relative;
 text-align: center;
 font-weight: bold;
 color: black;
}
.centered {
 position: absolute;
 top: 80%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Then use this code to insert the images on the page - you can then edit the overlay text in the content editor window from then on:

<div class="container-block"><img src="insert-your-image-source-here" alt="insert-alt-tag-here"  />
<div class="centered">insert-overlay-text-here</div></div>

<div class="container-slab"><img src="insert-your-image-source-here" alt="insert-alt-tag-here"  />
<div class="centered">insert-overlay-text-here</div></div>

Actions

Darren Burris @ Tony Sales on Nov 30, 2018 8:47 AM
Correct! That would be amazing.

On Thu, Nov 29, 2018, 9:56 AM anthony.sales@gowercollegeswansea.ac.uk <
Like • Show 0 Likes0
Actions

Tony Sales Nov 30, 2018 8:50 AM
This code works absolutely fine as long as you pre-pad and correctly size your images in advance - I will need to tweak it because if you mix blocks and slabs they don't quite line up - but same sized blocks or slabs work fine...
Like • Show 0 Likes0
Actions
- Darren Burris @ Tony Sales on Nov 30, 2018 2:41 PM
  Thank you!
  
  On Fri, Nov 30, 2018, 10:50 AM anthony.sales@gowercollegeswansea.ac.uk <
  Like • Show 0 Likes0
  Actions
Tony Sales Dec 3, 2018 7:10 AM
Ok I have worked out how to get the blocks and the slabs to line up if you mix them together - for some reason you need to add 5px to the width of the slab then it lines up perfectly. So this code should be adjusted to this:
```
.container-slab {
 display: inline-block;
 width: 605px;
 height: 300px;
 position: relative;
 text-align: center;
 font-weight: bold;
 color: black;
}
```
And then you need to make the slab graphics 605x300 pixels as well:)
Like • Show 2 Likes2
Actions
Renee Carney Dec 3, 2018 10:00 AM
Tony Sales
You've done a lot of great work here with the HTML. Thanks for sharing! If you have the time, please do construct your work in a blog post in the Instructional Designers group so that others can use it! If you need ideas on how to construct a resource like this, Canvancements - Canvas Enhancements has a collection of examples.

When it comes to this idea, are you seeking button creation tools in the RCE? Is that the premise of the overall idea?
Like • Show 1 Like1
Actions
Tony Sales Dec 5, 2018 4:51 AM
Hi Renee, will do that - not sure how I create a page like the ones listed in the second link though - doesn't seem to be an option to make a new one - or maybe I have to make it somewhere else?

And no I am not trying to create buttons, which would be nice as well (doing this with HTML as well)- I am just trying to create nice easy to use graphical menus with over-layed text as shown in the images above...

I will post it on the Instructional Designers group
Like • Show 0 Likes0
Actions
- Renee Carney @ Tony Sales on Dec 5, 2018 8:11 AM
  Thanks, Tony. You won't be able to directly add it to the page I sent you as an example, but when you are in the Instructional Designers (join it if you have not!) you will be able to create content!
  Like • Show 1 Like1
  Actions

Tony Sales Dec 14, 2018 4:35 AM

Here is the final .css file which allows the creation of editable graphical menus/links with overlayed text - all you have to do is produce the original graphics at the relevant sizes - obviously if you want to change the size of the images you would have to modify the code accordingly - also menus created in this way are accessible by default once you have added hyperlinks - in fact I found they work better with a screen-reader if you remove the auto-generated alt-tags as otherwise it reads out the alt-tag and the title of the link/page you are going to. Please note that this script allows the creation of four different types of object: a frontpage graphic with title, a menu block with title, a double menu block sized slab with titles and a book image - using a link to google books thumbnails:

/* Custom Canvas CSS - Gower College Swansea - Tony Sales */

/* Remove hyperlink underlining */

#content .user_content a { text-decoration:none; }
#content .user_content a:hover { text-decoration:none; }

/* Hide external link icon */

span.ui-icon {
    background-image: none;
    width:0;
}

/* Create Menu Grid with Text Overlay */

.menu_container_GCS {
    width: 100%
    margin: 0;
    padding: 0;
    text-align: center;
}

.menu_frontpage_GCS {
    display: inline-block;
    width: 600px;
    height: 450px;
    position: relative;
    text-align: center;
    font-weight: bold;
    color: White;
    font-size: XX-large;
    white-space: nowrap;
}

.title_frontpage_GCS {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu_block_GCS {
    display: inline-block;
    width: 300px;
    height: 300px;
    position: relative;
    text-align: center;
    font-weight: bold;
    color: black;
}

.menu_slab_GCS {
    display: inline-block;
    width: 604px;
    height: 300px;
    position: relative;
    text-align: center;
    font-weight: bold;
    color: black;
}

.title_menu_GCS {
    position: absolute;
    margin: 0px -100px 0px 0px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu_book_GCS {
    display: inline-block;
    width: 175px;
    height: 225px;
    position: relative;
    text-align: center;
}

/* Sample HTML Code to Insert Block/Slab and over-layed Text...

<div class="menu_container_GCS">
<div class="menu_frontpage_GCS"><img src="insert_image_source_here" width="600" height="450" />
<div class="title_frontpage_GCS">insert_title_here</div></div>
</div>

<div class="menu_container_GCS">
<div class="menu_slab_GCS"><img src="insert_image_source_here" width="604" height="300" />
<div class="title_menu_GCS">insert_title_here</div></div>
<div class="menu_block_GCS"><img src="insert_image_source_here" width="300" height="300" />
<div class="title_menu_GCS">insert_title_here</div></div>
</div>

Sample HTML Code to Insert Book

<div class="menu_container_GCS">
<div class="menu_book_GCS"><img src="insert_image_source_here" /></div>
</div>

Sample HTML Code to Insert Buttons

<p style="text-align: right;"><a class="Button" title="insert_hover_text" href="inert_link_here">insert_title</a></p>
<p style="text-align: left;"><a class="Button" title="insert_hover_text" href="inert_link_here">insert_title</a></p>
<p style="text-align: center;"><a class="Button" title="insert_hover_text" href="inert_link_here">insert_title</a></p>

<p style="text-align: center;"><a class="Button" title="insert_hover_text" href="inert_link_here">insert_title</a>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a class="Button" title="insert_hover_text" href="inert_link_here">insert_title</a></p>

*/

Actions

Stefanie Sanders @ Tony Sales on Dec 14, 2018 6:34 AM
Tony Sales Thank You for sharing this! A more detailed discussion (with screenshots!) can be found at Creating graphical menus with editable text overlay in the content editor
Like • Show 1 Like1
Actions

Tony Sales @ Tony Sales on Dec 14, 2018 6:39 AM
No problem, happy to share ideas or help if anyone has any questions This has now enabled me to create a complete course template with 44 modules and all of the pages pre-built - staff can then get a new course, change the menu names (And page names because of course the links aren't updated automatically ) then just upload their content and insert links of the relevant pages... Took a long time to work it all out, but it will save so much time in future
Like • Show 2 Likes2
Actions

Incoming Links

Re: Home Navigation Removal No Longer Available

Allow the easy creation of graphical menus on pages

Related Content

Recommended Content

Incoming Links