Help with Smooth Navigational Menu (v1.51)

[anasttin]

1) Script Title: Smooth Navigational Menu (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I've been using this menu on my website for a long time without hiccup but have had to add another 1000 different unique menu items and the menu seems to fail half way down. In total, my menu has only 4 levels but 1697 unique menu destinations. Is there a limit to the number of levels and unique menu destinations this system can support? If there is, I'll need to replace this menu with something else so would love to hear anyone's suggestions for how best to organise the 9700 products I have on my site.

Many thanks for all your help and suggestions in advance.

Ana

[ajfmrf]

Well,people will need to see your website-please post a link to it.

This will let everyone see it and possibly help you out.

[molendijk]

Any dhtml menu containing such an enormous amount of items is likely to crash.
You could try to use an iframe containing a sitemap (something like this; click on show video menu) or a selectbox navigation menu. Example:

<select style="font-family: verdana; font-size: 12px" onchange="window.open(this.options[this.selectedIndex].value,'_top'); selectedIndex=0">
    <option value="" selected>Navigation menu</option>
<optgroup label="First Group">
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</optgroup>
<optgroup label="Second Group">
    <option value="http://www.mesdomaines.nu/music">Classical music</option>
    <option value="http://www.mesdomaines.nu/lesserknownclassicalmusic">Lesser know classical music</option>
</optgroup>
</select>

In this example, the optgroups only contain a limited number of navigation options. But it seems there's no limit to the number of options for an optgroup.
Of course, you would replace the values for the options with links to pages of your own site.
Arie Molendijk.

[anasttin]

Hi all,

I really appreciate your help Bud, Arie and anyone else who may help.

As requested, here is a link to my site with only the 600 odd menu options that works fine:

camp-hunt-shoot.com/index.htm

And here is a link to the page I built to replace it, with the 1600 menu options that doesn't work:

camp-hunt-shoot.com/indexb.htm

Obviously this later page isn't working because it doesn't show a heap of extra menu options and they also become unclickable at the bottom.

Am I doing something wrong, or is it some limitation of the script?

Thanks guys

Ana

[Beverleyh]

1700 menu items sounds very intimidating. Maybe you are over-granulating your menu category breakdown and should consider cutting it off a sub-category sooner? I have to wonder who is going to come to your site and take the time to absorb that many menu items before deciding on where to go.

A website menu should represent the structural breakdown of your site and give visitors quick visual cues to where they want to go next. It doesn't necessarily mean that every page/product has to be included there (and its probably better that they aren't).

For impatient, goal-driven customers, the process of learning your site structure while deciding where to go should be fast and easy, and as designers we need to facilitate this as best as possible - give general direction early rather than overwhelm users with too many choices upfront.

While it may seem helpful to lay out all the menu options at the start, ive found (from observation, discussion groups and user surveys) that the best menu feedback comes (particularly on large sites) from more general categorisation. As a new visitor, coming to any new website is a bit of a mental challenge - learning a page layout AND content architecture can be very draining - so think of ways to ease this burden. If it helps, just consider what it's like when you visit a new holiday destination - most likely when you find yourself at a road sign it simple says something very brief such as "Beach >", and underneath "< Restaurants", and then after choosing between 'tan' or 'stomach' you head in your chosen direction and you see another signpost which breaks things down a little more, maybe "Fast Food" and "Fine Dining". Then after making that choice you find yourself walking along the road with McDonald's, Subway and KFC. My point is that too many choices too early can put people off because it over-complicates the decision making process.

If I were you I'd consider grouping similar items to condense your menu, dropping the last sub-category (or 2) and instead provide a landing page with product thumbnail images. So for example, I want to buy a flashlight for camping so I visit your website, go to the camping section on your menu, then go to "lights" and then I get to a page with product images where I can choose my flashlight. You've cut out several menu buttons (making your menu less intimidating to me, the impatient visitor - I just want my torch!) and provided a familiar looking product listing (most product websites use this method so it fosters a comforting sense of familiarity in your visitors).

[djr33]

Having a menu that relies on hover effects but is also too large for the average height of a browser window (requiring scrolling) is simply a terrible idea-- when I scroll to the next item, the menu disappears because my cursor has moved. I mean this constructively-- I hope it helps. But as-is, your side is a significant challenge to navigate on the side.

