Header: Monochrome

WIP

HTML
Assets
Info
Notes


        
        <ul class="Skiplinks js-fr-bypasslinks u-hiddenPrint">
    <li><a href="#main">Vai al Contenuto</a></li>
    <li><a class="js-fr-offcanvas-open" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">Vai alla navigazione del sito</a></li>
</ul>

<header class="Header  u-hiddenPrint">

    <div class="Header-banner u-background-50">
        <div class="Header-owner Headroom-hideme u-border-bottom-xxs">
            <a href=""><span>Nome amministrazione afferente</span></a>
            <div class="Header-languages u-background-50">
                <a href="#languages" data-menu-trigger="languages" class="Header-language u-border-none u-zindex-max u-inlineBlock">
            <span class="u-hiddenVisually">lingua attiva:</span>
            <span class="">ITA</span>
            <!-- <span class="u-hidden u-md-inlineBlock u-lg-inlineBlock">Italiano</span> -->
            <span class="Icon Icon-expand u-padding-left-xs"></span>
          </a>
                <div id="languages" data-menu class="Dropdown-menu Header-language-other u-jsVisibilityHidden u-nojsDisplayNone">
                    <span class="Icon-drop-down Dropdown-arrow u-color-white"></span>
                    <ul>
                        <li><a href="#1" class="u-padding-r-all"><span lang="en">English</span></a></li>
                        <li><a href="#1" class="u-padding-r-all"><span lang="ar">عربي</span></a></li>
                        <li><a href="#2" class="u-padding-r-all"><span lang="ch">中文网</span></a></li>
                        <li><a href="#3" class="u-padding-r-all"><span lang="de">Deutsch</span></a></li>
                        <li><a href="#8" class="u-padding-r-all"><span lang="es">Español</span></a></li>
                        <li><a href="#4" class="u-padding-r-all"><span lang="fr">Français</span></a></li>
                        <li><a href="#5" class="u-padding-r-all"><span lang="ja">日本語</span></a></li>
                        <li><a href="#6" class="u-padding-r-all"><span lang="pt">Portuguese</span></a></li>
                        <li><a href="#7" class="u-padding-r-all"><span lang="ru">НА РУССКОМ</span></a></li>
                        <li><a href="#10" class="u-padding-r-all"><span lang="uk">УКРАЇНСЬКA</span></a></li>
                        <li><a href="#9" class="u-padding-r-all"><span lang="tr">TÜRKÇE</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="Header-navbar u-background-50">
        <div class="u-layout-wide Grid Grid--alignMiddle u-layoutCenter">
            <div class="Header-logo Grid-cell" aria-hidden="true">
                <a href="" tabindex="-1">
          <img src="//placehold.it/75x80" alt="">
        </a>
            </div>

            <div class="Header-title Grid-cell">
                <h1 class="Header-titleLink">
                    <a href="/">
            Nome della Pubblica Amministrazione<br>
            <small>eventuale sottotitolo</small>
          </a>
                </h1>
            </div>

            <div class="Header-searchTrigger Grid-cell">
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-search u-background-50" title="attiva il form di ricerca" aria-label="attiva il form di ricerca" aria-hidden="false">
        </button>
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-close u-hidden u-background-50" title="disattiva il form di ricerca" aria-label="disattiva il form di ricerca" aria-hidden="true">
        </button>
            </div>

            <div class="Header-utils Grid-cell">
                <div class="Header-social Headroom-hideme">
                    <p>Seguici su</p>
                    <ul class="Header-socialIcons">
                        <li><a href="" title="Facebook"><span class="Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                        <li><a href="" title="Twitter"><span class="Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                        <li><a href="" title="Youtube"><span class="Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                    </ul>
                </div>
                <div class="Header-search" id="header-search">
                    <form class="Form">
                        <div class="Form-field Form-field--withPlaceholder Grid u-background-white u-color-grey-30 u-borderRadius-s" role="search">
                            <input class="Form-input Form-input--ultraLean Grid-cell u-sizeFill u-text-r-s u-color-black u-text-r-xs u-borderRadius-s" required id="cerca">
                            <label class="Form-label u-color-grey-50 u-text-r-xxs" for="cerca">cerca nel sito</label>
                            <button class="Grid-cell u-sizeFit Icon-search Icon--rotated u-color-grey-50 u-padding-all-s u-textWeight-700" title="Avvia la ricerca" aria-label="Avvia la ricerca">
  </button>
                        </div>
                    </form>

                </div>
            </div>

            <div class="Header-toggle Grid-cell">
                <a class="Hamburger-toggleContainer js-fr-offcanvas-open u-nojsDisplayInlineBlock u-lg-hidden u-md-hidden" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">
          <span class="Hamburger-toggle" role="presentation"></span>
          <span class="Header-toggleText" role="presentation">Menu</span>
        </a>
            </div>

        </div>
    </div>
    <!-- Header-navbar -->

    <div class="Headroom-hideme u-textCenter u-hidden u-sm-hidden u-md-block u-lg-block">

        <nav class="Megamenu Megamenu--default js-megamenu u-background-50" data-placement="bottom-start">
            <ul class="Megamenu-list">
                <li class="Megamenu-item">
                    <a href="#">
        Nulla rerum magni
        <br>Earum rem culpa
      </a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/">Earum rem culpa</a>
                                <ul>
                                    <li>
                                        <a href="/1">Numquam sit veniam</a>
                                    </li>
                                    <li>
                                        <a href="/2">Voluptatem quia cum</a>
                                    </li>
                                    <li>
                                        <a href="/3">Totam et amet</a>
                                    </li>
                                    <li>
                                        <a href="/4">Quo illo molestiae</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="">Dolorum quod quia</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="">Aliquid deleniti quae</a>
                                <ul>
                                    <li>
                                        <a href="/1">Aut illum aliquid</a>
                                    </li>
                                    <li>
                                        <a href="/2">Consequatur eius molestiae</a>
                                    </li>
                                    <li>
                                        <a href="/3">Nulla rerum magni</a>
                                    </li>
                                    <li>
                                        <a href="/4">Earum rem culpa</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="">Numquam sit veniam</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="">Voluptatem quia cum</a>
                                <ul>
                                    <li>
                                        <a href="/1">Totam et amet</a>
                                    </li>
                                    <li>
                                        <a href="/2">Quo illo molestiae</a>
                                    </li>
                                    <li>
                                        <a href="/3">Dolorum quod quia</a>
                                    </li>
                                    <li>
                                        <a href="/4">Aliquid deleniti quae</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="">Aut illum aliquid</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Consequatur eius molestiae</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Nulla rerum magni</a>
                            </li>
                            <li>
                                <a href="/2">Earum rem culpa</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Numquam sit veniam</a>
                            </li>
                            <li>
                                <a href="/2">Voluptatem quia cum</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Totam et amet</a>
                            </li>
                            <li>
                                <a href="/2">Quo illo molestiae</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Dolorum quod quia</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Aliquid deleniti quae</a>
                            </li>
                            <li>
                                <a href="/2">Aut illum aliquid</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Consequatur eius molestiae</a>
                            </li>
                            <li>
                                <a href="/2">Nulla rerum magni</a>
                            </li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li>
                                <a href="/1">Earum rem culpa</a>
                            </li>
                            <li>
                                <a href="/2">Numquam sit veniam</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>

    </div>

