The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need 'Dropline' type of behavior for nested lists

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #239739

    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.

    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.



    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.