osC_JCSSMenu MS2-2.2

for osCommerce Online Merchant v2.2

Introduction ------------ After *many* hours of battling with CSS rules and DOM objects this menu has been designed as an alternative to the JSCookMenu (or osC_Categories MS2-2.2 contribution). Because the markup is a nested set of un-ordered lists this menu is Search Engine Friendly. However for the best effect the user should have javascript enabled. but if they do not and are using a CSS-compliant browsers, the CSS rules will show the first three sub-menu levels. Unfortunately for Internet Explorer users with javascript disabled they will currently only see the main (top level) categories shown in the categories box. It might be possible to use the <noscript> tag to include some overriding CSS Rules so that the un-ordered list would then show nicely its submenu options inside the categories box, but I haven't tested this. Or some other means of accessiblily may need to be provided. I'm hoping that others will be able to help out with further development, such as looking into the above mentioned noscript css rules and also getting together a php class menu builder which could then also be used in the admin. Please test menu first to see whether it will suit your needs prior to installing on your live production site. You can see a working demo here: http://www.devosc.com/kb/ So far I have tested this menu in FireFox 1.0, Epiphany 1.0.7, Konqueror 3.2.1, I.E. 6 SP1, Opera 8 The jcssMenu functions well in all of them, however Opera does not support the last-child style selector and so child menus in Opera do not have a bottom border, and trying to accomodate this in the javascript seems to be too resource intensive - or I just haven't had the time to find the most optimal method without going through loops etc... What makes this menu so special ? --------------------------------- Firstly a timer has been added so that if javascript is enabled then the menus will not dissapear as soon as the mouse moves away from them unlike the css reliant (non javascript) version. Also, after some serious understanding of CSS I finally managed to provide each submenu the ability to have its own size, normally (since this is an un-order list markup) child containers would inherit their parents dimensions. But this causes problems if one of the menu options has a long text length which would cause (require) the entire menu system to have the same size child menus. But by floating each LI tag they can take their own shape, however their parent UL container then loses its dimensions, so while looping through in the javascript to add the mouseover functions some extra code exists which determines the maximum offsetWidth for each child menu and sets the width of each LI to the maximum width which reconstructs the rectangular container. Hence it is best if the user has javascript enabled (which they would need if they want to access a deeply nested categories). For those interested in CSS visit http://www.csscreator.com The aim of making this contribution publically available from the osCommerce servers is so that fellow contributors can help progress this application further. However, I would mention that it costs time and resources to develop contributions, for which donations are appreciated. devosc, http://www.devosc.com

Files