Each web-page menu style is RWD and also Mobile Friendly, once finished :-)
I would be grateful for your comments regarding usability, colours, recommendations and/or improvements/
Notes:
a) Hamburger uses a modified Pure.css style sheet and only appears on narrow screens.
b) Vertical Button Menu created with a little help from @PaulOB
c) Horizontal Button Menu slightly modified Vertical button style
Iām having problems with all of them (Firefox 38 on Ubuntu Gnome 15.04). The last entry in A (āWisdomā) is concealed behind the image. However, it is reachable and usable by tabbing.
The menu in B & C doesnāt respond to keyboard. (Thatās doubly-annoying, because I had to tab through everything else on the page first to get there, only to find I couldnāt then use it.)
Iām afraid itās not keyboard friendly (like nearly all dropdowns) and would need a little js to aid keyboard users. Itās the same for nearly all css dropdowns and unless they have a js helper keyboard users cannot activate the hidden menu.
You could rewrite the menu to use the ācheckbox hackā to make the menu appear but the problem is that checkboxes donāt get actioned on enter but on pressing the spacebar so you would have to tell keyboard users to use the spacebar to select the menu when it is focussed.
Many thanks for your detailed explanation and the recommended JavaScript solution which looks good, I will experiment with the script later.
The current Button menus are unobtrusive, quite neat, mobile friendly, rapid and do not require an excessive amount of CSS but do fail for keyboard users
I think I will try a concertina (fixed to the top of the screen) style to reveal the seven buttons. Hopefully the concertina is keyboard friendly.
Off topic:
I have resurrected the last pretty version of the Hamburger menu link which now works but does require a vast amount of CSS and JavaScript just to display the seven links.
According to statistics just over 66% are from mobile users and increasing so I will concentrate on this market.
Iād vote for hamburger just because the other two rely on hover behavior, and I hate hover flyouts.
Hereās why:
Sometimes Iām reading the page and not paying attention to where my mouse is, and suddenly the content Iām reading is covered by some flyout because my mouse wandered into the wrong part of town. Hovering is too passive and shouldnāt be considered a user action to open anything.
Sometimes I see a link and I click it, and itās only in the brief moment while the page is unloading that I see the hover flyout with more sub-menus. Seems better if clicking would open the sub-menu instead of going somewhere, and hovering would play no part.
But I think the hamburger is also better because you use the screen space when itās available. No need to hide the menu when you have so much room to show it.