McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to Control Left Menu Drop-Down

The left menus use CSS to control the dropdown.  The CSS must be set manually for each page.  For example, when the home page of the FHS website is displayed, none of the drop downs are showing because the CSS display attribute is set to none:

div#left_nav ul div.left_nav2 {
    display:none;
}
div#left_nav ul div.left_nav3 {
    display:none;
}

You will find this code in the fhs.css file. The page will then display as follows:

FHS Home page image

Now when you want to display a drop down for a particular page, what you need to do is set the display to block in the head section of the page.  For example, the FHS fast facts page is displayed below with the About Us drop down displayed, the About Us bolded, and the Fast Facts showed with a gray background. The class names match the class names defined in the left_nav.lbi file that contains the left menu.  Here is the CSS that is between the <head></head> tags in the facts.html file:

<style type="text/css">
div#left_nav ul li.about_us div.left_nav2 {
    display:block;
}
div#left_nav ul li.about_us {
    font-weight:bold;
}
div#left_nav ul li.about_us div.left_nav2 li.facts {
    background-color:#CCCCCC;
}
</style>
FHS Fast Facts page image

If you do a show source on any FHS page and look in the head section, you will see how each one handles the drop down.  They should all be the same as this example.

This method of controlling drop down is not ideal but it works. A javascript menu has the advantage that it can be controlled independently. However, it has the disadvantage that search engine do not crawl javascript links. This disadvantage can be overcome by using a site index of the site that uses html links, and by creating an XML site map and submitting it to the search engines.