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:
<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>
<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:
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.
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.