Skip to content The Open University

Add section navigation

Our website is going to have more than one page. In fact it will be divided up into the following sections:

  • Survival guide
  • How OU study works
  • Getting organised
  • Learning online
  • Getting help
  • The OU community
  • Postgraduate study
  • FAQs
  • Are you ready? checklist
  • Student stories
  • Your feedback
  • Your OU adventure starts here

Activity 5

We're going to need to offer our users a way of navigating around the site. A common way to do this is to have a navigation bar running across the top of the page content. We can do this by adding the following code below the <!-- ou-site-header-components --> comment:

  1. <ul class="ou-sections">
  2. <li><a href="index.php">Home</a></li>
  3. <li><a href="survival-guide.php">Survival guide</a></li>
  4. <li><a href="how-ou-study-works.php">How OU study works</a></li>
  5. <li><a href="getting-organised.php">Getting organised</a></li>
  6. </ul>

Example

Our index.php file now looks like this.

Activity 6

It doesn't look quite right because there are rounded corners at the top of the content where there shouldn't be. We remove them by adding another body class attribute "ou-sections".

  1. <body class="ou-ia-about ou-sections">

Example

Now it looks like this. Much neater!

Activity 7

We only added four items to this navigation bar. Let's add the rest:

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

Example

Now open index.php and see how it looks.

It looks terrible! The top bar style of navigation is not one size fits all. You'll need to use your judgement when to use this kind of nav. It's obviously unsuitable for our tutorial site so let's consider another option.

Return to the main OU ICE documentation site