Need HTML for dropdown menu/ options inside a table

[jen_anderson]

I have a teacher creating a homepage with a table. On the left hand column of the table is a list of links. She would like to be able to hover over the links and get a drop down menu of choices to click OR be able to click on the choices and get a drop down list to choose from without switching pages.

Could anyone provide some HTML for this or share some homepages with may have some features like this?

Thanks in advance for the help!

[GideonWilliams]

This is awesome Jen!

[Shar]

Hi James and Lawrence,

I know this reply is a little late in coming, but here's someone who puts a copy of the same information for mobile users since the regular reveal information does not display in mobile.

Element Toggler 

Cheers - Shar

[lchallen]

I was very excited to find this post and then less so to hear it does not work in the app. We have a template that we are using that is super user friendly but the Mobile version is less so - a dropdown menu would totally fix that. If I work anything out I will let you know.

[jw2546]

Has anyone had a chance to check how this works in the Canvas apps? I have a slight tweak of the code running fine in browsers, but it is completely non functional in the app.

Here is my altered code:

<h3 id="index2" style="font-size: 14pt; font-weight: bold; color: #b31b1b;"><a class="element_toggler" role="button" aria-controls="index2pt1" aria-expanded="false" href="#"><i class="icon-arrow-open-right"></i>Clickable Dropdown Text</a></h3>
<ol id="index2pt1" style="background-color: #ffffff; display: none; font-size: 14px;">

<!--DROPDOWN CONTENT-->

</div>

Anyone have any ideas how to get it to work in the app?

[jdick1]

I haven't had the time to dig into making the toggle solution I posted up-thread accessible, but in theory, you would create eight of those code blocks (a vertical stack of eight toggle menus); you can also put them in flexbox divs. I'm discontinuing their use for non-staff/faculty pages until we figure out the accessibility piece, though.

[kritzerjb]

Hi, Jen. Is there anyway to open only one module at a time. I need 8 that open "independently". Dr.K

[robotcars]

That  @tft  article looks like a good place to start.

Dropdown Menu Test: Simply Accessible

Dropdown Menus Test Page 

The best implementation of keyboard controls will likely require JavaScript.

This is probably the best resource I can recommend to get started.

Menus & Menu Buttons - Heydon Pickering - Inclusive Components 

As I wrote in Aria-controls Is Poop, the aria-controls attribute, intended to help screen reader users navigate from a controlling element to a controlled element, is only supported in the JAWS screen reader. So you simply can’t rely on it.

I'm just starting to tackle this concept too, because our instructional designers aren't web developers either.

I ordered Heydon's book last week, it comes with a PDF and code. There's also an ebook for less.

Inclusive Design Patterns by Heydon Pickering – Smashing Shop 

Inclusive Design Principles

Who Is Inclusive Design For? | HeydonWorks 

[jdick1]

Not yet--I work at a very small institution and we don't have any accessibility experts or web developers I can tap. I was hoping that because this came from Canvas's own style guide, it would be accessible by default. I will make a project looking into how to retrofit this. (Found a promising article here that I'll start working from.)

Would love to hear from someone more knowledgeable if they know how to fix it!

[christopher_fra]

Interesting. Something worth looking into. Thanks for the idea

[Boekenoogen]

This looks real promising.  I can’t wait to try it out.