You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The child items are rendered as a ul element which is a sibling of the a element. This makes it easy to target the ul element via CSS (a + ul) or JavaScript (aNode.nextSibling).
Now take notice of how the second level links are rendered:
Here the a and ul elements are contained in separate li items. This makes it impossible to target the ul from the a element via CSS, and more expensive via JavaScript (aNode.parentNode.nextSibling.querySelector('ul.children')). This also breaks the default list styling, as the sibling li elements render as follows:
• Page
• Section
•
• Child
• Child
What I would hope to see is the same nesting logic applied to all levels of the sidebar navigation: links that have children are rendered as an a tag immediately followed by a ul tag containing the children:
The sidebar nesting logic is inconsistent which can create challenges for plugin and theme authors looking to target specific navigation levels.
Here is the docsify HTML output from a three-level sidebar navigation:
Take notice of how the top-level item and its children are rendered:
The child items are rendered as a
ul
element which is a sibling of thea
element. This makes it easy to target theul
element via CSS (a + ul
) or JavaScript (aNode.nextSibling
).Now take notice of how the second level links are rendered:
Here the
a
andul
elements are contained in separateli
items. This makes it impossible to target theul
from thea
element via CSS, and more expensive via JavaScript (aNode.parentNode.nextSibling.querySelector('ul.children')
). This also breaks the default list styling, as the siblingli
elements render as follows:What I would hope to see is the same nesting logic applied to all levels of the sidebar navigation: links that have children are rendered as an
a
tag immediately followed by aul
tag containing the children:Using this nesting logic would make targeting via CSS and JS much easier, and allow the default list styling to work for an infinite number of levels:
Thanks!
The text was updated successfully, but these errors were encountered: