DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.
  • Search Forums
    Advanced Search
Prev
Next
Forums Using DNN Platform Administration and Configuration

CSS accordion menu for Main Menu

 2 Replies
 2 Subscribed to this topic
 40 Subscribed to this forum
Sort:
Author
Messages
Britomart
New Around Here
Posts: 8
New Around Here
3/9/2022 6:51 PM

I was trying to set up an accordion menu for my Xcillion installation, but I couldn't find the right .js library. In case somebody else is in the same boat, here's a stretchy CSS-only menu I made that works with the html generated by Main Menu:

jsFiddle

Replace the contents of MainMenu.css with this stylesheet and you're in business.

RichardHowells
Growing Member
Posts: 51
Growing Member
3/10/2022 6:08 AM
This seems really nice to me. Please excuse my near total CSS ignorance. I can see that it works on a computer via the hover pseudo-class.

How is that it also works on a mobile/touch device by clicking on a sub-menu? I can't work out what causes the menu to expand on a click.

Thanks for humouring me.
Tycho de Waard (SU)
Veteran Member
Posts: 838
Veteran Member
3 Helpful Replier
Helpful Replier
Thanks for being such a helpful replier!
New Poster
New Poster
Congrats on posting!
3/10/2022 6:19 AM

You don't need js for the accordion.
If you have a recent version, Xcillion is on Bootstrap 4 and you can use https://getbootstrap.com/...components/collapse/

These Forums are for the discussion of the open source CMS DNN platform and ecosystem.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy. 
  2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
  3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  5. No Flaming or Trolling.
  6. No Profanity, Racism, or Prejudice.
  7. Site Moderators have the final word on approving / removing a thread or post or comment.
  8. English language posting only, please.

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved