Skip to content The Open University

Add a context nav

OU ICE has a style for a contextual navigation menu that can be placed in the side bar (region2).

Activity 8

You can reuse the code you used for the top bar, making a couple of subtle tweaks:

  1. <div class="ou-context-nav">
  2. <ul>
  3. <li><a href="index.php">Home</a></li>
  4. <li><a href="survival-guide.php">Survival guide</a></li>
  5. <li><a href="how-ou-study-works.php">How OU study works</a></li>
  6. <li><a href="learning-online.php">Learning online</a></li>
  7. <li><a href="getting-help.php">Getting help</a></li>
  8. <li><a href="the-ou-community.php">The OU community</a></li>
  9. <li><a href="postgraduate-study.php">Postgraduate study</a></li>
  10. <li><a href="faqs.php">FAQs</a></li>
  11. <li><a href="are-you-ready-checklist.php">Are you ready? checklist</a></li>
  12. <li><a href="student-stories.php">Student stories</a></li>
  13. <li><a href="your-feedback.php">Your feedback</a></li>
  14. <li><a href="you-ou-adventure-starts-here.php">Your OU adventure starts here</a></li>
  15. </ul>
  16. </div>

Paste this code just after the <!-- ou-region2-components --> comment in your index.php file. Delete the sections / topbar code you added last time around.

Example

View the result.

Not bad! But something isn't right at the top of the content area! A bit of the border is missing. This is because we still have the ou-sections <body> class attribute.

Activity 9

Remove the ou-sections class attribute and save the file

Example

view the result.

Activity 10

It's nice to show the user what page they are on or what section they are in. The current section can be highlighted by adding the class attribute of "ou-expanded" to the relevant list item. Our file, index.php, is the home page so we'll add the highlight to the first list item:

  1. <li class="ou-expanded"><a href="index.php">Home</a></li>

Save the file

Example

see the result.

Activity 11

Now, let's add a new page so we can see the menu in action.

Create a survival-guide.php file by taking a copy of index.php.

Move the ou-expanded class to the relevant list item for that page:

  1. <li class="ou-expanded"><a href="survival-guide.php">Survival guide</a></li>

Whislt under the hood:

  1. Remove the home page content, ready for page specific content
  2. Update the HTML <title> element with "Survival guide"
  3. Update the <h1> element with "Survival guide"

Paste the following content after the <h1> element:

  1. <p>Every student needs to read this Survival guide. It will help you prepare to study and help with studying itself.</p>
  2. <p>This guide will answer these questions:</p>
  3. <ol>
  4. <li>What is StudentHome?</li>
  5. <li>Where can I find out about my module?</li>
  6. <li>How will I study with the OU?</li>
  7. <li>Who do I go to for help?</li>
  8. <li>What module materials should I have?</li>
  9. </ol>

Example

Take a look.

You would apply the same principle to all the other pages on the site.

Creating pages this way, whilst possible, is very time consuming. It would be a good idea to use a script to automatically generate these navigation systems for you even if you don't have access to full blown content management system.

Return to the main OU ICE documentation site