List menus vs. something else?

Best way to build list menus

[Floating]

Hello

I’m new to this forum and I have a question regarding the best way building CSS based menus. Currently I’m working on a new release of my web firms CMS. For the new system we're releasing a collection of up-to-date templates for the customers to select from.

Our former templates uses H1, H2, (etc) tags to define the menus and the formating in them. I know this will be interpreted as old fashioned -- I know certainly know it is.

As a part of this little "renovation" I'm going to build list based menus.

Therefore my questions is; how would you do this when my menus must be presented like this?

Top menu
- Sub one
- Sub two
- Subsub one
- Subsub two

I've done Google searches for solutions like this, but most of the results are showing tutorials for menus that doesn't support "all" web browsers or tutorials showing how to build mouseover menus.

Can someone please direct me to good tutorials or help channels for the type of menu I'm looking for or give me a tip on how to build them? My main problem has been to get the "subsub" to work.

All help and tips will be appreciated :) Keep in mind that the solution should be search engine friendly of course future-oriented.

Anything else I should think about when implementing this kind of menus?

Thanks for reading.

[Fotiman]

I highly recommend you check out the Yahoo UI Library [developer.yahoo.com]'s Menu Component [developer.yahoo.com]. It is cross-browser compatible, easy to implement, and well documented.

[Floating]

Thanks Fotiman. I appreciate your answer and link to a very nice developer source site, even though this isn't exactly what I was looking for.

I've checked the menu you're refering too and read the documents, but I'm looking for a CSS/HTML script only (no JavaScript and no mouseover div effect) with sub menu capabilities.

Anyone knows what kind of system widely used in most Content Management Systems?

[Fotiman]

I've checked the menu you're refering too and read the documents, but I'm looking for a CSS/HTML script only (no JavaScript and no mouseover div effect) with sub menu capabilities.

I too was once on a mission to find something like that. :) However, my views have changed.

CSS should be used for Presentation.
JavaScript should be used for Behavior.

Keeping these two layers separated is a very good idea. While CSS does provide some "hover" effects, it should not be considered a replacement for all mouse over events. That is, with a menu as you describe, there is a lot of "behavior" which is best encompassed using JavaScript.

So I would reconsider your current quest to find an HTML/CSS-only method.

[lavazza]

I don't understand the need for separating mouse-over behaviour

So, if you have the time to explain, I'd like to know more

[edited by: SuzyUK at 7:02 pm (utc) on June 26, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[Fotiman]

I don't understand the need for separating mouse-over behaviour

So, if you have the time to explain, I'd like to know more

It's not so much a *need*, it just makes for a better design model. For example, if you know that all of your behavior logic is going to be stored in a .js file, then when some behavior isn't working, you know exactly where to look. Likewise, if some presentation isn't working correctly, then you also know where to look (in your .css file).

There are some cases where behavior and presentation are closely related... but they're still separate. For example, take a drop down menu. When you click on the top level item, you expect to see the submenu items appear. So:

Behavior = Click on top level item, change class of nested item to make it visible
Presentation = Define classes for the visible and hidden states of the submenus

Make sense?

[SuzyUK]

Floating, Welcome to WebmasterWorld!

I could be way off mark here, but are you simply asking how to structure a list with 1 or many, sublists?

my 2c is that there is nothing else, menus are lists (of choices) and that is what they should be marked up as, whether you choose to display/hide bits or not, the markup should still be the same, CSS will display it just how you want it to

or have I picked you up wrongly :o
..

[Fotiman]

To expand upon what SuzyUK said, I like to format the markup like this:

<div><!-- Generic wrapper block --> 
  <ul> 
    <li><a href="#">Item 1</a> 
      <div> 
        <ul> 
          <li><a href="#">Item 1.1</a></li> 
          <li><a href="#">Item 1.2</a></li> 
        </ul> 
      </div> 
    </li> 
    <li><a href="#">Item 2</a> 
      <div> 
        <ul> 
          <li><a href="#">Item 2.1</a> 
            <div> 
              <ul> 
                <li><a href="#">Item 2.1.1</a></li> 
              </ul> 
            </div> 
          </li> 
        </ul> 
      </div> 
    </li> 
  </ul> 
</div> 

And so on...

[Floating]

That was nicely covered Fotiman :) Thanks alot!

SuzyUK: Thanks for a warm welcome. I'm already finding this place very informative as a web developer resource, really helpfull :)

As for my thread; you understand me perfectly. I'm primary looking for suggestions for list based menus/markup best suited for the future (speaking of browser support, SEO, loading time in combination with server side, etc). As for now I will probably go for something like Fotiman made an example of (thanks for this), the only thing I'm not 100% sure of, is wether to go for a ONE list menu instead of multiple.

I mean, what about having it all in ONE list only, something like this?

<ul>
<li>Menu item #1</li>
<li>Menu item #2</li>
<li class="level2">Menu item #2 sub #1</li>
<li class="level3">Menu item #2 sub #2</li>
</ul>

Any instant counter-attacks?

[lavazza]

I would go for Fotiman's approach: one UL with level-0 items in LIs and level-1 items nested inside UL\LIs :)

Any page should work with CSS AND Javascript disabled... and your suggestion above makes no distiction between levels :(

[rocknbil]

your suggestion above makes no distiction between levels

The level2 class would have a different indent, size, and/or background color to make it appear as a subtopic of the preceding list item.

[Fotiman]

But semantically, it's wrong. If it's a "child" of another item, then it makes more sense to use nested lists.

[penders]

...but I'm looking for a CSS/HTML script only (no JavaScript and no mouseover div effect) with sub menu capabilities.

I'm certainly with Fotiman on the CSS presentation / JS behaviour front.

CSS only menus (or as close as you can get with IE6) are all well and good, but if you are intending to have sub and sub-sub flyout(?) menus then purely CSS menus can be tricky to navigate for the average end user, requiring a sobering accuracy with the mouse. You move your mouse off the flyout and bang goes your flyout - frustrating. Add a touch of JS and make your menu more 'sticky', allowing your users to slip off the menu for an instance or move diagonally across other items to get to the option they see - rather than a rigid 'across' and 'down'. Fall back to the CSS/HTML should JS not be available. And as mentioned above, the HTML is still marked up the same.

@Fotiman - What do you use your extra DIV element surrounding the UL's for? Just in case? A drop shadow perhaps? :)

[Fotiman]

@Fotiman - What do you use your extra DIV element surrounding the UL's for? Just in case? A drop shadow perhaps? :)

A drop shadow would be a good use for it. I just find that when it comes to navigation lists, it can often be helpful to have 1 more level of generic container around each <ul>. It just allows for greater flexibility when styling. :)