Skip to main content ↑ ↓
Dropdown Menus Started by Spuds · · Read 5079 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Dropdown Menus

Currently we use everyone's favorite SuperFish with HoverIntent for the dropdown menus.  The intent was to make them a bit more accessible and less jittery for some. 

The question is now that its 2021, is it time to drop all of that and just do plain CSS hover drop or click drop menus?  I know there are lots of CSS solutions for this, don't know if they have any delay and intent properties that we get today, or maybe just use click menus is the norm these days.   Just wanted to get some thoughts on this.

Re: Dropdown Menus

Reply #1 –

Quote from: Spuds – Currently we use everyone's favorite SuperFish with HoverIntent for the dropdown menus.  The intent was to make them a bit more accessible and less jittery for some. 

The question is now that its 2021, is it time to drop all of that and just do plain CSS hover drop or click drop menus?  I know there are lots of CSS solutions for this, don't know if they have any delay and intent properties that we get today, or maybe just use click menus is the norm these days.  Just wanted to get some thoughts on this.
 
 Considering a high traffic percentage is on a mobile platform, whatever works best on them. Hover is cool when usable, probably for a minority of users at this point. 

Some peeps dislike the hamburger. It has it's place as well as it's strengths. IMO the menu should be sticky to minimize scrolling. I'm a fan of flyout menus myself. Perhaps a cool layout might involve a floating, semitransparent icon. Even cooler if individual users could sticky it where they want even if it's a matter of three or four specific options. That may be a lot to ask but it never hurts to dream! ;D

Re: Dropdown Menus

Reply #2 –

My 2c: these days you don't need Superfish for hover drops. You can get perfectly adequate behaviour with CSS only. Basic transitions can dial in nice non-twitchy behaviour that will be fine for most people.

Although, if you want to include a mouseout delay that will cover everyone (even people with poor motor control and/or reaction times) it could be worth incorporating a small snippet of js to close a submenu by clicking anywhere outside it. That's not hard to arrange if wanted (it was one of my custom additions to Superfish anyway).

If going with click drops I would probably still use javascript. You can do them all with CSS but it could become a bit messy for admin, etc. Also, for keyboard activation on desktop, Superclick provides very good functionality. Although I can easily give you CSS for visible activation of submenu anchors via keyboard without javascript, but it does come with some limits on eye candy.

Re sticky menus: these have historically been prone to intermittent browser bugs. Not sure if such bugs still affect any browser, and can't predict if it will re-occur, but worth bearing in mind. Could be done as a user option if necessary (I've done this before).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Dropdown Menus

Reply #3 –

 emanuele feels this discussion already happened in the past. xD

I think I remember a time when I thought the "main menu" was useless (though I can't remember my entire reasoning and I'm too lazy to find it again :D ).

I think in general "click" is better for mobile, but I also think we could achieve both with CSS a media queries? I guess.
Bugs creator.
Features destroyer.
Template killer.

Re: Dropdown Menus

Reply #4 –

We have indeed, but its been awhile and lots has changed, as such I figured its worth the discussion again.   There is a lot less browser quirks, mobile is even bigger, and yadda yadda yadda  I was reading an article on hover menus and why they were "bad", it was an interesting take on them but you know opinions are like, well everything else on the internet :D

I'll have to look around at what the current JS menu support is these days, much of the superStuff has not been refreshed in years.

Re: Dropdown Menus

Reply #5 –

The problem, as always, is navigation - how you get around without some guidance in the form of menus or buttons. The desktop/mouse controlled experience hasn't changed much, a menu is still the quickest way and its actually less efficient to use only buttons for them. Mobiles are best with said buttons..but only up to a point where space makes limitations.

Click menus is a mix of those two concepts which I really never saw the need for, tbh. The people that cannot hold the mouse steady etc. often use other means to get around anyway , like other types of controllers or pads which are clicking devices anyway. Which means the focus on that is probably a waste of time..

I feel the concept of regular menus transformed into click buttons(or fullpage array of buttons with possible nested pages) when the space diminishes, is the best approach. It covers most use cases imo.