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
Legend: 
Download
Report
If you have an SSL cert when your browser is in a https:// the category box points to https:// even though it shouldn't for most shops. This keeps this menu to http://
in /includes/classes/jcssmenu.php search for tep_href_link (line 94), look at the end of that line, it has $request_type, change that to 'NONSSL' (with the quotes).
Thanks to devosc for the fix.
[1.11]
- added javascript highlight menu path to the current moused over option.
*Note that it seems that the web page must be "well formed" for the hover highlights to be
correctly displayed in IE.
[1.1]
- added css rule for css compliant browsers that will highlight the menu path to the current
moused over menu option.
- updated classes/jcssmenu.php in general, but mainly b/c the javascript hide tags were not being
translated by babelfish.
- added z-index to the li tags.
- moved and updated the javascript that determines whether an li tag is a submenu class, but is left
commented out since the php script determines this also....
[1.09]
- Updated boxes/categories.php and classes/jcssmenu.php to now bold the current cPath, this
can be changed via the .select css clas in jcssmenu.css
- Corrected the caching method AND have updated the installation instructions, previously
only two amendments were being made, there are 8 in total.
- Add category count to menu - to disable the category count in classes/jcssmenu.php set
$show_category_product_count to false;
[1.08]
- A more efficient initialization algorithm
[1.07]
- In Internet Explorer if the category name is very short then the menu option is also short,
stub like, this update adds a minWidth option to the jcssmenu.js script.
[1.06]
- corrected visual difference in Opera, should now look the same in the browsers
tested.
[1.05]
- removed the need to determine browser from the javascript.
For the most part it should now be ok... Having spent hours looking at code
in two different documents, one being a plain sample xhtml page and the other
being the oscommerce index page, there is somethingcausing the two to not display
the same - this so far is now only noticeable in Opera.
Please leave any comments or browser observations here:
http://forums.oscommerce.com/index.php?showtopic=151995
[1.04]
- previous update caused child menus in I.E. to have the same width as its parent,
so had to work around (out) both the anchor tag fix and the LI width.
Unfortunately this has caused a browser detection test in the javascript for
I.E.
[1.03]
- fixed the anchors width/padding, also tested in Netscape 8.
[1.02]
- fixed bottom border issue with Opera browsers, changed in ext/jcssmenu.js
- tried to improve the padding/width of the anchor tags in ext/jcssmenu.css
but if it is made to fit correctly in Firefox Opera then comes up short. This
being in regard to the min-width which Opera seems to need.
[1.01]
-corrected catalog/includes/classes so that the closing </span> tag for
the 'submenu' in the buildBranch function.
- corrected installation notes for the clear cache should of been osC_JCSSMenu
instead of osC_Categories.
- revised jcssmenu.css so that I.E should now be ok, I don't think that there
is much that can be done about the width/padding on the anchors while trying to
maintain cross broswer compatibility etc...
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
Add file to this package