</header>

File:

Content:


                                /* @define Header; weak */

:root {
  --Header-banner-bg: var(--Color-grey-80);
  --Header-navbar-bg: var(--Color-50);
  --Header-searchTrigger-bg: var(--Color-50);
  --Header-languages-bg: var(--Color-grey-80);
  --Header-activeLanguage-bg: var(--Color-80);
  --Header-language-other-bg: var(--Color-white);
  --Header-socialIcons-bg: var(--Color-white);
  --Header-text-color: var(--Color-white);
  --Header-search-maxWidth: 20em;
}

.Header {
  width: 100%;
}

.Header-banner {
  @extend .u-cf;
  @extend .u-sizeFull;
  @extend .u-layout-r-withGutter;

  background-color: var(--Header-banner-bg);
}

.Header-owner {
  @extend .u-layout-wide;
  @extend .u-layoutCenter;
  @extend .u-padding-r-top;
  @extend .u-padding-r-bottom;
  @extend .u-color-40;
}

.Header-owner > a {
  @extend .u-text-r-xxs;
  @extend .u-textClean;

  @media (--lg-viewport), (--md-viewport) {
    @extend .u-textWeight-600;
  }

  color: var(--Header-text-color);
}

.Header-owner > a > span {
  @extend .u-text-xxs;
  @extend .u-lineHeight-s;
  @media (--lg-viewport), (--md-viewport) {
    @extend .u-text-xs;
  }
}

/* ========================================== */

.Header-navbar {
  @extend .u-layout-r-withGutter;
  @extend .u-padding-top-l;
  @extend .u-padding-bottom-s;

  background-color: var(--Header-navbar-bg);
  width: 100%;
}

