PDA

View Full Version : Help with Smooth Navigational Menu (v1.51)



anasttin
12-21-2012, 10:32 PM
1) Script Title: Smooth Navigational Menu (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.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
12-21-2012, 11:27 PM
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
12-22-2012, 12:12 AM
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 (http://www.mesdomaines.nu/music/music.html); 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
12-22-2012, 09:22 PM
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
12-23-2012, 08:02 AM
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
12-23-2012, 08:06 AM
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
12-23-2012, 08:14 AM
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'):

4857

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
12-23-2012, 08:31 AM
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
12-23-2012, 08:55 AM
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
12-23-2012, 04:13 PM
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':

4866

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.

anasttin
12-23-2012, 07:14 PM
Hi John,

Again, I really appreciate your help with this.

I copied the new "ddsmothmenu.js" file into the same folder as my index.htm file, and inserted the snippet of script you posted over the old snippet I was using and gave it a go (completely unchanged), but it doesn't click through to the destination pages any more. Is there a step I'm missing?

Thanks a heap.

Ana

jscheuer1
12-23-2012, 08:16 PM
The demo page (indexb) is not working at all like you say. Anyways, you cannot activate a sub menu on click and navigate to a link at the same time. But you're right, even the links that do not open a sub menu are not navigating to their respective pages. In trying to get it to work properly as a folding and unfolding menu activated on click, I completely missed that part. I suppose the most important part. :o

It shouldn't be too hard to work out. But I have to run right now. I'll get to it later today, tonight or tomorrow.

By the way, I didn't mean for you to use:


method: 'hover', //'hover' (mouseover/out) or 'toggle' (click), defaults to 'toggle'

In the init, just that you could. I think having two different styles of menu on the same page (one hover the other click) that otherwise look about the same would be too confusing to your clients.

jscheuer1
12-24-2012, 04:17 AM
.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

This:


<script type="text/javascript" src="ddsmoothmenu.js"></script>

should be:


<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

And this:


<script type="text/javascript" src="scripts4-hunting-supplies-rifle-scopes/crawler.js"></script>

should be:


<script type="text/javascript" src="crawler.js">

/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

OK, fixed I think:

4865

Let me know. And if there are problems, please leave it up with the live demo (indexb) so I see what you're talking about.

I've also updated the previous post with a link to this update as the previous version clearly didn't work. While I was at it, since the update comments in this new version point to that post, I added additional explanations of features. For the best understanding of those features, refer back to that post:

http://www.dynamicdrive.com/forums/showthread.php?72449-PLEASE-HELP-with-Smooth-Navigational-Menu-(v1-51)&p=288466#post288466

anasttin
12-26-2012, 01:26 AM
Hi John,

Sorry about the delay in replying but Christmas has had me running around like a headless chicken.

I tried that new script and it's awesome. Thank you so much.

The ONLY thing stopping me from using it is that, as the menu folds out, it appears UNDER the images in the left banner so you can't read the start of the menu items. It's funny because the original "hover" version of the script folds down OVER the images which is fine because nothing is obscured. I've attached a screen shot so you know what I mean.

Is that an easy thing to fix?

Also, I didn't realise I had to keep the script credit but have now reinstated it.

Thanks again and I hope you had a great Christmas.

Ana


4867

jscheuer1
12-26-2012, 03:13 AM
It's not doing that on my mock up. Whatever is causing it (probably a z-index issue), can probably be fixed easily. But to be specific, I would have to see it:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

BTW, I'm continuing to work on the script and am considering offering it to DD as an update. When that's finished, regardless of whether or not I submit it, you would probably be better off with the completed script.

anasttin
12-26-2012, 08:29 PM
Thanks John. I'll definitely use your completed script once you submit it to DD.

I uploaded the page with the problem to the following URL so you can have a look at it:

http://www.camp-hunt-shoot.com/indexb.htm

As always, I much appreciate your help.

Ana

jscheuer1
12-27-2012, 09:30 AM
It's this section of the HTML code that's the problem:


. . . ef="categories4-hunting-shooting-camping/tactical-tactical-uniforms-combat-shirts-1.htm">Combat Shirts</a>
<li><a href="categories4-hunting-shooting-camping/tactical-tactical-uniforms-tactical-pant-1.htm">Tactical Pant</a>
<li><a href="categories4-hunting-shooting-camping/tactical-tactical-uniforms-tactical-shirts-1.htm">Tactical Shirts</a>
</ul></ul>
<p align="center"><a href="product-catalog-reloading.htm">Problems with the catalogue in your browser? Click here for an alternative</a><br>
<img src="siteimages4-hunting-shooting-supplies/shooting-hunting.jpg" alt="shooting" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/camp-binoculars-scopes.jpg" alt="hunting" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/campsite-shooting-hunt.jpg" alt="shooters supply" width="200"></p>
<p>&nbsp;</p>
<p><img src="siteimages4-hunting-shooting-supplies/hunting-shooting-shooter.jpg" alt="reloading supplies" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/scope-reloading.jpg" alt="supplies and equipment for shooting" width="200"><br>
</p>

<img src="siteimages4-hunting-shooting-supplies/shooting-binoculars-optics.jpg" alt="camping in Australia" width="200">
<p><br style="clear: left">
</p></div> </td>
</tr></table>

That last li (highlighted) isn't seen as ending until the closing parent </div> tag at the end (also highlighted). That </div> tag is the close of the menu. It should probably be (highlighted </div> moved to its proper place, missing closing tags for the li and ul added in red):


. . . ef="categories4-hunting-shooting-camping/tactical-tactical-uniforms-combat-shirts-1.htm">Combat Shirts</a>
<li><a href="categories4-hunting-shooting-camping/tactical-tactical-uniforms-tactical-pant-1.htm">Tactical Pant</a>
<li><a href="categories4-hunting-shooting-camping/tactical-tactical-uniforms-tactical-shirts-1.htm">Tactical Shirts</a>
</ul></ul></li></ul></div>
<p align="center"><a href="product-catalog-reloading.htm">Problems with the catalogue in your browser? Click here for an alternative</a><br>
<img src="siteimages4-hunting-shooting-supplies/shooting-hunting.jpg" alt="shooting" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/camp-binoculars-scopes.jpg" alt="hunting" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/campsite-shooting-hunt.jpg" alt="shooters supply" width="200"></p>
<p>&nbsp;</p>
<p><img src="siteimages4-hunting-shooting-supplies/hunting-shooting-shooter.jpg" alt="reloading supplies" width="200"><br>
<br>
<img src="siteimages4-hunting-shooting-supplies/scope-reloading.jpg" alt="supplies and equipment for shooting" width="200"><br>
</p>

<img src="siteimages4-hunting-shooting-supplies/shooting-binoculars-optics.jpg" alt="camping in Australia" width="200">
<p><br style="clear: left">
</p> </td>
</tr></table>

That will change the appearance of the link:


<a href="product-catalog-reloading.htm">Problems with the catalogue in your browser? Click here for an alternative</a>

But that can be styled separately to look however you want it to.

Once the menu is properly closed, it will no longer lose the stacking competition to those images.

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

anasttin
12-28-2012, 11:47 PM
Hi John,

It all works great now and I really appreciate your help.

I think you're awesome!

Thanks

Ana