Another improvement that can be made is to create a better rollover effect when the user hovers his or her mouse over any of the menu links. For instance, you can highlight the whole background rather than just the actual link. Below is an example of what can be achieved with this technique. Again, this is done entirely through the use of CSS.
To create this effect, it is normally a simple matter of adding a background to the .hover class in your user_styles.css file. But remember: because these links have a different style than the rest of the links in your theme, you need to apply this background hover style to the #menu class.
However, in this case, it is a little more complex, so I will outline the changes to the code. You will need to replace the CSS of all the #menu links with the CSS set out below:
#menu a:link, a:active, a:visted
{
font-weight:normal;
color:#ffffff;
text-decoration:none;
font-size:92%;
}
#menu {
padding-left:20px;
}
#menu a {
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
font-weight:normal;
color:#ffffff;
}
#menu a:hover
{
color:#000000;
background:#a1b2f0;
text-decoration:none;
font-weight:normal;
}
You will then need to remove the menu spacers in your menu.php file. These are :: and are at the end of the a href link code.
You menu should now look like the following screenshot:
When your Moodle theme and site is finished, you will probably find that more and more support organizations around your college or university will want a presence on Moodle. These can range from a library link to student support, employability, and so on. If this happens, you might find that there isn't enough room on your horizontal menu for all of these links. A way around this is to create categories and have a drop-down menu so that you can fit more links into the menu.
Have a look at the Newbury College theme on the main Moodle site as an example of this. They have created a nice, and sleek drop-down menu that works in most available web browsers. There are many resources where you can find the drop-down menu code—one such place is http://www.cssmenu.co.uk.
If you choose to use a drop-down menu that you have found on the Internet, please ensure that you test that it works in as many browsers as you can find.
Just choose the menu dropdown of your choice, and download the ZIP file. Once you have done that, copy the CSS from the CSS file, paste it in to your user_styles.css file, and save your changes. Do the same for the HTML file, but remember to add this code to the menu.php file.
It would be prudent to suggest that you should comment out the #menu link code that you added in the last task, so that if you have problems you can revert to it. The same goes for the menu.php and the HTML code that you added to it.
There will be an amount of CSS customization to complete, but it's a matter of experiment and poking around with the CSS that you have downloaded.