26

Oct 2008

Navigation Menu Resources

Now a days, everybody using dropdown, dropline, flyout, toggle and more navigation style menu. Menus come in many different variety and execution, some put together in a number of different ways, some done with javascript, some with ‘pure’ CSS and some a mixture of both. This are the list of My favorite Menu Style.

FreeStyle Menus v1.0 RC11 – FreeStyle Menus is a keyboard accessible menu with added javascript animated fading effects. It used javascript instead of :hover for controlling the submenus means that they are more usable and won’t disappear as easily when moving around the menus. I love this menu style. This menu style can easily to manipulate and cross browser compatible. I even created a sample CSS Template using FSMenu.

The Free Church Website is compose of Pure CSS and FS Menu. By the way I even used pure css round corner on this template.

Deluxe CSS Dropdowns and CSS Flyouts – this free CSS Menu, it used “sticky hovering zones” which ensure that the submenus stay open when moving between different level. This nav works in IE5, IE5.5, IE6, Op7, Gecko, Konqueror, and Safari. IEmac fails to support the hover method used, and so gets the expanded nav instead. IEwin with scripting disables also gets the expanded nav. Nav 4 does not support this method, or much else for that matter.

CSS PLAY MENU – Stu Nicholls has worked on numerous examples of his pure CSS menus. The main advantage of his CSS Menu, there are require no javascript to work in IE<=6 which means that these dropdowns and flyouts menu will always function when javascript is disabled. But the downside, the HTML makes use of IE conditional comments and table tags. The dropdowns are also not keyboard accessible.

Son of Suckerfish Dropdowns – of Patrick Griffiths and Dan Webb. Suckerfish dropdowns are widely used, due in part to their relatively easy implementation. There’s also a fix using an iframe and javascript to get this to work in IE when the dropdowns fall over select elements. But no animation effect and required javascript to enabled.

Listamatic – for Simple CSS List or First level CSS List a good start is the listmatic. They also have a webbase automatic list generator, the List-O-Matic.