O'Reilly logo

Moodle JavaScript Cookbook by Alastair Hole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. 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" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required