Need 'Dropline' type of behavior for nested lists

[jethro]

Hi, having a bit of brain-freeze right now and can’t come up with proper approach for something.

I have nested lists on a page that function as a bit of a ‘menu’ to allow sorting of projects using a bit of isotope.js to show certain categories/subcategories of projects. Just struggling for some reason coming up with a way to show the subcategories (which are nested lists) horizontally across the full width of the parent, under the main top-level list items (categories). I think the functionality might be a bit similar to some ‘dropline’ menus. The default behavior obviously shows them all as a vertical list coming down from the parent list item.

Here’s my codepen to use as a starting point. This is very stripped down code from the actual site (which is a WordPress site). Just trying to get proof-of-concept.

http://codepen.io/jethroD/pen/NNjMWb

And some notes:
– The site will be responsive, so no fixed widths. Sub-list items will wrap based on parent container width (though evenly-spaced columns would be nice touch).
– The codepen example shows one top-level list item as active, with class of ‘.active’ added to top-level list item. This will be done automatically with js on real site, depending on which top-level list item was clicked.
– The sublist items need to push down any existing content when active. On codepen, this is the ‘View Projects’ header & following content.
– The sublist items will be of varying quantity and title length. I’ll have to figure out how to get them to line up nicely across viewport width.
– The sub-list items do not need to appear to be wrapped by the parent list item as they currently show (e.g., border wrapping all) if not efficient.

THANKS IN ADVANCE!

[jethro]

Determined that this would be VERY simple to do if lists weren’t nested. If the sub-lists were separated out directly after the main list, it would only take a couple lines of CSS to make everything play nicely. I have to use js anyway to add the ‘.active’ class to the parents, so could probably easily modify to apply same class to sub-lists if they were not nested.

• How in trouble with the ‘semantics authorities’ would I be if I un-nested these lists??

• Still open to any suggestions if leaving HTML as-is.

[Author]

Posts