Try out the arrow keys, mousing and tabbing
Menu 1
This is done using the magic of tabindex and focus!
You can tab through these menus as expected.
You can also use your up and down arrow keys to navigate through them.
While doing this if you hit the top or bottom of the menu, you will be looped around to the respective bottom or top of the menu.
You can also use your left and right arrow keys to jump out of the menu to the next highest tabindex.
This is very useful for quickly moving back and forth from menus.
Because this is all done with tabindex (to make items focusable), you can use the css pseudoselector :focus to style elements.
Menu 2
This is the second menu created.
This one used the class's focus event so that each item is highlighted when focused.
This was done like so:
new Menuify('#menu2 li').addEvent('focus', function(item){ item.highlight('#FF0', '#FFF'); })
The event is passed on to each of the items in the menu.
You can use the following events with Menuify('selector').addEvent:
keydown, keyup, keypress, click, doubleclick, focus, blur, mouseenter, mouseleave
This
is
a
demo
of
Menuify
,
and
this
too
is
a
menu
.