Layers

Separating content, presentation and behaviour is considerd good practice in modern web development. The point is to use every technique where it is most suitable. This way the code gets lean and runs fast.

1. Content:

   HTML: <ul>, <li> and <a> elements, degrades to tree-like lists in old browsers. Classes are added serverside or clientside to support CSS.

2. Presentation:

   CSS: paints the lines and puts the document/folder-icons in place. The presentation works good without JS.

3. Behaviour:

   ECMAScript/JS: the expand/collapse icons are positioned in front of the folder icons. Dynamic features are added to the menu. Read more in the features list.