- From: Alan Gresley <alan1@azzurum.com>
- Date: Thu, 21 Feb 2008 08:50:33 -0700
- To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
- cc: www-style <www-style@w3.org>, Bert Bos <bert@w3.org>
Daniel Glazman wrote:
> Bert Bos wrote:
>
>
> > Another example:
> >
> > div:initial * {display: none}
> > div:initial h2 {display: block}
> >
> > ...
> > <div>
> > <h2>Heading of this section</h2>
> > <p>First paragraph...
> > ...
> > </div>
>
> Right, that works for LI and sub-lists. But how do you
> query from JS the state of such a list item, expanded or
> collapsed ? Checking the computed value of the display
> property on all children of that LI is not a workable
> solution.
>
> We need to be able to query 'something' directly from the LI.
> That means a solution based uniquely on the display property
> of the children is not enough. We need an attribute on the LI
> or a unique CSS property setting the expanded/folded status
> of the item.
>
> </Daniel>
Do we have to query the list itself in all cases. Maybe not with the same functionality but all we need to do is be able to navigate to hidden list items in nested list menus. The + and - icons in Andrew Fedoniouk's [1] screenshot are selectable objects which are open by a left click or ENTER. Something like Window Explorers. Using anchor bookmarks, a bit of CSS (:focus) and a very good UA implementation this can somewhat done already using this markup.
<ul>
<li><a>(-)`Metals</a><ul>
<li><a>(-) Alkaline Metals</a><ul>
<li>Lithium</li>
<li>Sodium</li>
<li>Potassium</li></ul></li>
<li><a>(+) Transition Metals</a></li>
</ul>
Please test in Opera 9.5 with the E and D keys on your keyboard.
http://css-class.com/test/demos/accordian4.htm
Now take a look at this navigation menu in Opera 9.5 but instead use the SHIFT key with the direction keys (left, right, up and down).
http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
I had a few tries without anchors and just using a normal nested list but with no results. Another example working in Opera 9.5 for using the SHIFT key with the direction keys is this data table.
http://css-class.com/test/javascript/datatable2.htm
Each table header can be brought into focus (with blue background) and pressing ENTER activates the sortable javascript. I don't quite know how it happens but Opera 9.5 is grabbing the <th> element by my use of th:focus. Can someone from Opera shed some insight?
1. http://www.terrainformatica.com/htmlayout/images/tree-view-lines.png
Alan
http://css-class.com/
Received on Thursday, 21 February 2008 15:50:55 UTC