DHTML menus.

[Generalissimo]

Does anyone use quite complex DHTML menus like those from http://deluxe-menu.com on their websites? I'm considering doing it. How will visitors react to them?

[KLB]

I use very complex DHTML drop down menus on my site http://EnvironmentalChemistry.com. I have no idea how people react to them.

On Firefox, Opera, Safari and other "fully" CSS compliant browsers the menu uses the :hover pseudo class to activate sub-menus, as no version of MSIE fully supports the :hover pseudo class properly (even IE7 has serious issues) I use onmouse events to trigger and deactivate sub-menus in IE.

[Blue Cat Buxton]

Surley the main purpose of the menu is to get visitors to where you want them to go. If it needs to be complex to achieve that goal, then go with it, if not keep it simple.

Although they look pretty, how SEO friendly would the deluxe menus be?

[KLB]

In my case my DHTML menus are not search engine accessible as they are generated by an external JavaScript file that is in a folder SEs are not allowed to index. I use three primary navigation systems. First is a series of index pages with my root page http://EnvironmentalChemistry.com/ linking to all primary and some secondary pages. I then use section indexes that will link to primary and/or secondary pages for their section (e.g. main periodic table of elements page links to individual element pages). My second navigation system is a vertical sidebar navigation, which is on every page. This sidebar navigation links to all primary pages (e.g. core articles), but not any secondary pages (e.g. individual element pages). With either of these first two navigation system, a user or search engine can get to any page on my site within three hops from any page and can get to all of the most important articles within one hop from any page.

My third navigation system, which is my DHTML menu is entirely designed for users. Like the other menu systems it links to all of the primary pages and many of the secondary pages. In addition it links to all of my career pages and has two drop down menus dedicated to my latest articles and latest blog posts. It also has one drop down menu dedicated to subscribing to my feed syndication options, which is context sensitive depending upon what part of the site the individual is on.

The reason I use an external JavaScript file to generate my DHTML menu via a write statement even though it is technically a pure DHTML menu is to reduce download requirements. If the menu was pure HTML written into the main source of my pages, it would add another 75kb of HTML to each web page. By storing the menu in an external JavaScript file that converted repetitious parts of the HTML into single character variables, functions and loop statements, and by using GZIP compression I was able to get the bandwidth requirement for this menu down to under 10kb. Also since it is an external JavaScript file it only gets loaded once by a user's browser per session, which further streamlines the downloading of my site. Even if a user hops to my blog, which is on its own subdomain and/or my cobranded pages on CareerBuilder's site, the user is still using the same JavaScript file and thus doesn't have to redownload this menu when hoping between the domains. For me the real beauty of this menu is that I can easily update my menus on my cobranded CareerBuilder pages without having to submit design change requests.

[Blue Cat Buxton]

Its a very elegant solution, thats for sure Ken. Works for you, your visitors and the search engines

[priji]

DHTML menus with classic graphical NavBars.

http://www.xara.com/products/menumaker/ plz visit.