[Javascript] Create a menu in js. Understanding the workflow

[David Dorward]

On 27 Oct 2009, at 09:39, MEM wrote:
> I'm on my way for building a menu using javascript.

Just what the world needs.

> For this database menu I need to:
> Have a menu that, when the user clicks:
> a) show the child elements of that clicked parent.

In order to be accessible to non-pointing device and non-JS users, the  
menu opening element needs to be a link.

For non-JS users, this link will go to a suitable page (usually an  
index page for the menu section).

For keyboard users, it needs to be a link so it can get the focus (in  
a reliable, cross browser fashion).

Have the onclick handler change the className of the parent element (a  
list item containing the link and submenu). Use a descendent selector  
with that class name in the stylesheet to change the dislpay style of  
the submenu.

> b) change the URL.

http://www.w3.org/TR/html4/struct/links.html#h-12.2

> The server side part:
> 1) Construct an array from a query.
> 2) Build a ul/li List based on that array
> 3) Print it out to the page.

All depend on the language you use and the data structure you keep the  
data in.

> The client-side part:
> 4) I suppose I should I give to the li and ul some ids, so that we  
> can show
> child elements only when a specific parent is clicked?

No need. You just need to identify the top of the menu. Then you can  
find ul and li elements with in it, and identify their children and  
parents.

> 5) Each time the user clicks on a menu item, the URL must change.  
> How to
> preserve the menu estates over this url changes?

Attach a JavaScript event to the "go to page" links. Have it edit  
those links to include a serialised description of the condition of  
all the menus (e.g. in the fragment identifier). Read that information  
in the onload event.

-- 
David Dorward
http://dorward.me.uk