Accordion Navigation (accordion)

Recently, a lot of things, work, life, feelings, affection ... everyone has received setbacks and difficulties in every aspect, but please enjoy and face it, because this is the complete life ...

Learn a lot from Yahoo pattern, see this piece of Chinese information is relatively few, so intend to start translating. Also, because the accordion navigation component is also used in the new version of the client, write this first.

Accordion Navigation (accordion)

Accordion Navigation (or accordion menu) is a folding panel to display a class of information after the organization, in a certain space, it provides a large number of links or other optional content access.

Each embedded panel can be expanded independently (usually the other panels are shrunk), typically by clicking through the mouse or by right-clicking the Panel title bar (or the Expand/Shrink button on the title bar) to display a child option.

Solve what problem?

When you want to display a lot of content in a limited space, or if you have a lot of content, and if the user is at a loss at the moment, the question is how to get the user to access all the things and understand (digest, in digestible chunks) without scrolling the page, Because scrolling the page lets users detach from the context, or leave them where they like in the page.

When do you use it?

The number of selected items is larger, the page space is limited, and the list of options can be logically categorized into smaller chunks of content that are roughly the same amount of content.

Note: Here, notice that the list of options is not the title bar of the content (such as the screenshot is 4 columns), but the contents of the elements, such as news headlines, authors, dates, pictures, the want, text chain and so on.

What is the specific solution?

Two-level classification for options

1, the top-level category is the display category or grouping

2, Level Two category is the list of options placed in each group

Accordion navigation The typical style is a group of collapsible panels (unlike the look of the tree navigation), with the contents of the first-level category as labels (label). Category labels are generally the same as the panel width clickable title bar, or a type of expansion/contraction of the icon.

Accordion navigation By default you can have a panel that is expanded.

Suggestions

The most important content of the panel by default to expand, one can show important options, and then can play a role in a demonstration, shrinking the list of each item can be expanded independently

Highlight the currently expanded panel so that the user can identify the title bar that is different when the panel expands and shrinks

Avoid embedding an accordion navigation into another accordion navigation. If you find that you need to do this, the tree menu or other elements that are appropriate to display the multilevel structure may be more appropriate.

Translator Note: One of the most recent versions of the accordion navigation is not aware that only a few panels can shrink and expand, and at least one panel will unfold. At that time the design of the title bar icon is an up/down arrow to indicate the expansion/contraction of the state, but later found that the logic of any adjustment will be ambiguous, and later found that this component, will not hesitate to replace the icon with a plus/minus sign, the result is no problem ....

Available options

Accordion navigation can be configured to always have a panel expanded or other more flexible (all panels can be turned off and multiple panels can be opened at the same time). Some designers think the best way is to allow only one panel to open, but other people do not recognize.

Accordion navigation can be configured to only have one panel open at a time, but many examples allow simultaneous opening of multiple.

Unless you have form elements or other immutable design elements that require accordion navigation to be consistently consistent in size, the accordion navigation element should be able to vary according to the different contents of the expanded panel.

In general, accordion navigation is done by clicking to expand the Panel, but if the user's usage is "happy/interesting/try this", then the mouse over to expand the panel is acceptable.

Why use this component?

The main reason to use this component is to display a large number of options in a limited space.

Special cases

Most accordion navigation is placed vertically, but can also be used horizontally.

Accessibility

For keyboard users, like tree menus and labels, accordion navigation is often interrupted. You can give the accordion navigation tag between the logo and the toggle panel's + + icon plus keyboard navigation.

When JavaScript is disabled, accordion navigation needs to be compatible, and you can consider expanding all the panels.

If nothing is displayed, it may cause loss of content for screen readers. Consider setting the height to 0来 solution.

Original address: http://developer.yahoo.com/ypatterns/navigation/accordion.html

Article Source: pd4.me/blog/reprint Please indicate the source link.