Pure CSS menu, any level deep

[trusktr]

Feature request

Current menu has limitations. Sometimes (like for links) the menu items can open/close to show child items. Other times (as with non-links) there is no open/close function.

What problem does this feature solve?

We can decouple the menu nesting from the link system, and fix the fact that currently not all items in the Docsify sidebar are collapsible (it seems to depend on items being links or not).

I am on mobile, but I can later post my markdown and what it looks like.

What does the proposed API look like?

Let's get ideas from existing pure-CSS tree views with open/close, any level deep:

• https://codepen.io/bisserof/pen/fdtBm
• https://codepen.io/kobusvanwykk/pen/NqXVNQ
• https://codepen.io/rgg/pen/WrKyzj
• https://codepen.io/anchen/pen/rGDjI

How should this be implemented in your opinion?

We can adopt a similar technique, but style it for Docsify. A plug-in could add smooth CSS transition.

Are you willing to work on this yourself?

👍

[vagra]

I did this.

[vagra]

I did this.

vagra@6a1389a

this code like the #1200
but has some diffrents.

1. if you click the icon before item, can expand/collpse the children;
2. if you click the item link, can scroll to the anchor in the main content.

when loadSidebar: true, look https://kepan.org/click1/

when loadSidebar: true, look https://kepan.org/click0/

if you guys like it, I can submit a PR.