Horizontal Menu in osCommerce

I recently found a new contribution that creates a horizontal menu in osCommerce, it can be found here. I tried an install, and here is how it looks;

Ugly in the extreme, and simply does not work – I didn’t have the time to debug it unfortunately. What is supposed to happen is a mouseover of the top category (eg hardware) shows a list of subcategories underneath. This list actually does show, but as soon as the mouse is moved towards the list (in order to click a subcategory) the list disappears.

Doh. I’m pretty sure I followed installation instructions properly.

So, I spent a bit more time hunting and came across this sexy dropdown menu. With a bit of trickery I managed to get it working in osCommerce;

Which looks much better and appears to work. Tested so far in Internet Explorer 8 and Firefox 3. More tests to complete before I show what/how to do it.

8 Replies to “Horizontal Menu in osCommerce”

  1. sexy, yes, but too many clicks to my liking, I prefer to see the submenu on hover, and I’m afraid the little triangle might be missed by my not so savvy customer base

  2. Carine:

    If you browse through the comments, it seems several people had ideas regarding adding hover functionality to the menu.

    John

  3. Carine – that’s an easy change to make; use hover in the jquery code; $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

    John – thanks for your comment.

  4. Gary, I looked at this as well. The reason the list disappears when you move to the subcategory, is because
    1) there is a significant gap or whitespace – between the category and the subcategory. The menu is simply doing what it is supposed to do when you mouse off of the menu, ie collapse. In other words, to get to the subcategory you have to mouse off the menu. This is a matter of poor styling on the part of the menu author, and can be fixed in the menu’s stylesheet by taking out the margin or padding .
    2) Perhaps you didn’t get the javascript set up. The javascript delays the collapse, so with the javascript you have enough time to mouse over the gap to the subcategory before the menu collapses.

  5. Hi Jason – pretty sure I made the correct changes, but thinking about it, I would say that the gap is what is causing the problem – nice catch. I didn’t have the time to play with it.

  6. Hi is there any chance you are going to post the code for the sexy menu for osc? I have been searching for ages for a menu like this.

  7. Wouldn’t have thought so, as I mangled the code so it needs cleaning up. If you are willing to “sponsor” that then it can be done. Email me if so.

Leave a Reply

Your email address will not be published. Required fields are marked *