Horiz/Vert menu best practices question

[SeaFoam]

I've been looking at various websites with examples of Vertical and Horizontal menus (sometimes called lists or "navbars")

Usually there will be code for a class (or ID) given, and sometimes the class (or ID) is placed in the containing DIV, and sometimes it's placed in the UL.

Why? Do some menus simply format better if the CSS is referenced in the DIV vs UL ?

Is there a "best practices" that suggests it should be in the DIV or UL ? (Thanks)

[Templarian]

Well you clearly are new to this... so I'll take a second to explain.

You use a ul/li when you are dealing with a nav that will be either be expanding or having an accordion style system or if your going to be indenting certain pieces of the nav.

Home
-Something1
--Indented more.
-Something2
News
ect...

You use a Div if you have a fixed nav that goes along the top.

Home | News | Contact

This is a rough over view.

Heres an example using ul/li's.
http://www.alistapart.com/articles/horizdropdowns/

I'm sure you can see where divs are used.

[SeaFoam]

Thanks, but let me give a better example. Consider these 2 very similar horizontal Navbars which use gradient images. (The use of class vs ID doesn't seem to matter in these)


This one places the CSS code in the opening UL:

http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/

<ul class="solidblockmenu">



...and this one places the CSS code one level above in the surrounding DIV:

http://www.dynamicdrive.com/style/csslibrary/item/chrome-menu-bar/

<div id="chromemenu">




Why would it be neccessary to sometimes place the CSS class/ID in the DIV, and sometimes in the UL?

[Pasquale]

Well you clearly are new to this... so I'll take a second to explain.

You use a ul/li when you are dealing with a nav that will be either be expanding or having an accordion style system or if your going to be indenting certain pieces of the nav.

Home
-Something1
--Indented more.
-Something2
News
ect...

You use a Div if you have a fixed nav that goes along the top.

Home | News | Contact

This is a rough over view.

Heres an example using ul/li's.
http://www.alistapart.com/articles/horizdropdowns/

I'm sure you can see where divs are used.
you can save a bunch of time and markup by working with the uls still. Just display them inline, and they will function exactly like a floated div method

[Templarian]

I know dark I didn't want to confuse him too much.

[SeaFoam]

You use a ul/li when you are dealing with a nav that will be either be expanding or having an accordion style system or if your going to be indenting certain pieces of the nav.

You use a Div if you have a fixed nav that goes along the top.

Home | News | Contact


Nooooo.... most folks use a UL within a DIV for a fixed navbar across the top (or a vertical menu along the left). ...and most would also use a UL within a DIV for an expanding "Suckerfish" style CSS menu.



My question continues to be... is it best practices to try to apply the style ID/class to the enclosing DIV, or the UL itself?

[Templarian]

It doesn't really matter... but if you have a div around it then theres no reason not to apply it to the div. If the nav is the only place your using the UL and LI's then you can just use the UL and LI themself.

ul{}
li{}

General tip is you place it where ever it will take up less characters.

[SeaFoam]

Just an update... I found some good advice on some very design-oriented tutorial websites which state that "div-ititus" should be avoided with putting everything in div, div, div.

If possible, the UL should not be in a div, and the styling applied to the UL. (although I found some examples where applying the styling to the UL wouldn't work, and it was neccesary to apply the styling to the div enclosing the UL)