Last night, I created a new Base theme for Moodle that uses the YUI library dropdown menu. It's quite nice and can be found in the database here:
http://moodle.org/mod/data/view.php?d=26&rid=3359
The download link in the database goes to my blog where I've posted more information about the theme and how I created it.
Perfect theme for starting your new project with a dropdown menu.
Enjoy.
Hi Patrick
good idea. Do you think its possible to create more contrast between menu submenus and background? Sometimes its not easy to read the content in the menus.
Do you think its possible to add automatically course content in menus? The main menu elements are 'my courses' the submenu one level are the weeks/topics, the submenu level 3 are the ressources/activities and if you indent an element, it is in the next menu level.
Ralf
good idea. Do you think its possible to create more contrast between menu submenus and background? Sometimes its not easy to read the content in the menus.
Do you think its possible to add automatically course content in menus? The main menu elements are 'my courses' the submenu one level are the weeks/topics, the submenu level 3 are the ressources/activities and if you indent an element, it is in the next menu level.
Ralf
The theme contains a file called styles_yui_menu.css with commented values for menu and submenu colors. This theme is not meant to be a production theme, so I stuck with simple gray values that may not show up as well on your monitor as they do on mine. Feel free to change them to whatever value suits your project best.
I do think it's possible to automatically pull course lists, etc. However, I'm not a programmer and there are no easy ways of calling this data into the theme.
There are a couple themes in the database that claim to do this successfully, but I'm not quite happy with the implementation.
I do think it's possible to automatically pull course lists, etc. However, I'm not a programmer and there are no easy ways of calling this data into the theme.
There are a couple themes in the database that claim to do this successfully, but I'm not quite happy with the implementation.
Your new theme looks great 
thanks !
here is a little chunk of code that makes it display MY COURSES
in one of the menus or sub menus.
<ul class="first-of-type">
<?php
if ($courses = get_my_courses($USER->id, 'visible DESC, fullname ASC')) {
foreach ($courses as $course) {
if ($course->id == SITEID) {
continue;
}
$linkcss = $course->visible ? "" : " class=\"dimmed\" ";
echo "<li class=\"yuimenuitem\"><a class=\"yuimenuitemlabel\" $linkcss title=\"" . format_string($course->shortname) . "\" ".
"href=\"$CFG->wwwroot/course/view.php?id=$course->id\">" . format_string($course->fullname) . "</a></li>";
}
}
?>
</ul>
here is a little chunk of code that makes it display MY COURSES
in one of the menus or sub menus.
<ul class="first-of-type">
<?php
if ($courses = get_my_courses($USER->id, 'visible DESC, fullname ASC')) {
foreach ($courses as $course) {
if ($course->id == SITEID) {
continue;
}
$linkcss = $course->visible ? "" : " class=\"dimmed\" ";
echo "<li class=\"yuimenuitem\"><a class=\"yuimenuitemlabel\" $linkcss title=\"" . format_string($course->shortname) . "\" ".
"href=\"$CFG->wwwroot/course/view.php?id=$course->id\">" . format_string($course->fullname) . "</a></li>";
}
}
?>
</ul>
Fantastic! I'm going to try this out.
Thank you, Nadav. This is exactly the code I've wanted for some time. I should have asked for this sooner! I've implemented it in my sandbox at http://newschoollearning.com/sandbox/?&theme=base_menu and can confirm that it shows the courses of a logged in user.
I've changed it slightly to show non-logged-in users a single link without dropdown arrow. Here's my modified code:
http://pastie.org/803443
I've changed it slightly to show non-logged-in users a single link without dropdown arrow. Here's my modified code:
http://pastie.org/803443
looks great
(and thank you for sharing this on Pastie, what a great tool. i was not aware of it)
(and thank you for sharing this on Pastie, what a great tool. i was not aware of it)
Hi,
Excellent idea. I've always been missing multi-level drop-down menu in MOODLE. I installed your menu immediately (MOODLE 1.9+) but... it does not work properly. I checked it on PC with Windows7 using IE8, FF3.6 and Chrome4. It is not displayed horizontally. Can anybody you help me?
Greetings
Robert
Excellent idea. I've always been missing multi-level drop-down menu in MOODLE. I installed your menu immediately (MOODLE 1.9+) but... it does not work properly. I checked it on PC with Windows7 using IE8, FF3.6 and Chrome4. It is not displayed horizontally. Can anybody you help me?
Greetings
Robert
Robert,
I had a look at the link you sent me before changing to the Aardvark theme and my only guess is a problem with javascript not loading properly. Since this is the first time I've used the YUI styles, I'm not sure what that problem could be. What is the point release of your Moodle installation - 1.9.x - what is the x? Also, check your source code and make sure that all the javascript files linked actually exist.
If someone else is using the theme, can you confirm that it is working properly? This will help Robert figure out whether this is a problem on his server or a problem with the theme.
Lastly, I'd recommend reinstalling the theme. It's always possible that a specific file didn't get uploaded properly.
I had a look at the link you sent me before changing to the Aardvark theme and my only guess is a problem with javascript not loading properly. Since this is the first time I've used the YUI styles, I'm not sure what that problem could be. What is the point release of your Moodle installation - 1.9.x - what is the x? Also, check your source code and make sure that all the javascript files linked actually exist.
If someone else is using the theme, can you confirm that it is working properly? This will help Robert figure out whether this is a problem on his server or a problem with the theme.
Lastly, I'd recommend reinstalling the theme. It's always possible that a specific file didn't get uploaded properly.
Robert,
Had exactly the same problem when I first started using Patrick's yui menu in aardvark - as Patrick suggests, in my case it was because I had not uploaded the js.php script into the correct folder.
Now have it working on moodle 1.9.7 (see roelmann.net ) and I know Mary Evan's demo site also integrates Patrick's menu into aardvark. (you can find lots of Mary's posts in the aardvark theme discussion)
Hope this helps
Richard
Had exactly the same problem when I first started using Patrick's yui menu in aardvark - as Patrick suggests, in my case it was because I had not uploaded the js.php script into the correct folder.
Now have it working on moodle 1.9.7 (see roelmann.net ) and I know Mary Evan's demo site also integrates Patrick's menu into aardvark. (you can find lots of Mary's posts in the aardvark theme discussion)
Hope this helps
Richard
Patrick:
I've tested this theme on my site, and also copied the menu idea onto the Aardvark theme, also on my site, and both work OK. I'm using Moodle 1.7...so it's not the version!!!
Sounds like it's a JS script error as both you and Richard point to.
Mary
I've tested this theme on my site, and also copied the menu idea onto the Aardvark theme, also on my site, and both work OK. I'm using Moodle 1.7...so it's not the version!!!
Sounds like it's a JS script error as both you and Richard point to.
Mary
Just wanted to amend my last post but missed the Edit window of opportunity!
My version of Moodle is 1.9.3+ (Build: 20081029) the reason I can't update is that my host company wont allow me to, or rather the server wont let me!
My version of Moodle is 1.9.3+ (Build: 20081029) the reason I can't update is that my host company wont allow me to, or rather the server wont let me!
Thank you, Mary.
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
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
Hello Richard,
I don't have time today to do any heavy troubleshooting. My general recommendation is to look at the downloaded code in menu.php and compare it carefully to your code. Small differences can create big problems.
Also, try pulling out the CSS from styles_menu.css (if that's what I called it) and pasting it to the bottom of Aardvark's main stylesheet. It may just be a problem with the cascade, and since I don't know the Aardvark code, it's tough for me to know.
I don't have time today to do any heavy troubleshooting. My general recommendation is to look at the downloaded code in menu.php and compare it carefully to your code. Small differences can create big problems.
Also, try pulling out the CSS from styles_menu.css (if that's what I called it) and pasting it to the bottom of Aardvark's main stylesheet. It may just be a problem with the cascade, and since I don't know the Aardvark code, it's tough for me to know.
Hi multilevel drop-down menu enthusiasts!
After hard weekend I think I found the reason of problems.
As I mentioned I use MOODLE 1.9+ because only this version supports resizing of SWF movies (there are bugs in newer versions...)
So I installed latest version of MOODLE and... multilevel drop-down menu worked.
Where was the problem? To my best knowledge in YUI library! The newest version of it solves the problem.
MOODLE 1.9+ plus newest YUI accepts combination Aardvark&BaseDropDown.
You can see it at http://e-budownictwo.info - this is my small sandbox...
Greetings
Robert
After hard weekend I think I found the reason of problems.
As I mentioned I use MOODLE 1.9+ because only this version supports resizing of SWF movies (there are bugs in newer versions...)
So I installed latest version of MOODLE and... multilevel drop-down menu worked.
Where was the problem? To my best knowledge in YUI library! The newest version of it solves the problem.
MOODLE 1.9+ plus newest YUI accepts combination Aardvark&BaseDropDown.
You can see it at http://e-budownictwo.info - this is my small sandbox...
Greetings
Robert
Hi Robert,
We were both working on the same lines I guess - also found yui library to be the solution to most of my problems with this and upgrading that worked (plus a small error in my css file
The fact that we were working on Aardvark and on Patrick's menu though has resulted in my me posting the solution on the aardvark discussion and you on here
Richard
We were both working on the same lines I guess - also found yui library to be the solution to most of my problems with this and upgrading that worked (plus a small error in my css file
The fact that we were working on Aardvark and on Patrick's menu though has resulted in my me posting the solution on the aardvark discussion and you on here
Richard
Patrick,
I think I may have discovered an error in menu.php in latest download.
I first came across it today in a copy of the theme I first downloaded when you posted this topic. In trying to validate the frontpage, of a new moodle site I set up HERE with this theme earlier this evening, I kept getting an error saying that there was a missing </li> is line 207 or something similar. I eventually tracked down the place where it should have been and added it, and BINGO my site validated.
I then went back to your demo site and checked the code via Firebug and saw that there was an </li> in place, so I had assumed I must be working on an old copy. So I downloaded a new copy from your blog, and after extracting the files to a brand new folder I examined the menu.php only to find it still has a missing </li>.
Here's a copy of the code with the </li> added in red.
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Second Menu</a>
<div class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">First Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Second Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Third Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Fourth Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Fifth Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Sixth Menu Item</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Third Menu</a>
Did I download the wrong file? Is there another updated file on another site?
It's a mystery!
Mary
I think I may have discovered an error in menu.php in latest download.
I first came across it today in a copy of the theme I first downloaded when you posted this topic. In trying to validate the frontpage, of a new moodle site I set up HERE with this theme earlier this evening, I kept getting an error saying that there was a missing </li> is line 207 or something similar. I eventually tracked down the place where it should have been and added it, and BINGO my site validated.
I then went back to your demo site and checked the code via Firebug and saw that there was an </li> in place, so I had assumed I must be working on an old copy. So I downloaded a new copy from your blog, and after extracting the files to a brand new folder I examined the menu.php only to find it still has a missing </li>.
Here's a copy of the code with the </li> added in red.
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Second Menu</a>
<div class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">First Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Second Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Third Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Fourth Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Fifth Menu Item</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Sixth Menu Item</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Third Menu</a>
Did I download the wrong file? Is there another updated file on another site?
It's a mystery!
Mary
There's only one place to download the theme. Not sure what the mystery is, but I've had a look at the file and you are right. there is a missing closing tag on that list item. Good eye. I'll fix it tonight.
The reason you probably didn't see it in my demo is because the demo does run a slightly modified earlier version.
The reason you probably didn't see it in my demo is because the demo does run a slightly modified earlier version.
Hi Everybody,
What I observed and learned using Patrick's menu can be simply summarized - it is very sensitive. It works on my 1.9+ MOODLE http://e-budownictwo.info/. Strange behaviour disappeared when I uploaded latest YUI library. While testing my own menu using different browsers (FF3.6, Chrome4.0, Opera10) it was displayed by IE8 in different way than I intended because > was missing in A tag! So be careful and precise and use specialized editors checking and validating HTML code.
Robert
What I observed and learned using Patrick's menu can be simply summarized - it is very sensitive. It works on my 1.9+ MOODLE http://e-budownictwo.info/. Strange behaviour disappeared when I uploaded latest YUI library. While testing my own menu using different browsers (FF3.6, Chrome4.0, Opera10) it was displayed by IE8 in different way than I intended because > was missing in A tag! So be careful and precise and use specialized editors checking and validating HTML code.
Robert
Not sure that's Patrick's menu being sensitive as much as there are issues with IE8. Had my own problems with this and discovered that Yahoo had to update yui (from 2.6) partly to deal with IE8 breaking websites that worked in every other browser, including IE7. While missing characters in tags are bound to cause unpredictable behaviour in any code, so yes, care is needed when checking and writing code - but to imply that a specialised editor is needed for all projects - even small scale personal ones that may be shared - is surely not necessary when even most basic text editors (I use gedit on ubuntu) provide formatting/colour coding for scripting which would highlight missing tags in many cases (the colours would be wrong on following script).
I have made use of Patrick's menu on my test site, and while it took some work to get what I wanted out of it (ie. altering css to fit with my site, adding code to provide different menus for different users, integrating it into another theme - aardvark) I can only say well done to Patrick for creating such a versatile base theme in the first place. At this point I should also point out that most of the additional work needed was down to me missing out tags in sections I was copying and pasting, and yes gedit did highlight that for me!!
Richard
I have made use of Patrick's menu on my test site, and while it took some work to get what I wanted out of it (ie. altering css to fit with my site, adding code to provide different menus for different users, integrating it into another theme - aardvark) I can only say well done to Patrick for creating such a versatile base theme in the first place. At this point I should also point out that most of the additional work needed was down to me missing out tags in sections I was copying and pasting, and yes gedit did highlight that for me!!
Richard
Hi Patrick and evrybody
I want to arrange the menus from right to left (like the picture that I attached)
Would you please guide me what should i do or add or change in the code?
best regards,
Moien
You could probably do this with just CSS in the template. Try: .yui3-menu-content li {
float: right;
}
float: right;
}
I don't know if this would work, as I haven't had time to test it, but you could try
dir: rtl (meaning direction = right to left) inside the main menu selector in your CSS file...like so...
#dropdown { dir: rtl}
Just a thought
Mary
dir: rtl (meaning direction = right to left) inside the main menu selector in your CSS file...like so...
#dropdown { dir: rtl}
Just a thought
Mary
Dears Mary, Johan and all
Thanks for your help. I do thats but I am not very Prof. in CSS.
I add #dropdown { dir: rtl} to "style.css" but nothing. (style.css is empty too when I download it.)
also I don't understand, where should I add the guide that " john St" said.
I add new picture to let you know what I need and search for it
in many countries the languages are right to left so I what to know in which lines of "styles_yui_menu.css" may i should changes and what is that changes.
Note:
I add these code to "styles_yui_menu.css"
.yuimenubaritem{
float: right;
direction: rtl;
text-align: right;
}
but part A and B and C not like the picture that I create in paint.
what wrong?
Thanks a lot for you help.
Thanks for your help. I do thats but I am not very Prof. in CSS.
I add #dropdown { dir: rtl} to "style.css" but nothing. (style.css is empty too when I download it.)
also I don't understand, where should I add the guide that " john St" said.
I add new picture to let you know what I need and search for it
in many countries the languages are right to left so I what to know in which lines of "styles_yui_menu.css" may i should changes and what is that changes.
Note:
I add these code to "styles_yui_menu.css"
.yuimenubaritem{
float: right;
direction: rtl;
text-align: right;
}
but part A and B and C not like the picture that I create in paint.
what wrong?
Thanks a lot for you help.