/* Burger button
  ========================================== */

.Header-toggle {
  @extend .u-size2of12;
  @extend .u-lg-size1of8;
  @extend .u-textCenter;
}

.Header-toggle > * {
  @extend .u-inlineBlock;
  @extend .u-linkClean;
}

.Header-toggleText {
  @extend .u-hidden;
  @extend .u-sm-block;
  @extend .u-md-block;
  @extend .u-lg-block;

  @extend .u-text-r-xxs;
  @extend .u-textWeight-700;
  @extend .u-textClean;

  color: var(--Header-text-color);
  letter-spacing: 0.1em !important;
  margin-bottom: -calc(1rem + var(--Hamburger-height));
  margin-top: calc(1rem + var(--Hamburger-height));
  text-transform: uppercase;
}

/* Logo image
  ========================================== */

.Header-logo {
  @extend .u-size2of12;
  @extend .u-sm-size2of12;
  @extend .u-md-size1of12;
  @extend .u-lg-size1of12;
}

.Header-logo,
.Header-logo svg {
  @extend .u-alignMiddle;
  width: 3.2rem;
  @media (--sm-viewport), (--md-viewport), (--lg-viewport) {
    width: 4.6rem;
  }
}

.Header-logo img {
  @extend .u-alignMiddle;

  height: 4.5rem;
  width: 4.5rem;

  @media (--sm-viewport), (--md-viewport), (--lg-viewport) {
    height: 7.5rem;
    width: 7.5rem;
  }
}

/* Title link
  ========================================== */

.Header-title {
  @extend .u-flex;
  @extend .u-flexAlignItemsCenter;

  @extend .u-lineHeight-xxs;

  @extend .u-size6of12;
  @extend .u-sm-size4of12;
  @extend .u-md-size5of12;
  @extend .u-lg-size5of12;

  @media (--md-viewport), (--lg-viewport) {
    @extend .u-lineHeight-m;
  }
}

.Header-titleLink {
  @media (--md-viewport) {
    @extend .u-padding-left-s;
  }
}

.Header-titleLink a {
  @extend .u-inlineBlock;
  @extend .u-text-xs;
  @extend .u-text-sm-m;
  @extend .u-text-md-l;
  @extend .u-text-lg-l;
  @extend .u-lineHeight-s;
  @extend .u-textWeight-700;
  @extend .u-textClean;
  @extend .u-padding-left-xxs;
  @extend .u-padding-right-xxs;

  color: var(--Header-text-color);
}

.Header-titleLink small {
  @extend .u-text-r-xs;
  @extend .u-textWeight-400;
  @extend .u-lineHeight-s;
  @extend .u-textClean;
  @extend .u-hidden;
  @extend .u-md-inline;
  @extend .u-lg-inline;

  color: var(--Header-text-color);
}

/* Search button for small screens
  ========================================== */

.Header-searchTrigger {
  @extend .u-sizeFill;
  @extend .u-sm-hidden;
  @extend .u-md-hidden;
  @extend .u-lg-hidden;
  @extend .u-textRight;
}

.Header-searchTrigger button {
  @extend .u-linkClean;
  @extend .u-padding-all-s;
  @extend .u-text-r-l;
  @extend .u-textWeight-700;

  background-color: var(--Header-searchTrigger-bg);
  color: var(--Header-text-color);
}

/* Utils block (social + languages + search form)
  ================================================ */

.Header-utils {
  @extend .u-block;
  @extend .u-margin-top-xxs;
  @extend .u-textRight;

  @extend .u-sizeFull;
  @extend .u-sm-size4of12;
  @extend .u-md-size4of12;
  @extend .u-lg-size4of12;

  @extend .u-md-before2of12;
  @extend .u-lg-before2of12;

  @extend .u-sm-flexOrderNone;
  @extend .u-md-flexOrderNone;
  @extend .u-lg-flexOrderNone;
  @extend .u-flexOrderLast;

  @media (--sm-viewport) {
    @extend .u-margin-top-xs;
    @extend .u-margin-bottom-xs;
  }
}

/*
 *  Hide utils on small screens
 */

.Header-utils > * {
  @extend .u-hidden;
  @extend .u-sm-block;
  @extend .u-md-block;
  @extend .u-lg-block;
  @extend .u-floatRight;
  @extend .u-cf;

  width: 100%;
}

/* Search form
  ================================================ */

