Today I am presenting a navigation plugin. This plugin is great as it handles navigation menus that can run infinitely deep, even on IE6. It add classes to any parent of a list, which means that you can style those lists that have children differently to show it. The event handling is pretty robust and actions all happen on a timer. I may include an option to set this interaction speed in the future, but I must admit I don’t really use this plugin much anymore.
There are two types of visual effect you can set (fade/slide) apart from the default of ‘none’. The timing on these animations can also be set to the users desire.
The big issue that I tried to solve in this script was to have the top level items set to width:auto and then do all the calculations for the children’s widths set by javascript, but that became more than a couple of hours work, so I abandoned it. I would really like to get that to work, as I’m sure it would lead me to use the script more often. The other thing I’m not so enthused by is the heavy amount of css needed for it, both in the css file and the js. I’m not too fused about the css file size, but the list-items lining up in IE6 became fiddly and so the style is not quite as flexible as I would have hoped. Oh well!
As usual I’m am hosting this on Github. I have used this in a production environment on large websites and found it quite robust and had great performance. I hope it may prove useful to someone else.