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!

[alomellini]

Hi Jen,

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

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