.Header-search {
  @extend .u-padding-all-xxs;
  @media (--sm-viewport), (--md-viewport), (--lg-viewport) {
    @extend .u-margin-bottom-m;
    @extend .u-padding-left-m;
    @extend .u-padding-right-none;
    @extend .u-floatRight;

    max-width: var(--Header-search-maxWidth);
  }
}

.Header-search.is-active {
  @extend .u-block;
  @extend .u-margin-top-xs;
}

/* Lanaguage bar
  ================================================ */

.Header-languages {
  @extend .u-floatRight;

  background-color: var(--Header-languages-bg);
}

.Header-language {
  @extend .u-text-r-xxs;
  @extend .u-textWeight-600;
  @extend .u-padding-left-s;
  @extend .u-padding-right-s;
  @extend .u-linkClean;

  color: var(--Header-text-color);
}

.Header-language abbr {
  text-decoration: none;
}

.Header-language:hover {
  cursor: pointer;
}

.Header-language-other {
  @extend .u-zindex-max;
  @extend .u-borderRadius-m;
  @extend .u-borderShadow-l;
  @extend .u-margin-top-s;

  background-color: var(--Header-language-other-bg);
}

.Header-language-other a {
  @extend .u-inlineBlock;
  @extend .u-sizeFull;
  @extend .u-padding-all-s;
  @extend .u-color-50;
  @extend .u-textClean;
}

/* Social icons / link
  ================================================ */

.Header-social {
  @extend .u-text-r-xs;
  @extend .u-margin-left-s;
  @extend .u-margin-bottom-s;

  color: var(--Header-text-color);
}

.Header-social > * {
  @extend .u-hidden;
  @extend .u-md-inlineBlock;
  @extend .u-lg-inlineBlock;
}

.Header-socialIcons {
  @extend .u-padding-left-xxs;
  @extend .u-text-r-xs;
}

.Header-socialIcons > li {
  @extend .u-inlineBlock;
}

.Header-socialIcons > li > a {
  @extend .u-margin-left-s;
}

.Header-socialIcons [class^="Icon-"],
.Header-socialIcons [class*=" Icon-"] {
  @extend .u-inlineBlock;
  @extend .u-padding-all-xxs;
  @extend .u-borderRadius-circle;

  background-color: var(--Header-socialIcons-bg);
  color: var(--Header-navbar-bg);
}

/*
 * Headroom.js for sticky header
 * =============================
 */

.Headroom--fixed,
.Headroom--pinned {
  transform: translateY(0%);
}

/*
 *	1. Allow transition on element heights
 */

.Headroom-hideme {
  max-height: 5em; /* 1 */
  transition: all 250ms ease;
  will-change: all;
}

