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 [insert your favorite menu here], 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 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.
Looks great. I’m in the beginning stages of designing a moodle theme for our primary school and still struggling to come up with a decent menu system that works for all browsers (including our department’s favourite IE6).
However, the download link on this page goes back to the moodle site, which in turn links back here. Am I missing something?
Thanks Steve, I decided late last night to link the Moodle.org database entry here instead of the other way around. I must have forgotten to change the link to the download file. It’s been fixed and the download is now available from this page.
Regarding IE6, I didn’t test it. But, from what I read in the YUI documentation, it should work just fine.
Hi Patrick,
Just like Steve, I’ve been looking for something like this since coming across the Aardvark theme and wanting to add more levels of drop down menus for my Primary school site I’ve been beginning to devlop. Will be trialling this on my home version of the site and then hopefully putting it live asap!
Thanks very much
Richard
[...] rozwijaneDlatego też warto zwrócić uwagę na post Patricka Malley, w którym przedstawia on możliwość stworzenia rozwijanego menu z wykorzystaniem bibliotek, [...]
Its a wonderful thing that you implemented
Should check whether it will work or not.
Is it a dropdown menu or simple navigation menu??
Thank you
Patrick Malley ,can u link a demo for the same
Great Patrick
but why do menus have to be js dependent?
See http://www.cssmenumaker.com/ for js free menus.
See also discussion about the same topic in http://tracker.moodle.org/browse/MDLSITE-496.
Ciao.
Hi Patrick,
wonderful idea, very nice.
Could you please have a look here
http://newschoollearning.com/sandbox/mod/data/view.php?id=21 ??
In IE8 and FF3.6 with windows xp the menu is not displayed horizontal!?
Thanks!
Dietmar
For the record, two to three comments were lost as a result of a change in servers last night by my hosting provider. If anyone received an email follow-up of my comments, please feel free to email them to me so I can put them back up. Sorry about that.
Hi Patrick,
Very nice your approach!
I didn’t tested it yet but it seams promising!
Here follows a very small improvemente suggestion:
On meta.php, in order to the php script be more adaptable for changes on the name of the theme, instaed of using *httpsthemewww ?>/base_menu_yui/styles …* my advice is to use *httpsthemewww .’/’. current_theme() ?>/styles*
So using current_theme() make this script more addaptable proof.
Hoping that helps, and thank you very much for this good sharing!
eduardo
@Daniele: CSS-only menus are nice, but I really like using javascript for multi-level dropdowns. I’ll cite two reasons specific to this menu: 1.) The menu does not load immediately after mouseover. There is a brief delay that I can tweak. This is nice for menu bars that appear directly above the breadcrumb so that users don’t accidentally activate a dropdown when overshooting a breadcrumb link. 2.) The menu does not immediately go away when you navigate away from it. On CSS dropdown menus, if your cursor leaves the menu for a millisecond, the menu goes away and you have to start over again. That is not the case here. Using javascript, I’m able to set the amount of time a user can have their mouse cursor away from the menu before it collapses.
Regarding usability, this menu does a good job of hiding the dropdown indicator arrows and the top-leve menu bar links still work when a user has javascript disabled. As long as your top-level links point to a page containing your other links that in the dropdown, nothing is missed.
@Eduardo: I agree. This is the default meta.php format from the core and I always just change the theme name in all my themes. What a pain. I will take your recommendation for sure!
Hi Patrick,
I’ve been working on using your yui menu within the aardvark theme and incorporating conditional statements so that different menus would be available to different users.
Thought I had it working (tested in Firefox, IE7 and Chrome) until it was pointed out to me that it doesn’t work properly on IE8 – initially :hover and menu layout was messed up. I have (with Mary Evans’ help) managed to work around that using the whatever:hover script. But seem to have an issue (only in IE8) with unpredictable behaviour of the menu in that sometimes the drop downs work correctly and other times they appear while the mouse is over the top level item, but disappear as the mouse is moved down to try to select an item from the dropdown.
This does not appear to happen on your demo site – can you make any suggestions as to what I might need to look at to correct this issue on my sandbox site? The ‘theming my page’ page gives some information of what I have done so far.
http://roelmann.net/course/view.php?id=2
I have created temporary test users to allow visitors to try it out
username: teacher password: 1qaz”WSX
username: student password: 1qaz”WSX
Any help would be greatly appreciated
Thanks,
Richard
(Comment duplicated from moodle.org forum)
TYPO in the POST: (2 thans)
There are currently more than than are called
Just thought you’d like to know.
Thank you, Friend. Fixed.
I am doing some testing with yui menus with a SCORM course displayed WITHIN a window. With a dropdown menu displayed (more than 2 menu items), the rest of the menu is hidden behind the SCORM window. Have any idea how to solve this issue? This only seems to happen within the course. The menus are properly exposed in other instances.
phil