Chapter 7. Advanced Layout Techniques

In this chapter, we will cover:

• Adding a fly-out navigation menu

• Adding a drop-down navigation menu

• Displaying a tree-view navigation menu

• Adding a tabbed content control

• Displaying content in a modal window

Introduction

In this chapter, we will look at a selection of techniques available which are designed to enhance the way users interact with our content. First of all, we will look at the different ways we can present a navigation menu, giving the user a convenient list of the content that we are making available to them. Secondly, we will look at two different ways we can present the actual content to which they have navigated.

We will look at methods of enhancing the display and navigation of page content, by extending existing markup in keeping with the concept of 'progressive enhancement'. In this context, progressive enhancement essentially means that all the content will remain usable to users without JavaScript enabled, or without a suitably modern implementation of JavaScript enabled.

The concept of a navigation menu is well established in the realm of graphical user interfaces, and these tried and tested design patterns have been naturally carried over to the web. The three navigation...

Adding a fly-out navigation menu

The 'fly-out menu' style of navigation is one that many users will be familiar with. It has appeared in various guises in desktop operating system user interfaces and website user interfaces alike, allows a complex navigation tree to be displayed efficiently, and can be easily traversed by the user.

A typical example of this type of menu is the context-sensitive menu that is displayed when right-clicking almost any type of object in modern operating systems, including files, folders, blocks of highlighted text, and even directly on the desktop.

This example will build such a menu by extending existing HTML markup with the YUI3 module node-menunav.

How to do it...

1. 1. We prepare a PHP page to house the markup of our menu. This example will use a file name nav_flyout.php, with the following content:

   <?php
   require_once(dirname(__FILE__) . '/../config.php');
   $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
   $PAGE->set_url('/cook/nav_flyout.php')...

Adding a drop-down navigation menu

A slight variation to the fly-out menu is the drop-down menu. Again, this is a menu structure that many users will find familiar and will be able to use comfortably.

Getting ready

We may build on the previous recipe, as the markup will be almost identical, just with the addition of some CSS class names applied to the parent element.

How to do it...

1. 1. This example uses a file nav_dropdown.php with the following content:

   <?php
   require_once(dirname(__FILE__) . '/../config.php');
   $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
   $PAGE->set_url('/cook/nav_dropdown.php');
   $PAGE->requires->js('/cook/nav_dropdown.js', true);
   echo $OUTPUT->header();
   ?>
   <div id="menu" class="yui3-menu yui3-menu-horizontal yui3- menubuttonnav" style="float:left;height:100px;">
   <div class="yui3-menu-content">
   <ul>
   <li class="yui3-menuitem">
   <a class="yui3-menuitem-content" href="#">Item 1</a>
   </li>
   <li class="yui3...

Displaying a tree-view navigation menu

Yet another method of displaying a navigational hierarchy is the tree-view. This is familiar to users from cases such as browsing a directory structure of files and folders within a graphical operating system shell (for example, Microsoft Windows Explorer).

At the time of writing, YUI3 lacks a stable port of the TreeView widget so we will be using the TreeView widget from YUI2.

How to do it...

1. 1. We must define the markup of our menu tree, in this example within nav_tree.php:

   <?php
   require_once(dirname(__FILE__) . '/../config.php');
   $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
   $PAGE->set_url('/cook/nav_tree.php');
   $PAGE->requires->js('/cook/nav_tree.js', true);
   echo $OUTPUT->header();
   ?>
   <div id="treeContainer">
   <ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li>Sub Tree
   <ul>
   <li><a href="#">Sub Item 1</a>...