picnictutorials — 2014-06-22T16:55:55-04:00 — #1
So when I have a drop down menu what do you think is best for usability and seo? To make the top/parent link go to a page that lists all the sub menu links or just give the top link a # in the href?
My HTML drop down works just fine on ipad/iPhone so there's that.
technobear — 2014-06-23T07:21:07-04:00 — #2
I would go with the first option.
I've just come across the first instance where I needed to use a dropdown menu, and I chose to do it like this. My decision was based partly on the number of times I've watched an elderly friend with arthritis struggle with dropdown menus; providing an alternative way to reach those links seemed simple and worthwhile. (I have difficulty with some dropdowns myself, so from a purely personal point of view, too, I would prefer this set-up.)
And I think "links" which go nowhere simply confuse folk. (They confuse me, anyway. :))
dresden_phoenix — 2014-06-25T13:47:09-04:00 — #3
IMHO, the REAL problem with the anchor href ('#') is that you are still making a link. The SECOND consideration is that there may not be any content (or any possible content ) for that section except the navigation itself.
it may be a better option to simply use text only, or if necessary for styling use a SPAN.fauxAnchor to replace the A tags which would otherwise go no where.
An additional benefit of SPAN.fauxAnchor is that you could style it to indicate that it contains a drop down , which is great for usability.
bluedreamer — 2014-06-25T14:31:44-04:00 — #4
Unless there's a very good reason I'd always make the top level one a real link.
picnictutorials — 2014-07-29T17:30:22-04:00 — #5
Thanks guys! Usability wise it may be better to have an active parent link. But seo wise I think a null parent link is better. I don't know who knows. Site point uses a null parent link as do most others. As of now I have a null parent link because then I can have the same functionality on tablets as I do on desktops. With a active parent link you can't get the drop down to work - with CSS only atleast - as far as I know.
technobear — 2014-07-30T04:41:14-04:00 — #6
The menu I used works fine with an active parent link on the limited number of devices I've been able to test it on. It uses a:focus as well as a:hover to cater for keyboard and touchscreen as well as mouse users, so maybe that's the difference.
I adapted it from http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
(And I would always go for usability over SEO. What good does it do if you get your site highly ranked in the search engines, and then your visitors struggle to use it?)
picnictutorials — 2014-08-01T15:28:54-04:00 — #7
Hello. That link you posted doesn't work "correctly" on my ipad. It has a active link. So when I touch the parent it launches to the linked page. If you click the back button then you can see the focus work as the drop down is dropped. But that's not very usability friendly in my book. Verses a no parent link > I touch it on the ipad and a nice drop down fades in. Seems nicer to me. But neither is wrong that's why I asked.