Create your own drop down menu with nested submenus using CSS and a little JavaScript
Emanuel is up to his usual trickery. This time he shows how to create drop downs using a bit of CSS and DOM. Yours trully helped him out with the Javascript snippet wich is very simple in its self. It finds the navigation by using the document.getElementById and the loops though all the child li tags (perhaps child tags is not the best analogy here, as the loop goes through all the li tags under the current ul node, wich in fact means all decendants of the parent). For every li tag it searches for a child ul tag, wich means that the list element has a sublist (or in our case a submenu). So when and if we find it, all we need to do is append a javascript function to the onmouseover and onmouseout events, wich just sets the inline style of the sublist to block when hovered over and none (thus hidding it from plain sight) when the mouse leaves the hover area.
Create your own drop down menu with nested submenus using CSS and a little JavaScript
Related links
- jQuery talk
- jQuery for JavaScript programmers
- Reset reloaded
- How to prevent HTML tables from becoming too wide
- 35 Designers x 5 Questions
