4

I have a sidebar menu with 4 expandable sections. Each section can potentially expand to the point where it will push the other section titles off the screen. At the moment, I've got the section titles stickied to the bottom of the screen if a section is too long so that users can still quickly switch sections without having to scroll too far.

Imgur

Is there a better way to keep all the section titles visible without forcing users to look at the top and bottom of the menu to navigate? Are there better design patterns for sidebar navigation that would work better with this much text than an accordion menu?

EDIT: Just to clarify, this is a sidebar menu on a website, not a phone app. The image is only pertaining to the sidebar and isn't the entire site design.

Improve this question
4
  • That is essentially an accordion menu. Pretty standard option. That said, what's not standard is a paragraph of text for each link. It may make perfect sense for your needs, but that's somewhat atypical. If it makes sense to have that much text, it may make more sense to consider an index or TOC type of navigation for your site rather than a side bar.
    – DA01
    Mar 20, 2014 at 2:47
  • @DA01 Unfortunately, I effectively have to condense a filtered feed into a sidebar... perhaps a better way of phrasing my question would be to ask if there are types of sidebar navigation that would be more suitable than an accordion menu? Thanks for helping me clarify my question :)
    – rach oune
    Mar 20, 2014 at 16:40
  • I think you handled it in a really good way. If you don't mind I am going to use this idea in a few places I was trying to figure out how to handle an accordion that has really long content :) I am assuming the content inside the open item still scrolls.
    – pathfinder
    Mar 22, 2014 at 2:40
  • 1
    @pathfinder Absolutely, the tricky bit is making sure that it's clear that the content inside the open item scrolls separately from the rest of the sidebar.
    – rach oune
    Mar 24, 2014 at 16:30

3 Answers 3

Reset to default
0

You could use a variation of the Multi-Toggle with Active Parent Links Design pattern. Perhaps sticking your Parent links left, while placing your expandable menu items to the right of the menu structure.

http://codepen.io/micahgodbolt/full/mnLiF

enter image description here

I do think that sticking parent menu links to the bottom of the screen could be problematic considering how screen sizes can vary so significantly. What if the screen height is so small that the menu can't expand at all?

It seems like this is a perfect example of a content issue. I'm not sure there is a better approach beyond addressing the CONTENT length for your menu to deal with the size of the sub-sections. Can you just show the headline of the article in the sub-menu, do you need the whole description and "view" link?

You could also add a scroll bar to your sub-menu to keep it at a max-size. Also clunky.

Improve this answer
1
  • Yup, varying screen sizes is definitely my biggest problem with this. Unfortunately, the design requirements I have to work within are effectively creating a feed reader in a sidebar. I'm guessing I'm out of options at this point, but thanks anyway!
    – rach oune
    Mar 28, 2014 at 3:06
0

Considering the width of your image, I assume it's a phone app, although it may also be a narrow column on a web site. In any case, you can have just a short excerpt of the content and an indication to see the rest on another screen/page, it could three dots, a link like "more content" or any other method that you like.

That works well for what you have as articles now, but if you also need a solution for the sections, then you have to change the design, using a Table of Content, as suggested by @DA01 may work very well.

Improve this answer
0

You could place bullits (for instance: dots) in a vertical side menu that represent the sections. On touch the menu should show all the titles next to the bullits, or you could navigate immediately to the section selected. It depends on how well your user would know the content and if they are discovering or navigating.

example: https://www.apple.com/nl/iphone-5s/

Improve this answer
1
  • Sorry, I don't think I was very clear, but it's for a website and not specifically a smartphone app. I'll edit the original post to clarify that. It sounds like the touch functionality you're referring to could be replicated with hover, but using bullets as an indicator of available content would be more useful if I was trying to save horizontal screen real estate, and not so much with keeping all the section titles visible at all times.
    – rach oune
    Mar 24, 2014 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.