17 replies [Last post]
jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 34 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

I was posed the theoretical question of styling a multi level vertical menu structure without using UL or OL. Using just DIV and A and 21 lines of CSS, here it is http://jinotega.com/menutestie.htm

comments and criticisms are welcome, as always.

7 level deep pure CSS vertical

/* hide everything except the top menu nodes */
.TonyRobinsDivAvertical div a,
.TonyRobinsDivAvertical div div {
display:none;
/* hide everything */
height:auto;
/* nice background on DIV. no backround = no hover */
width:9em;
/* keep this about double the padding-left */
line-height:1em;
margin:0;
padding:0;
}
.TonyRobinsDivAvertical {
width:9em;
}
.TonyRobinsDivAvertical>div>a,
.TonyRobinsDivAvertical >div>div {
display:block;
/* reveal the top level only*/
}
.TonyRobinsDivAvertical div div:hover > a, div div div:hover > a{
display:block;
/* if this div contains A links, make then visible */
}
.TonyRobinsDivAvertical div div:hover >div, div div div:hover >div{
display:block;
/* if this div contains sub-divs, make then visible */
}
.TonyRobinsDivAvertical div div:hover, div div div:hover {
padding-left:3em;
/* give a hefty channel for mouse users to bypass anything */
position:absolute;
}
.TonyRobinsDivAvertical a:hover{background:pink;}