If you do need to have everything in one menu, consider accessibility-- perhaps having click rather than hover would help. But I agree with Beverley here that you need to think about how to make more subgroups (and intermediate pages).

[jscheuer1]

The script does have a limitation in that it parcels out z-index values for the headings and sub-headings as 100 minus the index of the heading. So if you have more than 100 headings and sub-headings, all of them over 100 have a negative z-index so do not appear.

I did a minor rewrite that counts the number of headings and sub-headings and adds 100 and uses that value to subtract from. That way the script never runs out of positive z-index values.

In other words, use this slightly modified version of the script and all should be well, at least as far as all of the items showing up and working (right click and 'Save As'):

ddsmoothmenu.js

The browser cache may need to be cleared and/or the page refreshed to see changes.

As for all of the items not fitting in the window for some of the menus, perhaps those menus could be wrapped into columns. There are other menus that do that though, so perhaps one of those might be more suitable.

Or, as I think Berverleyh has mentioned, rethink how they're organized so that there are never more items on a particular sub-menu than could be reasonably expected to fit in the window.

One thing I notice though is that you can scroll the longer lists of items with the mouse wheel, so even though you cannot see all of them at once, the functionality of the menu remains, albeit in a little less than optimal way. And that might be impossible or at least very difficult to deal with on some devices.

[anasttin]

Hi John,

I just tried your new version of the javascript file and it worked an absolute treat. You really saved my bacon and I'm really, really appreciative of your efforts. You are AWESOME!

Beverley and Daniel... I really appreciate your advice. I know you're both absolutely right, but re-categorising over 9000 parts is an absolute bear of a job that will have to wait the spare time that I wonder if I will ever have.

Daniel, I really liked your advice to have the menu as a click rather then hover menu but am not sure what I need to change to make that happen. Do you know how I change the code to make that happen? If not you, maybe John could help with this?

Again, I really appreciate all your help.

Thanks

Ana

[djr33]

Unfortunately it would require significantly changing the script. I'm not sure exactly how much work it would be. Another alternative to consider would be to add a delay before the menu disappears, perhaps a 1 second delay so that if you are scrolling around a bit it isn't a problem.

In the end, the best option is for you to streamline the menu whenever you get a chance. If you're happy for the moment that's fine, but keep in mind that you can improve the site by reorganizing the menus as needed.

[jscheuer1]

I've updated the script to include an option to set the method "toggle" (which is click) or "hover" (which is mouse over/out). It defaults to "toggle". And if the script detects a touch device, it defaults to "toggle" regardless.

This means you could keep the horizontal menu as "hover" activated:

<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
method: 'hover', //'hover' (mouseover/out) or 'toggle' (click), defaults to 'toggle'
classname: 'ddsmoothmenu', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

But I advise against that in this particular case, as with the catalog menu being "toggle", it would be confusing to some. I included the option though because this has been requested in the past and would work out well for folks having all/only "hover" activated menus on a page that want to allow the script to automatically detect touch devices to offer those browsers the "toggle" version.

Right click and 'Save As':

ddsmoothmenu.js

I rethought the z-index issue after noticing that it didn't seem to matter whether the z-indexes were set in ascending or descending order, or even just a fixed value. So I decided to add that as a configurable option fixed value (zindexvalue near the top of the external script with the other configurable options). That way it can be as high as it needs to be to cover other positioned elements if any that might be stacked in the same spot as a drop down/fly out. This is a common requirement for menu scripts and too often is not easily configurable. Now it is for this menu. It can also if required (like in the case of two menus needing the same space at some point) be set as an option individually for each init.

Two more added options:

globaltrackopen - If set to true as it is in the new script, all menus on a page will close previous whenever any menu opens a new menu. Set it to false to have menus act independently in this regard. Has no effect unless 2 or more menus on a page are using the "toggle" method or unless the next option which requires it is used.

closeonnonmenuclick - Also set to true in the script. What this does is if there are one or more "toggle" activated menus on the page and a menu is open and the user clicks anywhere outside the menu, the menu closes. Requires globaltrackopen true.