[ARCHIVED] 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!

[jdick1]

A hover-over drop-down menu would require custom CSS and/or JavaScript, but an HTML-only alternative I've had some success with is to repurpose the toggler code from the Canvas Style Guide. I've had luck with the following:

<!-- faux drop-down title -->
<p><span class="element_toggler"
       id="index3"
       aria-controls="index3pt1"
       aria-expanded="false"
       aria-label="Toggler toggle list visibility"
       role="button"
       style="font-size: 1.5em; font-weight:700; color:#0058a0;">
    <i class="icon-arrow-open-right"></i> All Unit 3 Topics (click to expand)</span></p>

<!-- faux drop-down content -->
<div id="index3pt1" style="background-color:#dee8f4; margin-left: 2em; padding: 1em 2em 1em 2em; display: none;">
   <p style="color:black"><a href="#">3.1 Magnitude of Torque</a></p>
   <p style="color:black"><a href="#">3.2 Analysis of Dynamics</a></p>
   <p style="color:black"><a href="#">3.3 Moment of Inertia</a></p>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Which produces:

3.1 Magnitude of Torque

3.2 Analysis of Dynamics

3.3 Moment of Inertia: Superposition Principle

  All Unit 3 Topics (click to expand)

[or would if it worked here; if you copy and paste into the HTML editor of a Canvas page, it should work]

Some notes on the code above that I've learned via experimenting:

• Line 5: The aria-controls value ("index3pt1" here) needs to match up with the div ID value.
• Line 6: The aria-expanded value of "true" will default the div content to display when you first hit the page; "false" will default the div content to be hidden
• Line 10: You can actually change the icon that displays to the left of the menu title...although I've forgotten where I found the icon name. I'll do a little digging and update this post if no one else chimes in.
  • I don't think you can change the icon displayed based on expanded/hidden without CSS or JavaScript, but if someone knows a way, I'd love to know.
• Line 12: I stuck the content in a div so I could visually set off the expanded contents, but you don't need one; if you look at the Style Guide's example, it's just an unordered list.

All this said, I'm largely self-taught re: HTML & CSS and only started using Canvas in August, so I'm sure there are tons of folks with better and smarter solutions out there so I'll also be following this thread with interest. Hope this helps and let me know if you have any questions.

[alomellini]

Hi Jen,

Would you be able to provide code that makes this accessible to keyboard users? Thank you!

[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!

[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 

[christopher_fra]

Interesting. Something worth looking into. Thanks for the idea

[kritzerjb]

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

[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.

[GideonWilliams]

This is awesome Jen!

[Boekenoogen]

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

[james_whalley]

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?

[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.

[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