Grow your CSS skills. Land your dream job.

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](http://bootsnipp.com/snipps/collapsible-tree-menu “Collapsible Tree Menu”). Do you guys know what is the best way to go about this?

    Thanks

    # April 8, 2013 at 5:11 pm

    This may be something you’d be interested in: [Github](https://github.com/NicholasRBowers/CSS-Slider-Menu “NicholasRBowers on Github”).

    Example of it live is here: [JSfiddle](http://jsfiddle.net/NicholasRBowers/PPZ8b/embedded/result/ “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 sony.com has with its menu.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".