Dynamically Set Accordion Navigation

One of my friends who works for a fairly large company (loooooots of internal links) needed a way to structure the left navigation in such a way that the links would take you to the page, but the list element/clickable element would keep you on the page and expand/contract the navigation. There weren’t any good solutions around that he could find, so I decided to help him out.

This solution is not only an accordion for the menu, but dynamically adds indicators to what list elements are a dropdown and since it makes the list element handle the navigation menu, any element in the list element (including ::before content) will let you expand or collapse the menu system. Clicking on a link will take you to the page, and cancel any accordion effects.

See the Pen VYraBx by Matt Sandy (@MattSandy) on CodePen.

Hopefully this helps someone else out there as well.

Comments are closed.