<header id="header" class="header theme--main">
<div class="lang-switcher-overlay"></div>
<div class="header__inner grid">
<div class="nav-toggle col col-align-middle" tabindex="0">
<div class="nav-toggle--wrapper">
<div class="nav-toggle__title">MENU</div>
<div class="nav-toggle__title close">CLOSE</div>
<div class="nav-toggle__spans">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header__logo col text--center">
<a href="#" title="← Back to the homepage">
<picture>
<source media="(min-width: 1350px)" srcset="/assets/images/ftse-russell-branded-logo.svg">
<img src="/assets/images/ftse-russell-branded-logo.svg" width="90" height="90" alt="FTSE Russell" />
</picture>
</a>
</div>
<div class="header__right col col-10">
<div class="header__top">
<div class="top-menu">
<nav class="nav navbar__top-menu text--right" aria-label="Top Menu">
<h2 class="visuallyhidden">Top Menu</h2>
<ul class="navbar__top-menu__links" role="menubar" aria-hidden="false">
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">About FTSE Russell</a>
</li>
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">Support Portal</a>
</li>
<li class="navbar__top-menu__item" role="menuitem">
<a class="navbar__top-menu__item__link" href="#">Client Login</a>
</li>
</ul>
</nav>
<nav role="navigation" class="language-switcher">
<h2 class="visuallyhidden">Language</h2>
<ul class="dropdown-menu" role="listbox" aria-hidden="false">
<li class="lang active">
<a title="Active Language English" tabindex="" href="#">English<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
</li>
</ul>
<div class="lang-switcher__popup">
<ul class="languages-list">
<li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> English</li>
<li class="lang"><a href="#" title="Language Français">Français</a></li>
<li class="lang"><a href="#" title="Language Deutsche">Deutsche</a></li>
<li class="lang"><a href="#" title="Language 日本語">日本語</a></li>
<li class="lang"><a href="#" title="Language 中文">中文</a></li>
<li class="lang"><a href="#" title="Language Español">Español</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header__bottom grid">
<div class="header__menu col col-10 col-align-middle">
<div class="main-menu">
<nav class="navbar main-menu__nav" aria-label="Main Menu">
<h2 class="visuallyhidden">Main Menu</h2>
<ul class="nav main-menu grid" role="navigation" aria-hidden="false">
<li class="main-menu__item has-dropdown" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="#">Indexes</a>
<i class='icon icon-chevron-down'> <svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></i><span class="caret"></span>
</div>
<ul class="submenu browser-default">
<li>
<a class="submenu__item__link" href="#">Indexes sub1<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub2<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub3<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub4<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub5<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub6<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub7<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub8<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
<li>
<a class="submenu__item__link" href="#">Indexes sub9<svg class="submenu-icon">
<use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
</svg></a>
</li>
</ul>
<ul class="megamenu">
<div class="megamenu--wrapper container">
<div class="megamenu--inner grid">
<div class="megamenu__left col">
<div class="megamenu__featured">
<div class="megamenu__featured--title">
<h3>Indexes</h3>
<p>FTSE Russell Indexes</p>
</div>
<img src="" />
</div>
</div>
<div class="megamenu__middle col">
<ul class="megamenu__submenu">
<li>
<a class="megamenu__item__link" href="#">Indexes sub1</a>
<p>Indexes sub1 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub2</a>
<p>Indexes sub2 desd</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub3</a>
<p>Indexes sub3 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub4</a>
<p>Indexes sub4 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub5</a>
<p>Indexes sub5 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub6</a>
<p>Indexes sub6 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub7</a>
<p>Indexes sub7 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub8</a>
<p>Indexes sub8 desc</p>
</li>
<li>
<a class="megamenu__item__link" href="#">Indexes sub9</a>
<p>Indexes sub9 desc</p>
</li>
</ul>
</div>
<div class="megamenu__right col col-middle">
<ul class="megamenu__submenu">
<li>
<a class="megamenu__item__link" href="#">Contacts</a>
</li>
<li>
<a class="megamenu__item__link" href="#">News</a>
</li>
<li>
<a class="megamenu__item__link" href="#">Standards Process</a>
</li>
</ul>
<a href="#" class="btn btn--active">
<span>Read More</span>
</a>
</div>
</div>
</div>
</ul>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Research</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Analytics</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Financial Solution</a>
</div>
</li>
<li class="main-menu__item" role="menuitem">
<div class="main-menu__item__inner">
<a class="main-menu__item__link" href="">Blogs & Events</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__search col icon icon-search col-align-middle text--right">
<a href="#">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
</svg>
</a>
</div>
<div class="language-switcher__mobile col-align-middle">
<nav role="navigation" class="language-switcher">
<h2 class="visuallyhidden">Language</h2>
<ul class="dropdown-menu" role="listbox" aria-hidden="false">
<li class="lang active">
<a title="Active Language En" tabindex="" href="#">En<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
</li>
</ul>
<div class="lang-switcher__popup">
<ul class="languages-list">
<li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> En</li>
<li class="lang"><a href="#" title="Language Fr">Fr</a></li>
<li class="lang"><a href="#" title="Language De">De</a></li>
<li class="lang"><a href="#" title="Language 日本語">日本語</a></li>
<li class="lang"><a href="#" title="Language 中文">中文</a></li>
<li class="lang"><a href="#" title="Language Es">Es</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="search-page ">
<div class="search-page__header">
<div class="search-page__title">
Search Site
</div>
<div class="search-page__close">
<a class="search-page__link" href="#">
<span>Advanced Search</span>
<svg class="in_page_navigation__icon">
<use xlink:href="/assets/sprites/icons.svg#ico-exit"></use>
</svg>
</a>
<span class="button search-page__close__button">Close X</span>
</div>
<div class="search-page__form">
<form action="#" method="get" accept-charset="UTF-8">
<div>
<input aria-label="Search" class="search-page__form__input" maxlength="128" name="query" placeholder="Search" required="" size="30" type="text" value="" tabindex="0">
</div>
<div class="search-page__submit-wrapper">
<button class="search-page__submit" type="button" name="button">
<svg class="in_page_navigation__icon">
<use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
</svg>
</button>
</div>
</form>
<span class="indicater"></span>
</div>
<span class="calculate-width"></span>
</div>
</div>
<header id="header" class="header{% if color %} theme--{{ color }}{% endif %}">
<div class="lang-switcher-overlay"></div>
<div class="header__inner grid">
<div class="nav-toggle col col-align-middle" tabindex="0">
<div class="nav-toggle--wrapper">
<div class="nav-toggle__title">MENU</div>
<div class="nav-toggle__title close">CLOSE</div>
<div class="nav-toggle__spans">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header__logo col text--center">
<a href="#" title="← Back to the homepage">
<picture>
<source media="(min-width: 1350px)" srcset="{{ logo.src }}">
<img src="{{ logo.src }}" width="{{ logo.size }}" height="{{ logo.size }}" alt="{{ logo.alt }}"/>
</picture>
</a>
</div>
<div class="header__right col col-10">
<div class="header__top">
{% render '@top-menu', top_menu %}
</div>
<div class="header__bottom grid">
<div class="header__menu col col-10 col-align-middle">
{% render '@main-menu', main_menu %}
</div>
<div class="header__search col icon icon-search col-align-middle text--right" >
<a href="#">
<svg class="icon">
<use xlink:href="/assets/sprites/icons.svg#ico-search"></use>
</svg>
</a>
</div>
<div class="language-switcher__mobile col-align-middle">
{% render '@language-switcher', language_switcher %}
</div>
</div>
</div>
</div>
{% if sub_menu %}
{% render '@sub-menu', sub_menu %}
{% endif %}
</header>
{% render '@search-page' %}
{
"color": "main",
"logo": {
"src": "/assets/images/ftse-russell-branded-logo.svg",
"alt": "FTSE Russell",
"size": 90
},
"top_menu": {
"menuItems": [
{
"title": "About FTSE Russell",
"url": "#",
"description": "About FTSE Russell",
"enabled": true
},
{
"title": "Support Portal",
"url": "#",
"description": "Support Portal",
"enabled": true
},
{
"title": "Client Login",
"url": "#",
"description": "Client Login",
"enabled": true
}
],
"language_switcher": {
"menuItems": [
{
"title": "English",
"url": "#",
"description": "English",
"active": true
},
{
"title": "Français",
"url": "#",
"description": "Français",
"active": null
},
{
"title": "Deutsche",
"url": "#",
"description": "Deutsche",
"active": null
},
{
"title": "日本語",
"url": "#",
"description": "Japanese",
"active": null
},
{
"title": "中文",
"url": "#",
"description": "Chinese",
"active": null
},
{
"title": "Español",
"url": "#",
"description": "Español",
"active": null
}
]
}
},
"main_menu": {
"menuItems": [
{
"title": "Indexes",
"subtitle": "FTSE Russell Indexes",
"url": "#",
"description": "FTSE Russell Indexes",
"enabled": true,
"below": [
{
"title": "Indexes sub1",
"url": "#",
"description": "Indexes sub1 desc",
"enabled": true
},
{
"title": "Indexes sub2",
"url": "#",
"description": "Indexes sub2 desd",
"enabled": true
},
{
"title": "Indexes sub3",
"url": "#",
"description": "Indexes sub3 desc",
"enabled": true
},
{
"title": "Indexes sub4",
"url": "#",
"description": "Indexes sub4 desc",
"enabled": true
},
{
"title": "Indexes sub5",
"url": "#",
"description": "Indexes sub5 desc",
"enabled": true
},
{
"title": "Indexes sub6",
"url": "#",
"description": "Indexes sub6 desc",
"enabled": true
},
{
"title": "Indexes sub7",
"url": "#",
"description": "Indexes sub7 desc",
"enabled": true
},
{
"title": "Indexes sub8",
"url": "#",
"description": "Indexes sub8 desc",
"enabled": true
},
{
"title": "Indexes sub9",
"url": "#",
"description": "Indexes sub9 desc",
"enabled": true
}
],
"spotlight": [
{
"title": "Contacts",
"url": "#",
"description": "Contacts",
"enabled": true
},
{
"title": "News",
"url": "#",
"description": "News",
"enabled": true
},
{
"title": "Standards Process",
"url": "#",
"description": "Standards Process",
"enabled": true
}
],
"cta": {
"href": "#",
"label": "Read More",
"mods": "active"
}
},
{
"title": "Research"
},
{
"title": "Analytics"
},
{
"title": "Financial Solution"
},
{
"title": "Blogs & Events"
}
],
"languagemToggleMobile": [
{
"title": "English",
"url": "#",
"description": "English",
"active": true
},
{
"title": "Français",
"url": "#",
"description": "Français",
"active": null
},
{
"title": "Deutsche",
"url": "#",
"description": "Deutsche",
"active": null
},
{
"title": "日本語",
"url": "#",
"description": "Japanese",
"active": null
},
{
"title": "中文",
"url": "#",
"description": "Chinese",
"active": null
},
{
"title": "Español",
"url": "#",
"description": "Español",
"active": null
}
]
},
"language_switcher": {
"menuItems": [
{
"title": "En",
"url": "#",
"description": "English",
"active": true
},
{
"title": "Fr",
"url": "#",
"description": "Français",
"active": null
},
{
"title": "De",
"url": "#",
"description": "Deutsche",
"active": null
},
{
"title": "日本語",
"url": "#",
"description": "Japanese",
"active": null
},
{
"title": "中文",
"url": "#",
"description": "Chinese",
"active": null
},
{
"title": "Es",
"url": "#",
"description": "Español",
"active": null
}
]
}
}
-
Content:
.header { z-index: 3000; margin: 0; background: $white; height: auto; padding-bottom: 5px; position: relative; @include mq($breakpoint-lg) { padding: $space-xs $space-md; } &:after { content: ""; position: absolute; bottom: 0; left: 0; background: linear-gradient(40deg, $primary 0%, $secondary 100%); height: 5px; width: 100%; } &.header--top { left: 0; position: fixed; right: 0; top: 0; } &__inner { grid-template-columns: 120px 1fr 120px; margin: 0; padding: $space-xs $space-md; @include mq($breakpoint-lg) { display: flex; grid-template-columns: 130px 1fr; padding: $spacer $space-xl; } } @include mq($breakpoint-lg) { position: fixed; top: 0; padding: 0; width: 100%; } &__right { @include mq-only($breakpoint-mob) { display: grid; } } &__top { display: none; @include mq($breakpoint-lg) { display: block; margin-top: 0; transition: all 0.4s ease; } } &--sticky { position: fixed; top: 0; z-index: 9999; box-shadow: 2px 2px 9px 1px rgba(0, 0, 0, 0.151); @include mq-only($breakpoint-mob) { width: 100%; } .main-menu__item__link { font-size: $font-size-base; transition: all 0.4s ease; } .header__top { margin-top: -50px; transition: all 0.4s ease; } .header__bottom { height:100%; transition: all 0.4s ease; } .megamenu { top: 100px; transition: all 0.4s ease; } .header__logo { img { height: 60px; width: 60px; transition: all 0.4s ease; } } } &__logo { display: flex; align-items: center; justify-content: center; a:focus img { transform: scale(.9); } img { height: 60px; width: 60px; transition: all 0.4s ease; } @include mq($breakpoint-lg) { //flex-shrink: 1; padding: 0; img { height: 130px; width: 130px; padding: 0; transition: all 0.4s ease; } } } &__bottom { height: 100%; margin: 0; transition: all 0.4s ease; display: flex; @include mq($breakpoint-lg) { grid-template-columns: 1fr 70px; height: auto; } } .language-switcher__mobile { .language-switcher .lang > a, .lang-switcher__popup li.lang { text-transform: uppercase; } } &__search { cursor: pointer; padding: 0; z-index: 999; width: 25px; @include mq($breakpoint-lg) { flex-shrink: 1; padding: $space-md; width: auto } .icon { width: 25px; height: 25px; fill: $primary; } } &__menu { background-color: $white; height: calc(100% - 80px); left: 0; padding: 0; position: fixed; top: 80px; transition: 0.5s ease; width: 100%; z-index: $zindex-dropdown; transform: translateX(-150%); @include mq($breakpoint-lg) { position: relative; top:0; display: flex; transform: none; background: none; justify-content: flex-end; align-items: center; height: 100%; } &--show { transform: translateX(0); } } } .lang-switcher-overlay { position: absolute; height: 100vh; width: 100vw; top: 0; background: transparent; z-index: 1010; display: none; &.open { display: block; } } - URL: /components/raw/header/_header.scss
- Filesystem Path: src/components/organisms/header/_header.scss
- Size: 3.5 KB
- Handle: @header
- Preview:
- Filesystem Path: src/components/organisms/header/header.html
- References (5): @top-menu, @main-menu, @language-switcher, @sub-menu, @search-page
- Referenced by (43): @about_us, @analytics, @asset_class, @detail, @listing, @listing--alternative, @careers, @company_report, @contact, @corporate_responsibility, @events, @homepage, @homepage--japanese, @index_industry_association, @derivates, @etfs, @russell_reconstitution, @our_clients, @our_story, @press_releases_detail, @press_releases, @research-detail, @research-listing, @search_results, @full_width_left_sidebar, @index_family, @landing_page_layout, @landing_page_layout--full-width, @landing_page_layout--first, @landing_page_layout--second, @landing_page_layout--third, @landing_page_layout--a, @landing_page_layout--b, @landing_page_layout--c, @landing_page_layout--d, @landing_page_layout--e, @landing_page_layout--f, @landing_page_layout--g, @landing_page_layout--h, @sidebar_left, @sidebar_right, @single_column_container, @single_column_full
There are no notes for this item.