.Headroom--fixed.Headroom--not-top .Headroom-hideme,
.Headroom--pinned.Headroom--not-top .Headroom-hideme {
  margin: 0 !important;
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.js .Headroom--fixed,
.Headroom--pinned.Headroom--not-top {
  @extend .u-zindex-40;

  min-width: 30rem;
  position: fixed;
  top: 0;
}

.Headroom--fixed.Headroom--not-top .Header-titleLink,
.Headroom--pinned.Headroom--not-top .Header-titleLink {
  @extend .u-flexAlignSelfCenter;
  @extend .u-flex;
}

.Headroom--fixed.Headroom--not-top .Header-titleLink a,
.Headroom--pinned.Headroom--not-top .Header-titleLink a {
  @extend .u-text-xxs;
  @extend .u-text-sm-xs;
  @extend .u-text-md-s;
  @extend .u-text-lg-m;
  @extend .u-textWeight-400;
}

.Headroom--fixed.Headroom--not-top .Header-toggleText,
.Headroom--fixed.Headroom--not-top .Header-titleLink small,
.Headroom--pinned.Headroom--not-top .Header-titleLink small {
  @extend .u-hidden;
}

.Headroom--fixed.Headroom--not-top .Header-navbar,
.Headroom--pinned.Headroom--not-top .Header-navbar {
  @extend .u-padding-top-xxs;
  @extend .u-padding-bottom-none;
  @media (--sm-viewport), (--md-viewport), (--lg-viewport) {
    @extend .u-padding-top-xxs;
    @extend .u-padding-bottom-xxs;
  }
}

.Headroom--fixed.Headroom--not-top .Header-logo img,
.Headroom--pinned.Headroom--not-top .Header-logo img {
  max-height: 3em;
  max-width: 3em;
}

.Headroom--fixed.Headroom--not-top .Header-search,
.Headroom--pinned.Headroom--not-top .Header-search {
  @extend .u-margin-bottom-xxs;
  @extend .u-padding-bottom-xxs;
}

.Headroom--unpinned {

  /* transform: translateY(-100%); */
}

URL: /components/raw/header/index.css
Filesystem Path: src/modules/header/index.css
Size: 8.7 KB

Content:


                                import $ from 'jquery'
import Headroom from 'headroom.js'
import debounce from 'throttle-debounce/throttle'

// Headroom for fixed sticky header

const myElement = document.querySelector('.js-Headroom')

const opts = {
  // vertical offset in px before element is first unpinned
  offset: 0,
  // you can specify tolerance individually for up/down scroll
  tolerance: {
    up: 20,
    down: 10
  },
  // css classes to apply
  classes: {
    // when element is initialised
    initial: 'Headroom',
    // when scrolling up
    pinned: 'Headroom--pinned',
    // when scrolling down
    unpinned: 'Headroom--unpinned',
    // when above offset
    top: 'Headroom--top',
    // when below offset
    notTop: 'Headroom--not-top',
    // when at bottom of scoll area
    bottom: 'Headroom--bottom',
    // when not at bottom of scroll area
    notBottom: 'Headroom--not-bottom'
  },
  // element to listen to scroll events on, defaults to `window`
  scroller: window,
  // callback when pinned, `this` is headroom object
  onPin: function () { },
  // callback when unpinned, `this` is headroom object
  onUnpin: function () { },
  // callback when above offset, `this` is headroom object
  onTop: function () { },
  // callback when below offset, `this` is headroom object
  onNotTop: function () { },
  // callback when at bottom of page, `this` is headroom object
  onBottom: function () { },
  // callback when moving away from bottom of page, `this` is headroom object
  onNotBottom: function () { }
}

let headroom = null

if (myElement) {
  headroom = new Headroom(myElement, opts)
  headroom.init()
}

/*
 *	Make space when using fixed header.
 *
 *		The no-js alternative is to set up body padding inside CSS
 *	 	assuming you know the exact header height in pixel
 *	 	(expanded and minimized for all viewport width)
 */
const headroomFixed = '.Headroom--fixed'

if ($('.' + opts.classes.initial).is(headroomFixed)) {
  const INTERVAL = 250

  let windowWidth = $(window).width()

  // Needs to be here due to CSS transition (see on Safari)
  let headerHeight = $(headroomFixed).height()

  const _adjustPadding = function () {
    const paddingTop = headerHeight

    $('body').css({
      paddingTop: paddingTop + 'px'
    })
  }

  // Set up padding on page load
  $(document).ready(() => {
    $(headroomFixed).css({
      position: 'fixed',
      top: 0
    })
    headerHeight = $(headroomFixed).height()
    _adjustPadding()
  })

  // Make padding respond to window resize
  $(window).resize(debounce(INTERVAL, function () {
    const newWindowWidth = $(window).width()
    const height = $(headroomFixed).height()
    // Android browser triggers a resize event on scroll to top
    // so we check for changes in window width
    if (newWindowWidth !== windowWidth) {
      windowWidth = newWindowWidth
      headerHeight = height
      setTimeout(_adjustPadding, INTERVAL)
    }
  }))

  $(headroomFixed).on('transitionend', debounce(INTERVAL, function () {
    const height = $(this).height()
    if (headerHeight < height) {
      // This happens *only* after a resize
      // _and_ when scrolling to top
      headerHeight = height
      _adjustPadding()
    }
  }))

}

/*
 *  Toggle search-form visibility for mobile
 */
$('.js-Header-search-trigger').click((e) => {
  $('.js-Header-search-trigger').each((i, el) => {
    const $el = $(el)
    if ('true' === $el.attr('aria-hidden')) {
      $el.attr('aria-hidden', 'false')
      $el.removeClass('u-hidden')
    } else {
      $el.attr('aria-hidden', 'true')
      $el.addClass('u-hidden')
    }
  })
  const $searchBox = $('#' + $(e.target).attr('aria-controls'))
  $searchBox.toggleClass('is-active')
  $searchBox.parent().toggle()
})


export default {
  Headroom,
  headroom
}

URL: /components/raw/header/index.js
Filesystem Path: src/modules/header/index.js
Size: 3.9 KB

Handle: @header--monochrome
Variants (5): Default , Monochrome , Menu , Megamenu , Comune
Preview:
- With layout
- Component only
Filesystem Path: src/modules/header/header.tmpl
References (3): @skiplinks, @formtpl--search, @megamenu

There are no notes for this item.