As per MDL-22398 there is now support for a drop down menu within Moodle 2.0 (called a custom menu).
The screenshot above shows the menu in action on the standard theme.
How it works
The custom menu is a drop down menu that makes use of the YUI3 menunav widget to produce a smart drop down menu when JavaScript is enabled and minimal CSS to display and function (in modern browsers) when it is disabled. Within Moodle it is implemented as a component and is produced by the core renderer.
What this all means is that you can now have a fancy drop down menu that will work cross browser with JavaScript enabled or disabled.
Because it is produced by the core renderer those of you who want to use a different drop down menu system will be able to do so by overriding the core renderer.
How to add a custom menu
First up the theme you are using needs to support it!
To set up the custom menu log in to your site as an admin and browse to the following in the settings block:
Administration > Appearance > Themes > Theme settings
On that screen you will see right down the bottom a textarea to set custom menu options and an example of how to set it below.
Simply write you custom menu out into that box as explained in the example, save, and presto you have a custom drop down menu.... Hoorah.
How to add custom menu support to your theme
Adding a custom menu to your own theme is pretty simple once you understand the basics of creating a theme within Moodle 2.0.
The following is based on the way in which the base/standard themes are implemented.
Step 1.
Within your layout file(s) you need to first determine if a custom menu has been created. You can do so in the following manor:
<?php $custommenu = $OUTPUT->custom_menu(); $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu)); ?>This gets us two things, first the content for the custom menu $custommenu, the second a boolean to tell us whether we should display the custom menu $hascustommenu. You will notice that $hascustommenu is determined by two checks, obviously we check if there is a custommenu that isn't empty, and we need to check if the layout wants a custommenu so we have a new layout option nocustommenu that can be set for a layout where we dont want to show the custom menu (I would recommend setting this for Maintenance, Embedded, and Popup initially).
Step 2.
Within that same file we need to display the custom menu if $hascustommenu is true... so add the following code right above the navbar (or where ever you want to display it).
<?php if ($hascustommenu) { ?>
<div id="custommenu"><?php echo $custommenu; ?></div>
<?php } ?>This code is pretty simple, first we check that $hascustommenu is true and if it is we echo $custommenu into a div with the id=custommenu.And that is it!
There is one more thing you should be aware of however, you will need to add some special CSS in order to get the menu to display nicely if JavaScript is disabled and when the page first loads. This is because:
- The widget only works with JavaScript by default, if it is disabled you just see a normal indented list.
- The menu doesn't get initialised immediately, you have to wait for the page to load and the JavaScript to execute at which point the menu will jump into place.
The class allows you to write CSS that will NOT conflict with the YUI css to make sure that the menu displays correctly before the menu is initialised or if JavaScript is disabled.
If in doubt look at what the base and standard theme are doing.
Feel free to ask any questions, but before any one asks I will certainly update the theme's documentation shortly.
Cheers
Sam
P.S Kudo's to Patrick and Martin for agreeing to implement this in core.
