drop down: touch events

[mVaillette]

So lets just keep it simple. Say I want to create a dropdown that, when clicked or :hover-ed, reveals the submenu from offscreen.

Would I simply create an onclick event that calls a javascript function to do the magic?

And maybe that function would add some inline styling to reveal the offscreen sub menu?

What's a better way of doing this? Examples would be peachy. I'm just learning Javascript so I don't know what's possible.

 

[CaldwellYSR]

So lets just keep it simple. Say I want to create a dropdown that, when clicked or :hover-ed, reveals the submenu from offscreen.

Would I simply create an onclick event that calls a javascript function to do the magic?

And maybe that function would add some inline styling to reveal the offscreen sub menu?

What's a better way of doing this? Examples would be peachy. I'm just learning Javascript so I don't know what's possible.

There's no reason to use javascript for this. As a matter of fact it's a bad idea to use javascript for this. It can easily be done with CSS.

Tutorials:
Link 1
Link 2 -> Actually uses some js at the end but only for aesthetic changes not the actual functionality.
Link 3 -> Video tutorial

 

[benjamin.morgan]

for hover you don't need javascript at all. If you do use javascript to make an onclick thing for it to drop down please make it where it will fall back to hover if javascript isn't available and make an arrow so they no to click on that item.

 

[mVaillette]

To clarify, I am trying to create drop down menus that work with touch devices.

I don't need help getting the :hover pseudo-selector to work.

 

[CaldwellYSR]

To clarify, I am trying to create drop down menus that work with touch devices.

I don't need help getting the :hover pseudo-selector to work.

The hover selector works if you're using display: none to display: block. If you're doing it with positioning then it won't.

 

[mVaillette]

The hover selector works if you're using display: none to display: block. If you're doing it with positioning then it won't.

Thanks for explaining =)

I am leery of using display:none on a dropdown menu because of accessibility issues with screen readers, but I suppose I could add modernizr to the mix and only serve display:none to the touch devices.

Incidentally, that would leave touch devices without javascript unsupported. Alternatively I could leave screen readers without javascript unsupported instead.

Thoughts on who should be left in the dark? (assuming the site does not dictate one or the other)

Got any better ideas anyone?

THANKS!

 

[CaldwellYSR]

Thanks for explaining =)

I am leery of using display:none on a dropdown menu because of accessibility issues with screen readers, but I suppose I could add modernizr to the mix and only serve display:none to the touch devices.

Incidentally, that would leave touch devices without javascript unsupported. Alternatively I could leave screen readers without javascript unsupported instead.

Thoughts on who should be left in the dark? (assuming the site does not dictate one or the other)

Got any better ideas anyone?

THANKS!

Yeah assuming a basic site who's audience doesn't dictate in any way I would go mobile most of the time. I don't have any statistics to back it up but I imagine there are alot more people using their phones to get online than using screen readers.

 

[chrishirst]

develop it so javascript is used to hide or collapse the hidden elements as the document loads, that way if the useragent is not js or CSS enabled, the elements are always rendered as visible.

 

[mVaillette]

Yeah assuming a basic site who's audience doesn't dictate in any way I would go mobile most of the time. I don't have any statistics to back it up but I imagine there are alot more people using their phones to get online than using screen readers.

Yeah I could do that.

Looks like according to one survey, about 1% of screen readers don't have javascript enabled. Which isn't too bad.

develop it so javascript is used to hide or collapse the hidden elements as the document loads, that way if the useragent is not js or CSS enabled, the elements are always rendered as visible.

Well this does that. But CSS enabled, javascript disabled screen readers get left out. Eh.




I could place a navigation page link in the primary nav and just remove the link for javascript enabled touch devices (with javascript) and change from positioning to :hidden/:block

No?

 

[ronaldroe]

I've used the :active pseudo-selector for that. It seems to work pretty well for iOS, but I've never tried it on others, though.

 

[mVaillette]

The hover selector works if you're using display: none to display: block. If you're doing it with positioning then it won't.

One last question, how does this method behave on touch devices? Does it turn a :hover dropdown into a clickdown menu?

Thanks.

I've used the :active pseudo-selector for that. It seems to work pretty well for iOS, but I've never tried it on others, though.

Ah, what does it :active do on a touch device? Do you have to hold your finger down to keep it triggered?

I like your profile photo ronald =)

Thanks everybody!

 

[chrishirst]

Well this does that. But CSS enabled, javascript disabled screen readers get left out. Eh.

Errmm? No. Because the navigation would remain in its default state, with all elements visible and "clickable"

 

[mVaillette]

Errmm? No. Because the navigation would remain in its default state, with all elements visible and "clickable"

Oh ok, I reread. Thanks!....Hmmmm... What if the default state was a dropdown positioned offscreen with the parent <li><a>etc leading to a navigation page? And a regular :hover dropdown.

With modernizr i would nix the navigation page link for touch devices as well as change the offscreen positioning to display:hidden and :block when touched. (if display:hidden/:block work well??)

Then only touch users with javascript disabled would need to use the navigation page. no-js non-touch users get a hover dropdown....and it would play nicely with all screen readers, javascript or not, because the default dropdowns don't use display:hidden.

amirite? Feel free to rip it apart =)