Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Help with Smooth Navigational Menu (v1.51)

  1. #1
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Smooth Navigational Menu (v1.51)

    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

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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.
    Thanks,

    Bud

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    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:
    Code:
    <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.
    Last edited by molendijk; 12-22-2012 at 12:47 AM.

  4. #4
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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).
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-23-2012 at 08:34 AM. Reason: add thoughts on fitting to window
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    Last edited by jscheuer1; 12-24-2012 at 04:43 PM. Reason: update attachment, add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Help: Smooth Navigational Menu (v1.5)
    By Li-Ann in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-30-2012, 02:32 PM
  2. Smooth Navigational Menu
    By jojom in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-23-2011, 07:30 AM
  3. Help with Smooth Navigational Menu
    By kwat in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-19-2011, 11:28 AM
  4. Smooth Navigational Menu (v1.5) + IE6
    By Marilex in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-14-2011, 05:26 AM
  5. Smooth Navigational Menu (v1.02)
    By browndog23 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-18-2009, 08:24 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •