Responsive FT page header.
Tested and working on:
Browsers | Primary Experience | Core Experience |
---|---|---|
Chrome | 35+ | 35+ |
Firefox | 30+ | 30+ |
Safari | 7+ | 7+ |
IE | 9+ | 8+ |
Known issues:
- IE:
- Masthead not displaying properly
- IE8 and IE9:
- Secondary bar doesn't occupy full width of XL screens because they don't support linear-gradient.
- IE8:
- It doesn't support the
<nav>
and<header>
element. Products need to use HTML5Shiv which is bundled in Modernizr. Also, it runs as core experience.
- It doesn't support the
The header consists of the following content containers:
- Primary: Left
- Primary: Centre
- Primary: Right
- Primary: Featured
- Secondary: Left
- Secondary: Right
Each content container can contain one of the following:
- Custom content (e.g) - brand-specific logo/title etc
- A title
- Navigation (primary theme)
- Navigation (secondary theme)
- Navigation (tools theme)
- Breadcrumb
For navigation, this module uses o-hierarchical-nav, so please check out its documentation to add it in your header.
There are three horizontal Navigation styles depending on the class you add to the <nav>
:
- Primary:
o-ft-header__nav--primary-theme
- Secondary:
o-ft-header__nav--secondary-theme
- Tools:
o-ft-header__nav--tools-theme
Primary and Secondary navigations work identically except for the fact the one goes in a Primary container, and the other in the Secondary Container. They can both hold Standalone Items, Sub-Levels and Controllers for a DOM element.
As for the Tools theme, it should only be used in a Primary Container, normally in Primary Right. It's intended to be used to contain an icon and text in each element of the navigation. An example of the markup:
<nav class="o-ft-header__primary__right o-hierarchical-nav o-ft-header__nav--tools-theme" data-o-component="hierarchical-nav" data-o-version="{{o-hierarchical-nav.module-version}}">
<ul data-o-hierarchical-nav-level="1"><!--
--><li data-priority="1"><a><i class="demo__icon demo__icon__search"></i>Tool 1</a></li><!--
--><li data-priority="3"><a><i class="demo__icon demo__icon__settings"></i>Tool 2</a></li><!--
--><li data-priority="4"><a><i class="demo__icon demo__icon__share"></i>Tool 3</a></li><!--
--><li data-priority="2"><a><i class="demo__icon demo__icon__account"></i>Tool 4</a></li><!--
--><li data-more class="o-hierarchical-nav__parent" aria-hidden="true"><a><i class="demo__icon demo__icon__more"></i>More</a></li><!--
--></ul>
</nav>
### Responsiveness
On primary experience, all navigations use o-squishy-list to set priorities to top level items and only show as many items it can to fit the available width.
Like it's explained here, you need to implement o-hoverable.
### Arrow icons
So that your nav elements have arrows telling the user in which direction the sub-level menu is going to appear, you can add an <i>
tag with the class .o-hierarchical-nav__parent_down-arrow
like explained here.
To add your brand color, you need to set the brand
colour custom use case like this:
@include oColorsSetUseCase(product-brand, background, claret);
This brand colour will be used in both this module and in o-ft-footer. If you want a different brand colour for the header than is used in the footer, set the o-ft-header-product-brand
use case instead.
The $o-ft-header-brand-color
variable is now deprecated and will be removed in next major release.
If you want mega-dropdowns to appear showing part of your branded secondary container, you would also need to add the class .o-ft-header__mega-dropdown--primary
on your DOM element.
If you want to have the FT logo on your website, you just need to have the following markup:
<div class="o-ft-header__logo o-ft-header__logo--ft">
<a href="http://www.ft.com"><abbr title="Financial Times">FT</abbr></a>
</div>
You can also have a 'Back to FT.com' button on your navigation based on the tools theme using this markup:
<a href="http://ft.com"><i class="o-ft-header__back-to-ft">Back to FT.com</i></a>
The primary-left, primary-right, primary-featured and secondary-left need to have a fixed width for primary-centre to adjust appropiately. To change any the default widths, you would need to add the following variables to your stylesheet before importing this module's sass:
$o-ft-header-primary-left-width $o-ft-header-secondary-left-width $o-ft-header-primary-featured-width
An o-ft-header object must be constructed for every <header>
you have on your page that uses this module.
var oFtHeader = require('o-ft-header');
var header = document.querySelector('.o-ft-header');
var ftHeader = new oFtHeader(header);
Alternatively, a o.DOMContentLoaded
event can be dispatched on the document
to auto-construct an o-ft-header object for each element with a data-o-component="o-ft-header"
attribute:
require('o-ft-header');
document.addEventListener("DOMContentLoaded", function() {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});