div {background:#eeeeee;}
div div{background:#eeeecc;}
div div div {background:#eeddaa;}
div div div div {background:#dddd88;}
div div div div div {background:#ddaa66;}
div div div div div div {background:#dd9944;}
div div div div div div div {background:#ccffcc;}
div div div div div div div div {background:#ccffaa;}

7 level deep pure CSS vertical

uses nested divs instead of lists


Works in IE ONLY with a good doctype

1.5 menu item


1.6 menu to next level
2.1 menu item
2.2 menu item
2.3 menu item
2.4 menu item


2.5 menu to next level
3.1 menu item
3.2 menu item

3.3 menu to next level
4.1 menu item
4.2 menu item


4.3 menu to next level
5.1 menu item
5.2 menu item

5.3 menu to next level
6.1 menu item
6.2 menu item
6.3 menu item
6.4 menu item
6.5 menu item

6.6 menu to next level
7.1 menu item
7.2 menu item
7.3 menu item

6.7 menu item
6.8 menu item
6.9 menu item


4.4 menu item

3.4 menu item

2.6 menu item
2.7 menu item

2.8 menu item

1.7 menu item
1.8 menu item

Enjoy playing - I certainly did writing it.

Just doin' my best at www.jinotega.com
Tony Robins

subs
Offline
newbie
Last seen: 6 years 47 weeks ago
Timezone: GMT-5
Joined: 2007-11-28
Posts: 3
Points: 0

On fedora core 6 linux,

On fedora core 6 linux, http://jinotega.com/menutestie.htm is rendered
correctly by Firefox 2.0.0.6, Opera 9.24, but not Wine IE6. See you,

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 day 31 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

As a theoretical problem,

As a theoretical problem, ok, but still slightly begs the question why?

We would never want to give anyone the impression that this is a sensible approach to styling a list of links, it's not overly hot from a semantic point of view, doesn't look great with styles disabled, and would fail on WCAG guidelines for anchors.

Above remarks not intended to be disparaging Smile oh alright just a little bit!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm with Hugo. Why?

I'm with Hugo. Why?

The condition not to use UL or OL is odd. From a CSS point of view, its just stylable elements. CSS doesn't care if you choose DIV+A or UL+LI+A or BLOCKQUOTE+Q

Also, DOM doesn't care what the hovered element is. So once you can do the flyout once, you can repeat it ad infinitum - PC and screen limitations permitting. I.e. what is the big deal with 7 when you could have done 30?

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 34 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

limits and differences

Chris ...
I kept changing the colors, got to 7 and then it was lunch time. You can have 30 levels but levels 7 through 30 will be the same color.

Each flyout MUST overlap whatever was hovered to cause the flyout. More or less limits me to the stairstep appearance and ultimately to the number of levels.

There is a BIG technical difference in implementation between UL and DIV/A. In a UL structure, the submenus are inside an LI wrapper. In a DIV/A structure, each submenu is a stand-alone div and doesn't care where it is placed in the list. Rebuilding a DIV/A menu is a cake walk, a lot more care is needed with a UL structure as one is always concerned about the LI wrapper.

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

I suppose he took my comment

I suppose you took my comment as a challenge (here). All I can say is no matter how you do it non-semantic is still non-semantic. I suppose it's up to you to define semantics in your own world though.

Ever know a kid that brings a football to a baseball game and wonders where the goal posts are. You can kick the ball to center field and tackle the pitcher but you still get no points.

I am not insulting you its just that there are reasons that we do things the way we do them. My point is and always has been to use the proper tool for the proper job. If you are doing these things for a purpose other than "because I can" then that's fine by me. You're not going to convince me to drop semantic code but you can do what you want.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 34 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

I want a semantic web

Triumph, I want a semantic web; not completely sure what I'd do with it though. I seriously thought XHTML was heading in the right direction at one point but it got lost in the weeds. Indeed XSLT and XHTML would conceptually get us there. For me, <UL> isn't particularly semantic but an XHTML tag <navigationlist> that gets transformed into <UL> would be a long way closer to semantics than where we are.

We are discussing a brick (UL) vs a concrete block (DIV) but need to be thinking "cellar wall block waterproof" "chimney lining fire cured".

Just 3 questions:
1) how do I write pages using truly semantic xml tags?
2) what would I do if they did?
3) would anyone care?

...and finally, since people didn't like my 7 level (sob, wipe eyes, grin) where's a really good multi level vertical menu?

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

jinoturistica wrote:Just 3

jinoturistica wrote:
Just 3 questions:
1) how do I write pages using truly semantic xml tags?
Depends.

jinoturistica wrote:
2) what would I do if they did?
What would you do if who did what? :?

jinoturistica wrote:
3) would anyone care?
Hoi polloi? No.

jinoturistica wrote:
...and finally, since people didn't like my 7 level (sob, wipe eyes, grin) where's a really good multi level vertical menu?

How about Son of Suckerfish

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

jinoturistica wrote:

jinoturistica wrote:

...and finally, since people didn't like my 7 level (sob, wipe eyes, grin) where's a really good multi level vertical menu?

There are none. Personally, I think one flyout is too many.

(1) You are constrained by your medium. DIV offers no semantic assistance to the browser. LI, P, BLOCKQUOTE, STRONG, etc, offer some. The rest of the semantic information you need to convey with your content.

e.g.

XML:

Homer Simpson
M
38
Power Station Tech

HTML
User List



  • Homer Simpson


    Sex: Male


    Age: 38


    Job: Power Station Tech



  • ...



Note: This example is illustrative, there will be other HTML structures that can also convey the information semantically - possibly better.

A hunt around these forums will dig up many posts arguing the best semantic structures and the shortcomings of HTML in that regard.

Triumph (not verified)
Anonymous's picture
Guru

Chris..S wrote:There are

Chris..S wrote:
There are none. Personally, I think one flyout is too many. ...

That's a good point.

I prefer and suggest horizontal menus when possible (because they occupy less space). Only horizontal menus get dropdowns. I only suggest vertical menus when there are too many items in the constantly visible part of a horizontal menu. Vertical menus never get flyouts because there is really no point since top to bottom page real estate is virtually infinite and vertical height of a vertical menu list item is only about 1 to 1.5em (IOW you can fit a whole lot on a page). However, if you are dropping below the viewport with a menu it's time to drop the menu altogether and install a search engine.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 34 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

yup search is the way to go

I used to think taxes should be filed under T for taxes but now I use P for paper or G for government. Given just about anything, there are 25 ways to file it and a hierarchical menu is all about categorization - and mis-categorization. I had horizontal menus and drop downs on my 3270 in 1982; gmail is a leading light in this area. Took me a while to let go of the Outlook folders and rely on gMail search but wouldn't go back for anything now.

I have Google search on my web site with 3 option buttons - my site, a bag of 50 Nicaraguan sites, the rest of the www.

peace.

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

Git tha shotgun, Pa. This

Git tha shotgun, Pa. This one's gone feral. :ohdear:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

jinoturistica wrote:<snip>

jinoturistica wrote:
<snip> For me, <UL> isn't particularly semantic but an XHTML tag <navigationlist> that gets transformed into <UL> would be a long way closer to semantics than where we are.<snip>

Early on in html, there was a <menu> element. It was dropped for two reasons:
  1. A menu, by definition, is a list.
  2. The menu element was structurally identical to the ul/ol elements.
<menu>, or for that matter <navigationlist>, is redundant. Were you to extend your xhtml DTD with a navigationlist element, the definition would look like this, would it not?

And, that's identical to this:

from the html4.01 DTD.

I have no trouble with the list elements being used to tag a menu, because that's what a menu is. Further refinement can be gained by assigning it to a class, or making it unique with an ID. Chris's use of extensible html to create a machine parseable address is where xhtml could excel. Unfortunately, MSFT's IE …. Which is why we have to screw around with microformats as a work-around.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 day 31 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

And have I screwed around

And have I screwed around with MicroFormats *sigh*
However it's not so much that Microformats are a workaround but the method employed to write them that is.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 6 years 34 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

kk5st (all menus=lists) = /= (all lists=menus)

I want a page that has <navigationlist> but ALSO has <breadcrumbtrail> <teensyweenytextacrossthefooter>
<aircraftbodystyles> <boeingstyles> <airbusstyles>

Agreed, they are all lists and end up as UL or OL. But they all, in the xml format, carry far more semantic content than 'UL' ever will. Guess I could use <UL class="boeingstyles" id="boeingstyles"> but that hides the semantics in the attributes so its not 'nice' from my programmers perspective.

If doing all this forces me into the clutches of the XHTML DTD when I am fairly happy with 4.0.1 strict then I'll probably take a pass. Not much to gain and a lot of hard work. The semantic web, whatever that means, is not yet cooked - needs to simmer a while yet.

... shame they dropped the menu tag. lists of menu items and aircraft styles could have been partially differentiated.

Just doin' my best at www.jinotega.com
Tony Robins

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Menu is back on the agenda

Menu is back on the agenda for HTML5 or XHTML2 or SOMETML48.

Application specific XML tags only convey information if the UA has knowledge of what the tag actually means. A plethora of odd tags, e.g. <breadcrumbtrail>, <breadcrumbs>, <kilroywoshere> all attempting to convey the same meaning would be bad too.

Iirc, all current browsers can handle XML + XSLT. If you really wish to keep the maximum semantic information with the data, send it as XML and let the browser process it into the DOM.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 1 year 11 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Chris..S wrote:If you really

Chris..S wrote:
If you really wish to keep the maximum semantic information with the data, send it as XML and let the browser process it into the DOM.

Hi Chris,
Could you direct me toward a resource on how to do this? This sounds very interesting to me.
Regards

Life's a journey. Enjoy the trip.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

First, I am no expert in XML

First, I am no expert in XML or XSLT, so if anyone has better advice or resources please jump in.

I have O'Reilly's XSLT book. This sitepoint article should get you started.