Topic: Best Nav Menu Structure

Hey there Godbit peeps,

Anyone have any great recommends or examples of how to handle a medium to large nav menu?
I am interested in hearing folks thoughts on what makes a good nav menu.  What's the most usable?
Does anyone have any opinions about show/hide menus that use javascript collapsing?  Whatabout the show/hide
imagery for that kind of menu, ie: what image for show, what image for hide?

Examples would be great.

Matthew

Re: Best Nav Menu Structure

Matthew -

artiswork wrote:

Anyone have any great recommends or examples of how to handle a medium to large nav menu?  I am interested in hearing folks thoughts on what makes a good nav menu.  What's the most usable?  Does anyone have any opinions about show/hide menus that use javascript collapsing?  Whatabout the show/hide imagery for that kind of menu, ie: what image for show, what image for hide?  Examples would be great.

It's difficult to make a recommendation without more information about the general site design.  Each site's navigation is individual and dependent upon several factors.  In general, I've found that vertical is often better than horizontal for displaying several items up front.  Better to avoid javascript and flash to have the maximum accessibility, relying instead upon CSS to make it cool, which will degrade better for those who can't see that.  If the design calls for a horizontal orientation, tabs are very popular and there are numerous tutorials and wizards available for generating them.

Can you give us an idea of what direction your design is heading in?

That’s my 2¢.  :^{>

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Best Nav Menu Structure

A cool example can be found at http://www.alwaysbeta.com/
Look at the side naviation, especially the one titled "Navigate Post."
It has tabs on the section, that uses AJAX to give different Navigation options.
If you search their website, I think they offer a tutorial on how to make one but I couldn't find it quickly.

This probably won't work for the main navigation, but it should offer some great ideas. The AlwaysBeta site has a great layout as well.

He will return...

Re: Best Nav Menu Structure

maspick,
Thanks for your input, and you too, mithrill.

To flesh this out a bit further.  The site is designed.  It is not mine to redesign, but I have some flexibility about how the nav menu gets layed out.  It is a vertical menu displayed in the left hand sidebar.

Each "section" has between 5 and 15 items sometimes nested, sometimes not.

I am trying to figure out a method for the longer menus (ie : 15 items) to be displayed in a shorter (less scrolling) way.  If indeed that is necessary?

I personally like the javascript option of show/hide, though I'm not sure that all users know how to use it well?  Is a short menu more important than a Extremely Easy to understand/use menu?

The menu we have now is very similar to this one : here in the sidebar.  (not the horiz. menu)

Let me know if this kind of info helps.

Thanks,

Matthew

ps. I appreciate the feedback.

Last edited by artiswork (2006-03-28 15:42:53)

Re: Best Nav Menu Structure

Matthew -

artiswork wrote:

To flesh this out a bit further.  The site is designed.  It is not mine to redesign, but I have some flexibility about how the nav menu gets layed out.  It is a vertical menu displayed in the left hand sidebar.

Narrowing things down is good. smile

Each "section" has between 5 and 15 items sometimes nested, sometimes not.  I am trying to figure out a method for the longer menus (ie : 15 items) to be displayed in a shorter (less scrolling) way.  If indeed that is necessary?

I don't remember the original source, but I've tried to live by the 3-click rule - if a person can't get to something within 3 clicks, it's buried too deep and the search will more than likely be abandoned.  I say that with a caveat - if each of those 3 clicks takes 30 seconds to materialize something, 3 clicks is too much.  "Lean and mean" is more often than not better than "fat and sassy" when it comes to connecting visitors with content.  On the same token, if the average visitor is forced to scroll to view important navigation points, it will also prove a turn-off quite often.

It sounds like, based upon the example link you supplied, you'd like the functionality of the horizontal menu in a vertical format.  That can certainly make access to deeper content much easier for those that can access the extended functionality.

I personally like the javascript option of show/hide, though I'm not sure that all users know how to use it well?  Is a short menu more important than a Extremely Easy to understand/use menu?

This is where knowing your audience can pay off.  If your site attracts visitors that tend to be computer literate, then make them your focus.  If, instead, you're more likely to get novice computer users, it's got to be as intuitive as can be.  Only you can answer that.

That’s my 2¢.  :^{>

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Best Nav Menu Structure

Navigation is perhaps the most important structural element of website design. As Mas pointed out, each site's navigation should be based on the site itself, and on the priorities of the site owner(s).

When it comes to navigation, I try to never...and I mean NEVER use javascript. Why? Simple: search engines can't process javascript. This can keep your internal pages hidden from search engines and reduce your traffic. It's a bad thing, no matter how you slice it.

Rather than use javascript for collapsing menus, I use CSS. Here's one of my personal sites that uses a collapsing menu:

http://www.thebiblerocks.com/

So far, only the Bible and People sections have content...so only they expand. If you want to review the CSS, it's here. The key is to identify each body tag and each menu item, and then make menu items disappear. You then make them conditionally visible based on the page id. Like this:

<body id="people">

<li class="top"><a href="/bible/index.html">Bible</a>
    <ul class="bible">
        <li><a href="/bible/index.html">The Basics</a></li>
        <li><a href="/bible/faq.html">Bible FAQ</a></li>
        <li><a href="/bible/index.html">Places</a></li>
        <li><a href="/bible/index.html">Objects</a></li>
        <li><a href="/bible/prophecy/index.html">Prophecy</a></li>
        <li><a href="/bible/index.html">Bible Fun</a></li></ul>
                                      </li>

#nav li ul { display: none; }

body#bible ul.bible { display: block; padding: 3px 0 8px 0; }
body#bible ul ul a,
body#bible ul.bible a:link,
body#bible ul.bible a:visited,
body#bible ul.bible a:hover,
body#bible ul.bible a:active
    { font-size: 9pt; text-align: left; }


Yes, it's a little complicated. Yes, it takes some time to get it just right. Yes, it's worth it (in my opinion). You can, of course, style the links any way you like once you have the logic of the navigation figured out. Note that this technique only makes the menu items appear and disappear...dropdown navigation is a related but separate process.

Have fun!
(Once you've played with this a bit, you'll understand why web designers are almost all bald) smile

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Best Nav Menu Structure

General Havok.
Thanks.  I accomplished a very similar thing using if statement in textpattern on another site.

Its really helpful to have all these ideas here.  THX.

Matthew