Patrick Malley: The Ultimate Moodle Dropdown
For the past few years, I’ve struggled to include a variety of menu bars in my Moodle themes. I’ve tried everything from the simpler CSS-only menus to a slew of fancier menus that require javascript. Some of them have looked really nice. But, none have completely satisfied my need for a light, attractive, and customizable drop-down menu that supports multiple sub-menu levels while still offering basic functionality when javascript is disabled. Until now.
The menu that I’ve found has been under my nose the whole time. It’s the Yahoo User Interface (YUI) Menu included in every Moodle download since 2006. I’ve always known the YUI library was there, but embarrassingly hadn’t looked into it’s menu support until just this past week.
Here’s why it’s a superior menu:
- It’s built on the only javascript library officially supported by Moodle.
- All of the needed javascript and CSS files are included in the core. The only thing to do is reference them in your theme.
- Being built on the YUI framework ensures your menu is future-proof. Moodle is committed to sticking with it through 2.0.
- The YUI library offers great documentation.
- Since it’s Moodle’s supported javascript library, it works without conflict in all browsers (I’ve personally tested Safari, Firefox, IE7, IE8, and Chrome – same behavior and appearance).
- It’s completely customizable and offers as many levels of submenus as you’d like to include.
Before you tell me why this is an inferior menu to , let me stop you and say, “I know.” There are a lot of great menus out there. The problem I’ve found with other menus is their instability in relation to the wide array of code that comes out of and goes into a Moodle installation. I’m just sick of testing menu x on page y of module z.
Download a demo theme
To make this as easy as possible to share, I’ve created a blank theme that includes nothing more than the dropdown menu with basic styles.
Get the Base Menu YUI theme
What I’ve done
If you’re like me, you probably want to know what I did. Here you go:
- A single line of code was added to the head of header.html to pull in all the javascript and stylesheets from the /moodle/lib/YUI/menu/assets/ directory in the core.
<head> <?php echo $meta ?> <meta name="keywords" content="moodle, <?php echo $title ?> " /> <title><?php echo $title ?></title> <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" /> <?php include("$CFG->javascript"); ?> <?php include("js.php"); ?> </head>Of course, you could just add the javascript and CSS includes in header.html directly, but I find this method to be a bit cleaner.
- The menu was pulled into the body of header.html. If your theme uses conditional statements to differentiate between the front page and other pages, you’ll have to add the include twice (as shown):
<?php if ($home) { ?> <div id="header-home" class="clearfix"> <h1 class="headermain"><?php echo $heading ?></h1> <div class="headermenu"><?php echo $menu ?></div> </div> <?php include("menu.php"); ?> <?php } else if ($heading) { ?> <div id="header" class="clearfix"> <h1 class="headermain"><?php echo $heading ?></h1> <div class="headermenu"><?php echo $menu ?></div> </div> <?php include("menu.php"); ?> <?php } ?>This menu.php file contains the HTML markup for the dropdown menu. It’s a daunting file even if you’re accustomed to looking at such code. But, the logic isn’t too tough to figure out. Dropdown menus are simply unordered lists nested inside list items of parent unordered lists. Spend some time looking at my dummy menu and you’ll figure it out.
- I added styles_yui_menu.css to the theme folder. This is a modified version of the styles found in moodle/lib/yui/menu/assets/menu.css. If you prefer the styles in that file, by all means use it instead of this one. I chose to create my own menu stylesheet so it’d be easily customized. I’ve commented wherever possible.
- Based on my Stripdown theme concept, I added a single stylesheet to config.php called styles.css. If you look in that file, you’ll see the only thing in it is the line calling up the menu styles:
@import "styles_yui_menu.css";Of course, there are other ways to include this stylesheet. I chose this one only because I like it. You can add your personal styles right underneath.
- The YUI stylesheet calls up some images for the menu and submenu icons. I moved those images into /base_menu_yui/images/menu/. There are currently more than than are called; I just pulled all that were in the YUI menu assets folder.
I sure hope I didn’t leave anything out. My feeling is that the file will be more helpful than my description, but this should provide some narrative to my code and some insight into the choices that I’ve made.
Since I’m not a programmer, and my understanding of javascript and PHP is lacking, if this code can be improved in any way, please let me know so I can update it.
Your feedback is always appreciated. Enjoy.