Poll: Which of these three menu styles is your favourite?

I am curious to know your preferences from the following options:

http://www.johns-jokes.com/_CACHE_JJ/menu/index.php


  1. Hamburger
  2. Horizonal
  3. Vertical

0 voters


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 only seeing unstyled content, @John_Betongā€¦

I can see b & c, but not the hamburger option - could be an IE11 thing though.

Whoops, the paths were incorrectly calling my Localhost CSS files :frowning:

Global replace and everything should be OK now.

Please try again.

I do not have Windows installed and unfortunately cannot try IE11.

Which item from B or C do you prefer?

Have you any suggestions or improvements?

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.)

Unfortunately I have only tested the web-pages using a desktop mouse, mobile and a two tablets. They all work fine.

I will have to ask @PaulOB to see if I copied his script correctly and if there is a fix for keyboard usage.

This is what the hamburger looks like in IE11 (i.e. no hamburger)

Thatā€™s how it looks in Firefox, too, and the final item - ā€œWisdomā€ - is behind the graphic at the bottom.

The web-page is supposed to be responsive and the hamburger hopefully only appears with narrow screensā€¦

The left Wisdom menu used to be OK but I must have mixed up the CSS files.

I am not keen on that PureCss.io style because it is difficult (for me) to make any changes.

Aha! That critical piece of info. With that, try this screenshot from IE11

Note that Iā€™m hovered over the hamburger at this point, but you canā€™t see the cursor.

I have included two missing JavaScript files and also rolled back to an earlier CSS version.

Wth a narrow screen the Hamburger now spins, reveals a space for the menu but unfortunately the menu remains hidden :frowning:

The Button menu is no longer shown when hovering over the Hamburger.

Edit:
Working version of the menu:

http://purecss.io/

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.

In the end a js enhanced menu will provide keyboard accessibility.

Hi Paul,

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 :frowning:

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:

  1. 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.
  2. 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.

EDIT: To reinforce my no-hovering opinion:

1 Like

Me too :slight_smile:

I hate hamburger when Iā€™m not allowed to scroll it away! It steels my screen estate when it uses a fixed space, and it allways does.

I donā€™t like hamburgers, theyā€™re messy. :smile:

Off-Topic

Maybe you would prefer a beer?

3 Likes

Did I mention the other two? They are both useless. :smile: