Dropdown menu - can it work on Hover, instead of click?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
Perfect. Begs the question, why it was done with JS in the first place. So how does that CSS work. I mean, how does hovering over one, make the hrsub appear, and stay put until you hover away?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
Only reason it was done with JS was to allow for it to be toggled on click rather than on hover.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
I see. So in the CSS there is that hover area you added that tells it to display: block, on hover.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
And there was me looking at ways to add a timer to it, and be clever with the CSS and it seems, based on your code, to have been so simple! 
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
How would I make the dropdown that is full width, have a margin left and right.
I tried a width of 90%, and a margin left and right of 'auto', but the subnav anchors to the left edge.
I tried a width of 90%, and a margin left and right of 'auto', but the subnav anchors to the left edge.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
Code: Select all
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #000000;
width: 100%;
left: 0;
-webkit-box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
box-shadow: 0px 7px 5px -7px rgba(0,0,0,0.75);
}Must be a way to make it to 90% wide, and be central...??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
Got a new issue with this now.
On an iPad (actual iPad...!), when you tap on one of the dropdown options, it drops down. when you tap it again, it goes to the page that you are linking to.
So it might say "Shop", and the dropdown shows categories. But if you tap shop again, it goes to /shop.
But on an Android tablet, when you tap Shop, the dropdown appears... but shoots off to the /shop page.
Any ideas why and if this can be stopped? Or is it an Android bug? (using Google Chrome on Android) Galaxy Tab A.
On an iPad (actual iPad...!), when you tap on one of the dropdown options, it drops down. when you tap it again, it goes to the page that you are linking to.
So it might say "Shop", and the dropdown shows categories. But if you tap shop again, it goes to /shop.
But on an Android tablet, when you tap Shop, the dropdown appears... but shoots off to the /shop page.
Any ideas why and if this can be stopped? Or is it an Android bug? (using Google Chrome on Android) Galaxy Tab A.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
Seems unlikely to be an Android bug, or a Chrome bug, really. Can you share the relevant code or is there somewhere we can see it? Going to /shop is not the desired behaviour, I assume? Does make me wonder why it's an option at all in that case.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
Actually, if you use the code of the original site: https://tympanus.net/Blueprints/HorizontalDropDownMenu/
Then make one of those dropdowns, and actual A tag link. And make it hover (like you helped me with a few comments ago), and see what happens on an android smaller tablet.
Then make one of those dropdowns, and actual A tag link. And make it hover (like you helped me with a few comments ago), and see what happens on an android smaller tablet.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
I don't have an Android tablet. More to the point, though, if you don't want an anchor behaving like an anchor, why put one there?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
Because we want the top row of "dropdowns" to be links to internal pages. Not have each internal toplevel page hidden in a dropdown.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Dropdown menu - can it work on Hover, instead of click?
So clicking triggers two conflicting actions: navigating to the link destination and triggering a dropdown? On desktop you can easily have the dropdown fire on hover rather than on click. For mobile, though, that sounds like a good source of annoyance. Might be better to have an alternate menu for mobile with a slightly different structure.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
It already fires on hover. You hover over it, and the menu drops down.
But on a tablet you have to tap it to do the same thing. On iPAd, it's fine. On an Android tablet, it isn't. The tap triggers the dropdown but also the hyperlink to the page.
So how would you have a mobile menu that expands, on tap, but with the "landing page" still in the main part of the menu??
But on a tablet you have to tap it to do the same thing. On iPAd, it's fine. On an Android tablet, it isn't. The tap triggers the dropdown but also the hyperlink to the page.
So how would you have a mobile menu that expands, on tap, but with the "landing page" still in the main part of the menu??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Dropdown menu - can it work on Hover, instead of click?
The original menu we found there was doctored. Mostly through here actually.Celauran wrote:So clicking triggers two conflicting actions: navigating to the link destination and triggering a dropdown? On desktop you can easily have the dropdown fire on hover rather than on click. For mobile, though, that sounds like a good source of annoyance. Might be better to have an alternate menu for mobile with a slightly different structure.
It seems Android tablets (not sure about phones) are the ones that do this.
We need that main menu to have the dropdowns, but also for them to be main landing links.
Attached is the original code. I've added two links to Products and Downloads that at the moment, don't click through to their pages.
The challenge here is to make the menus dropdown on hover, but dropdown on 'click' when 768px wide or below, but also allow the "Products" or "Downloads" to then be clickable after they have dropped down.
- Attachments
-
- dd.zip
- Source code
- (15.18 KiB) Downloaded 382 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.