Dropdowns for Goldilocks CSS

Commentary

Dropdowns are toggle-able, contextual overlays for displaying a curated lists of links, call-to-action buttons and text. These are typically used to unclutter the main page by holding secondary links or information that are shown only when needed. Goldilocks-CSS dropdowns are CSS only, no javascript required.

Dropdown boxes and menus are overused and clunky but can be useful for revealing a list of options or commands.

Norman Nielsen group, Dropdowns: Design Guidelines

Dropdowns have their advantages in that they conserve screen space. They are also a standard widget and users know how to deal with them. Despite these advantages, web usability would increase if designers used dropdowns less often. Some design guidelines for dropdowns:

Keep the menu label or description in view when the dropdown is open;
Keep global navigation options out of dropdown menus on desktop;
Gray out any unavailable options instead of removing them;
Very long dropdowns that require scrolling make it impossible for users to see all their choices in one glance;
Avoid interacting menus where the options in one menu change when users select something in another menu on the same page;
Avoid dropdown boxes when typing may be faster;
Avoid dropdown boxes for data that is highly familiar to your users, such as the day, month, or year;

Goldilocks-CSS type dropdowns are driven by CSS only, no javascript required. The dropdown can be triggered by hovering on the drop down button (default) or by clicking if the .is-click-open class is added to the main container. The .dropdown-menu can be left (default) right or up oriented.

Usage

Classes:
`.dropdown`	Defines main component container.
`.is-up`, `.is-right`	Optional modifiers for `.dropdown-menu` container alignment but applied at parent level.
`.is-click-open`	Triggers expansion of dropdown when user clicks on parent button. Note that this overrides hover open.
`.dropdown-trigger`	Container for the button that activates the `.dropdown-menu`. Note that Safari requires setting the `tabindex` attribute in order to be able to respond to CSS `:focus-within` in order to use a click to show the for the `.dropdown-menu`.
`.dropdown-menu`	Container for list of items to be hidden or shown.
`nav` HTML tag	Child of `.dropdown-menu` that contains links, buttons or other content.
`.is-active`	Optional link decoration for items inside `nav`.
`hr` HTML tag	Optional divider drawn in `nav` block

Dependencies:
File:	dropdown.css
Variables:	--bg-main-comp, --bg-main-ter, --border-main, --indicator, --link, --mar-vert, --pad-vert, --radius-comp, --shadow, --text, --text-darker, --text-invert, --weight-medium

Examples

Common Dropdown Formats


                 <div class="dropdown [is-click-open]">
                    <div class="dropdown-trigger" tabindex="0">
                        <button class="is-default-inverted"  aria-haspopup="true" aria-controls="dropdown-menu3">
                            <span>Dropdown Link on Click</span>
                        </button>
                    </div>

                    <div class="dropdown-menu" id="dropdown-menu3">
                        <p>Other dropdown item with a really long text but not a link</p>
                        <nav>
                            <ul>
                                <li><a href="#">Dropdown item</a></li>
                                <li><a href="#" class="is-active">Active item</a></li>
                                <li><a href="#">Other dropdown item</a></li>
                            </ul>
                        </nav>

                        <hr>
                        <button class="is-success">Call To Action</button>
                    </div>
                </div>

Dropdown Alignments


                <div class="dropdown [is-right, is-up] [is-click-open]">
                    <div class="dropdown-trigger" tabindex="0">
                        <button aria-haspopup="true" aria-controls="dropdown-menu9">
                            <span>Right aligned</span>
                        </button>
                    </div>

                    <div class="dropdown-menu" id="dropdown-menu9">
                        <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
                        <nav>
                            <ul>
                                <li><a href="#" class="is-active">Active item</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>