Banner

Banner

Banner with Breadcrumb

Banner with an Image Logo

Classes

• lotusBanner - the class that goes on the outermost containing div.
• lotusRightCorner, lotusInner - classes on inner nodes of lotusBanner for additional styling options.
• lotusLogo - the class that goes on the link that contains an image or plain text.
• lotusInlinelist - general class used for making the lists horizontal that is used for the two sets of links in the banner.
• lotusUtility - an additional class that goes on the list of utilities (user, share, help).
• lotusLinks - an additional class that goes on the list of application links.
• lotusBannerBtn - the class that goes on an anchor in the banner to style it like a button.
• lotusUnreadBadge - the class that goes on a span inside a list item for an unread or new count.
• lotusBadgeIcon - the class that goes on the lotusUnreadBadge node when the list item contains an icon.
• lotusBannerExt - goes on the outermost node for the area under the banner.
• lotusWrapper, lotusInner - classes on inner nodes of lotusBannerExt for additional styling options.
• lotusBreadcrumbs - see breadcrumbs component.
• lotusBreadcrumbsMore - the class on the dropdown anchor.

Basic Implementation

The banner is created using three nested divs for additional styling options for customer customization. The three classes used are described above.

The banner includes a logo that can be text or an image. To use the image instead of text, remove display:none on the image and remove display:block on the lotusAltText span, all within the lotusLogo link. When using the image, the lotusAltText will appear in high contrast mode. The image should be created with no extra pixels on the edges so it will align properly horizontally and vertically.

A list with the class of lotusInlinelist and lotusUtility appears next in the banner, followed by a list with a class of lotusInlinelist and lotusLinks.

See the interactive.htm example page for the drop-down navigation menu code.

IMPORTANT CODING NOTE: Firefox has rendering issue when there are return characters within the inline list html, so code the application links and utility links as one string with no carriage returns.

If you need a breadcrumb under the banner, include the lotusBannerExt structure.

Accessibility

If using HTML5, wrap the banner and title bar in a header element and assign it the landmark role="banner". (Wrap the components with a div assigned role="banner" if not using HTML5.)

The application links in the banner follow the Site Navigation design pattern and, specifically, the flat navigation pattern and are marked up as a tool bar.

Put role="navigation" and aria-label="[Product]" on the nav element wrapping the lotusLinks ul, where [Product] is the name of your overall product (e.g. Connections, Portal, etc.).

Put role="toolbar" on the lotusLinks ul tag and role="presentation" on the li elements.

Put role="button" on the link elements. For the selected application, put aria-pressed="true".

For each link that has a drop-down menu, put aria-haspopup="true" on the link element.

Also add aria-owns="yourMenuID" if the menu is not a descendant of the triggering element, or is shared by multiple triggering elements, in which case you would add and remove aria-owns as the triggering element shows/hides the menu.

Examples

• The banner is on every page

Sample HTML

Sample HTML - breadcrumb

Sample HTML - image logo

CSS (banner.css)

Theme CSS (bannerTheme.css)

This component started off being styled by using lotusBanner as an id. This is obsolete. Assign lotusBanner as a class.

There are 3 wrapping divs to support a look of rounded corners, which originated with Connections R1 and other products.

4/22/09: Created drop-down navigation menus (seen on interactive.htm page).

6/17/09: Moved Lotus product logo to a background image and added lotusAltText for high contrast mode.

January 2011: Added accessibility information.

February 9, 2011: Removed the styling to automatically hide the nav menu piece of this component using top:-9999px. This wasn't hiding the menus for screen reader users.

February 10, 2011: Changed the product logo to text by default, allowing the image to be used as a variation. The logo is now clickable.

February 23, 2011: Updated the drop-down menus to be center aligned.

March 20, 2011: Changed the lotusBanner node from a HTML5 header to a div. If using HTML5, the banner and title bar should be wrapped in a header element.

April 2011: Added share something link.

August 25, 2011: Moved mega menus to the Mega Menu page.

September 2011: Removed the share something link and added icon utility links. Added lotusBannerExt for the breadcrumb.

February 29, 2012: Updated the accessibility section to include the relevant site navigation ARIA design patterns. Added the toolbar roles to the application links.

March 8, 2012: Removed the banner role from the banner and moved it to the header element wrapping the banner and title bar (on the component pages). Updated the text for the aria-label on the application links to say "[Application]." Added the star unread badge example.

May 20, 2012: Added menu indicators back to the banner items that have menus. New lotusBannerBtn class for when the banner has a button-styled link.

June 27, 2012: Updated color contrast of the breadcrumb drop-down to be accessible in the gen2 theme (small text 4.5:1 equivalent).

July 2, 2012: Updated color contrast of the asterisk image (for unread mail) to be accessible in the gen2 theme (small text 4.5:1 equivalent).

July 18, 2012: Removed all use of outline so the focus indicator is more distinct. Also added IE gradients to the selected and hovered banner items.

August 2, 2012: Updates to drop down arrow icons/styles to meet color contrast requirements.