PDA

View Full Version : SEO friendly multi-level (tree) menu



Skeewe
02-25-2008, 02:56 AM
Anybody has one to recommend ?

Thanks

agua
02-25-2008, 03:30 PM
You should find something at either of these 2 sites:

http://css.maxdesign.com.au/listamatic/

http://css.maxdesign.com.au/listamatic2/

jbladeus
03-01-2008, 03:07 AM
You can also google for "suckerfish" and "son of suckerfish".

KLB
03-01-2008, 11:16 AM
If you want to learn to build your own DHTML menus you can look at my source code at: http://environmentalchemistry.com/IE7HoverGlitch.html

The primary concept behind nested menus is to use nested lists (e.g. <UL>) and then use CSS to position and turn on and off sub-lists. You can see what I mean by turning off/on CSS in your browser when loading the demonstration page above.

My advice would to build such menus using pure DHTML menus and test against ONLY Firefox and Opera while developing the menus (make sure to validate your code against the W3C HTML/CSS validators). Then once the menus work correctly (sans JavaScript) in Firefox and Oper you can add in the necessary JavaScript "onMouseOver" and "onMouseOff" events to allow MSIE to turn on and off sub menus as MSIE does not properly support the "hover" pseudo class.

The JavaScript I use for the demonstration page I linked to above can be viewed at: http://environmentalchemistry.com/JavaScripts/TopMenu.js

Since the demonstration page is to demonstrate MSIE7's improper handling of the hover pseudoclass, the JavaScript excludes MSIE7 from using the JavaScript styling routines. If, however, one were to remove the MISE7 exclusion from the JavaScript the demonstration menu would work perfectly in MSIE via the JavaScript instructions.

The idea behind the menu was to make it as JavaScript independent as possible and any browser that properly supports the hover pseudoclass (e.g. Firefox, Safari & Opera), would still be able to use the menu even if JavaScript is turned off. My hope is that MSIE8 finally fixes MSIE's issues with the "hover" pseudoclass.

What I find with most "canned" DHTML menus is that they make things unnecessarily complex. Keeping your menu structure simple (e.g. nested UL lists) and properly using CSS will make your menus easier to maintain and more reliable.