PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Dec 12, 2017 6:56 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 32 posts ]  Go to page Previous  1, 2, 3  Next
Author Message
PostPosted: Tue Oct 04, 2016 7:53 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 8:17 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6402
Location: Montreal, Canada
Only reason it was done with JS was to allow for it to be toggled on click rather than on hover.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 8:24 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 8:26 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6402
Location: Montreal, Canada
Right

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Oct 04, 2016 8:32 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Wed Oct 05, 2016 6:46 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Oct 05, 2016 7:26 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
.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);
}

This seems to be the key to it. And it's left:0; so that it goes right across.
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.


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 6:13 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 6:56 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6402
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 7:01 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 7:07 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6402
Location: Montreal, Canada
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?

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 7:15 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 7:21 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6402
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jan 27, 2017 8:19 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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??

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Jan 30, 2017 4:22 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4377
Location: United Kingdom
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.


The original menu we found there was doctored. Mostly through here actually.

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:
File comment: Source code
dd.zip [15.18 KiB]
Downloaded 51 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 32 posts ]  Go to page Previous  1, 2, 3  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group