The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Sidebar Menu Design

  • # April 8, 2013 at 1:57 pm

    Hey guys I currently have a side menu that was done in superfish so its multi-leveled. I was wondering what would be the best way to convert a menu like this into a responsive design implementation. My approach was to just put the whole thing under a nav list but the menu can be quite long in some instances. This led me to do this approach [Collapsible Tree Menu]( “Collapsible Tree Menu”). Do you guys know what is the best way to go about this?


    # April 8, 2013 at 5:11 pm

    This may be something you’d be interested in: [Github]( “NicholasRBowers on Github”).

    Example of it live is here: [JSfiddle]( “NicholasRBowers on JSfiddle”).

    # April 8, 2013 at 5:19 pm

    Saw a few examples of that flyout nav, wasn’t sure how I would display the children of the links

    # April 8, 2013 at 5:43 pm

    Do you mean sub-menus? It displays them as slightly indented (links 6 through 10).

    # April 8, 2013 at 6:04 pm

    Yeah, on he live example it looks all the same indentation. But I guess the reason why I am hesitant to do is this way is lets say the menu is 3-4 levels deep than the height of the smallest links would be even greater than some of that above it (on a mobile device). I’m sure I can do some css to make it style better for those cases but it seems maybe I should be doing some like this with something that has with its menu.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed