#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2017
    Posts
    2
    Rep Power
    0

    CSS Collapsible menus


    I'm looking for assistance on how to create collapsible CSS menus that look like this -

    https://drive.google.com/open?id=0Bx...DgxWnlYU2I3OFE

    I can't seem to find any solutions that are similar.

    Can anyone help?
  2. #2
  3. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    At a basic level, you have a button that adds or removes a CSS class name from the container, and that class controls whether the container is expanded or collapsed.

    Exactly what you do depends on the markup you want to use - the expanding/collapsing is very flexible so you can use DIVs or a DL or whatever you feel like would be the most semantic approach.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2017
    Posts
    2
    Rep Power
    0
    My goal was to use the bootstrap collapse code, however by default it doesn't have the same appearance as what I need. Was hoping someone could show me how to modify the bootstrap CSS to achieve that same look I need, or provide a working example that is close to what I need.
  6. #4
  7. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,453
    Rep Power
    9645
    So is the collapsible aspect at all relevant anymore? Is your question just about what CSS you need for a certain appearance? Then you'll have to post your markup, what you've done so far, and what else you're trying to get out of it.

    As for that screenshot, it's mostly just color, font, and some padding/margins, but without knowing the markup it's hard to say exactly what they did. But don't try to copy it anyways - come up with something original.

IMN logo majestic logo threadwatch logo seochat tools logo