DHTML three-level menu for product categories navigation
Implementation requirements:
1. Should be based on Yahoo UI version 2.2.2
2. Should work correctly in IE6 and above, FireFox 1.5, Opera 9.0, Safari 2 and above
3. Should have separate HTML, CSS and JS
4. Should use YAHOO.istore.* namespace. For menue - [login to view URL]
Provided (attached):
1. Static HTML and CSS
2. Sketch
3. Illustration of animation (in flash)
4. Serialized array of categories
Layout and animation (see the flash file for illusstration):
1. Initially, navigation menu height is fixed (baseHeight), the height is set based on the amount of the first-level categories
2. When a first-level category is clicked on, a block of second-level categories below it smoothly slides down. The first-level categories below should move down as well, revealing the second-level categories. First-level categories at the bottom disappear in order to keep the height of the menu the same. If the same first-level category is clicked again second-level category block smoothly closes up
3. If the opened second-level category block doesn't fit in the initial height of the menu, the height of the menu should be temporarily increased, with smooth animation, so all categories in the opened block would fit
4. Second-level categories should follow the same logic, when clicked on as the first-level
5. Third-level categories do not have any functionality when clicked on
6. Animation of all the elements (opening, moving, hiding, etc.) should happen at the same time
Category list data:
Array of categories should be downloaded as a whole in the background when the page is loaded
Browsers:
IE 6+
FF 1.5+
Hi. I have worked with YUI JS and solved out similar tasks. I have implemented some custom controls extending container, treeview, menu, tabview, datasource, datatable with animation. So if you are interested welcome.