eBay

Fake Menu

MyEbay Links

Introduction

A click-activated (button) or hover-activated (link) flyout, with overlay containing a list of links. Clicking any link will perform a full-page navigation.

If you desire a menu that triggers a partial page reload instead of full page reload, please use the Menu pattern instead.

The distinction between menuitems and links is important! A menuitem is a command that executes JavaScript, whereas a link is a command that navigates to a url.

Working Examples

You can take a look at the fake menu pattern in action on our examples site.

You can get an idea of the required markup structure by viewing our bones site.

Terminology

fake menu
the composite pattern as a *whole*, containing an overlay and it's host
host
a link, button or stealth button that *hosts* the overlay
overlay
the non-modal overlay that contains the fake menu items
fake menu item
a hyperlink
expanded/collapsed
the state (i.e. visible or hidden)
hover-activated
the overlay expands on hover of host (implies host is a link)
click-activated
the overlay expands on click of host (implies host is a button)

Best Practices

For mouse users, a fake menu can be triggered on hover of a link. For keyboard users, a fake menu must always be triggered via a button. This means that if using a link as the host (to expand the fake menu on hover), a stealth button must be inserted for keyboard users. A stealth button is a button that only appears on keyboard focus.

Avoid using a fake menu for important and/or frequently navigated links. Links in a hidden overlay will not show up in screen reader's list of links until the overlay is visible. This issue may be circumvented to some extent by use of a navigation landmark region around the fake menu.

Interaction Design

This section provides interaction guidelines for keyboard, screen reader, and pointing devices.

Keyboard

If host is a link, pressing TAB key while focus is on host must move keyboard focus to stealth button host.

ENTER or SPACEBAR on button or stealth button host must expand overlay. Keyboard focus can be moved to first fake menu item.

With focus on fake menu item, TAB key must move focus to next fake menu item.

With focus on fake menu item, ESC must collapse the overlay and must return focus to host.

With focus on last fake menu item, TAB key must move to next interactive element on page and should collapse overlay.

ENTER key must activate any fake menu item with focus (i.e. links).

Screen Reader

Expanded state will be announced when focus is on button host or stealth button host.

Fake menu items must be identified as links (e.g. not menuitems or buttons).

Pointer

Hovering over a link host must expand overlay.

Hovering out of a link host must collapse overlay.

Clicking button host must toggle state of overlay.

Developer Guide

Unlike a menu, which is always opened via a button for all devices, there are two ways in which a fake menu can be opened. The first, and simplest method, is also via a button for all devices. The second, and more complicated method, is via link element for pointing devices, combined with a hidden stealth button for keyboard.

HTML (content)

We will begin with the simplest use case of a button as the host.

<span class="fake-menu">
   <button class="fake-menu__host" type="button">Categories</button>
   <span class="fake-menu__overlay">
      <!-- fake menu items go here -->
   </span>
</span>

Notice placement of the host (the button) directly before the overlay element. This allows natural tab order flow and screen reading order from the host into the overlay.

You may also notice that this structure is almost identical to the flyout. This is because the fake menu pattern is an extension of the flyout pattern. In essence it is just a button that opens an overlay of content; the content in this case being a list of links.

<span class="fake-menu">
   <button class="fake-menu__host" type="button">Categories</button>
   <span class="fake-menu__overlay">
      <ul>
         <li><a href="http://www.ebay.com">Fake-Menu Item 1</a></li>
         <li><a href="http://www.ebay.com">Fake-Menu Item 2</a></li>
         <li><a href="http://www.ebay.com">Fake-Menu Item 3</a></li>
      </ul>
   </span>
</span>

CSS (presentation)

Content coming soon.

JavaScript (behaviour)

Content coming soon

ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of this pattern.

aria-expanded

This boolean attribute signifies the expanded state of the host button or stealth button (but is not used on a host link).

results matching ""

    No results matching ""