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')...