Creating Search Engine Friendly Drop-down menus using CSS

Share

JavaScript drop-down menus are employed by many medium to large size web sites as primary navigation tool for site visitors. Drop-down menus offer many advantages. They are already familiar to computer uses who encounter them in almost all mainstream software. By collapsing when not needed, the menus take up little screen space – yet offer a wealth of options when the user hovers over one of the visible categories.

Technically, the use of JavaScript to code drop-down menus is problematic. While some code can be relegated to an external JavaScript file, much JavaScript usually ends up bloating HTML pages. In most cases, search engine crawlers are not able to follow the JavaScript navigation links, leading to poor search engine crawling and visibility.

With the diffusion of modern CSS level 2 compliant browsers such as Netscape, Mozilla, Opera, Firefox and Safari, the use of CSS only drop-down menus has become possible. Once implemented, they are very easy to modify should site navigation needs change. Use of external CSS files to style menus results in smaller page sizes translating into a faster site. Search engines are able to crawl CSS styled navigation lists unlike their JavaScript ancestors.

Even better news is on the horizon: IE 7 supports the required CSS functionality necessary for CSS drop down menus (hover on lists). Other CSS support in IE 7 isn’t too bad but is still several years behind browsers such as Opera and Firefox. As an example, negative margins still don’t seem to work in nested lists (the current menu tab in this site does not have a line under it if viewed using a good browser; IE 7 will display a line, as did earlier IE versions). We also noted that the max-width attribute doesn’t seem to be supported. Users should migrate to a modern browser such as Firefox or Opera due to belated, mediocre web standards support in IE.

Required CSS drop-down menu functionality can be simulated in the antiquated IE 6 and earlier using csshover.htc. While this file does add overhead the first time a user visits your site, it will only need to be loaded once – and only for old IE browsers if you code your site properly.

A sane approach to implementing CSS is to first create a master CSS file compatible with all of the mainstream web standards compliant browsers (Firefox, Opera, Safari). IE defects can then be addressed by using an additional CSS file after the main css file, depending on the IE version. Any entry in the additional file will override the main standards, taking advantage of the cascading aspect of CSS.

The following logic loads a master style sheet “sito.css”. Using IE specific conditional comments, it also loads the file “ie6.css” for any IE browser through version 6. In addition to fixing IE CSS problems, this file loads the necessary javascript htc file necessary to emulate missing CSS functionality. For IE 7 or higher, ie7.css will be loaded. The .htc file is not referenced as it is no longer needed.

<link href="/c/sito.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />
<!--[if lt IE 7]>
<link href="/c/ie6.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />
<![endif]-->
<!--[if gte IE 7]>
<link href="/c/ie7.css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />
<![endif]-->

The elegance of this approach is that users with modern browsers (IE 6 was released 5 years ago based on even earlier technology…) aren’t burdened with extra baggage needed to support IE < 7.

Specific implementation instructions can be found consulting alistapart resources as well as Christopher Schmitt’s CSS Cookbook (O’Reilly Media, 2004).

A note about CSS and hidden text is in order.

Search engines have made it clear that the use of hidden text to manipulate a site’s ranking is grounds for removal from their indices. Use of CSS to hide text on your site may trigger a manual review by a search engine. Make sure your site has nothing to fear from an audit! Some companies, such as BMW have had to learn the hard way.

Similar Posts:

• How do search engines, such as Google, handle JavaScript and CSS?
• Keep sections of web pages out of Yahoo! with class=”robots-nocontent”
• Web Analytics and the Missing Right Clicks Conundrum
• Google Crawling and Execution of JavaScript: where are we at today?
• Comparison of Google Analytics / Urchin Tracking Scripts

If you haven't already, you might subscribe to my feed by Email, RSS feed and/or follow me on Twitter, which is updated on a more frequent – and more meaningless – basis. Finally, if you're a Sphinn user, Sphinn love is welcome :-). Thanks for visiting!

Share