Mar 07
21
jQuery Menu Example
Share This
|
100% | Join the Discussion ( 32 )
After taking a closer look at the genius jQuery JavaScript Library I decided to post an example on how easy you can create a nice looking, space-saving navigation menu.
It’s nothing fancy (yet) but can easily become very good-looking indeed. Take a look at the tiny Navigation Menu Example and judge for yourself. The example is based mainly on the jQuery plugin: Accordion, and the only main difference is the up and down arrows included in the “slightly modified” CSS.
I’m thinking of implementing this plugin in my new WP theme (which is currently only available in my head) in order to display more info in less space. Another thing worth mentioning is that the code itself degrades beautifully on browsers without Java support as this only results in all menus being shown in “expanded” modus.
Note! If you’re wondering why I’ve set the anchor tag href to javascript:; it is to basically make nothing happen rather than the common do-nothing insert to use for the href property which is a pound sign (#). Even if that would work also it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.
Update: Based on user feedback I’ve added an example showing how to add a second level within the list.

Weekly Stats Chart
Wordpress.org
