Jump to content

.London Domains - £4
Photo

Opening dropdown menu with :focus

accessibility

Best Answer DigitalSquid , 09 March 2018 - 17:40

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 johnfotios

johnfotios
  • Member
  • Newbie
  • 29 posts

Posted 09 March 2018 - 16:58

I've been thinking more about accessibility lately, one area I have difficulity is dropdown menus.

 

With css, it's easy to open a child <ul> with: hover

<ul>
	<li>
		<a href="#">item</a>
		<ul>
			<li><a href="#">sub item</a></li>
		</ul>
	</li>
</ul>
li > ul { display:none; }
li:hover > ul { display:block; }

Without mouse, you navigate a site with the tab key. Unfortuantely you can't add li:focus to the css, as when you use tab, it tabs through the <a> tags (so you never focus the li).

 

I could use js, $(selector).focus(function) and .next() to affect the sibling ul, but I wonder if there's a pure html + css solution. Maybe it's to move away from dropdowns entirely.

 

 

Any thoughts on this?


  • 0

John Fotios | Indever | Hoj

My little bit of web design... http://www.indever.co.uk


#2 DigitalSquid

DigitalSquid
  • Overlord
  • Squidministrator
  • 1,050 posts

Posted 09 March 2018 - 17:40   Best Answer

You could use a focus and adjacent selector to make it open.

a:focus + ul { display:block; }

I've always been a fan of the idea that in dropdown menus the top level should be a taxonomy or heading to represent the group below, not a link.


  • 1

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!

www.digitalsquid.net
@Digital_Squid


#3 johnfotios

johnfotios
  • Member
  • Newbie
  • 29 posts

Posted 25 March 2018 - 18:44

You could use a focus and adjacent selector to make it open.

a:focus + ul { display:block; }

I've always been a fan of the idea that in dropdown menus the top level should be a taxonomy or heading to represent the group below, not a link.

 

I haven't used + before. I'll give it a go.

 

I agree, I don't like the top level being a link either (if it has a dropdown).


Edited by johnfotios, 25 March 2018 - 18:44.

  • 0

John Fotios | Indever | Hoj

My little bit of web design... http://www.indever.co.uk






Also tagged with one or more of these keywords: accessibility

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users