<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">
        <div class="Header-owner Headroom-hideme">
            <a href=""><span>Nome amministrazione afferente</span></a>
            <div class="Header-languages">
                <a class="Header-language is-active u-hidden u-md-inlineBlock u-lg-inlineBlock" href="" title="sito in italiano">
                    <abbr title="Italiano">ITA</abbr>
                </a>
                <a class="Header-language u-hidden u-md-inlineBlock u-lg-inlineBlock" href="" title="website in english" lang="en">
                    <abbr title="English">ENG</abbr>
                </a>
                <a href="#languages" data-menu-trigger="languages" class="Header-language u-border-none u-zindex-max is-active u-inlineBlock">
                    <span class="u-hiddenVisually">lingua attiva:</span>
                    <span class="u-md-hidden u-lg-hidden">ITA</span>
                    <span class="Icon Icon-expand u-padding-left-xs u-md-hidden u-lg-hidden"></span>
                    <span class="Icon Icon-more-actions u-padding-left-xxs u-padding-right-xxs u-hidden u-md-inlineBlock u-lg-inlineBlock"></span>
                </a>
                <div id="languages" data-menu class="Dropdown-menu Header-language-other u-jsDisplayNone u-nojsDisplayNone">
                    <ul class="Linklist">
                        <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 Grid Grid--alignMiddle">
        <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 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" 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" 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" role="search">
                        <input class="Form-input Grid-cell u-sizeFill u-text-r-s" required id="cerca">
                        <label class="Form-label" for="cerca">Cerca...</label>
                        <button class="Grid-cell u-sizeFit Icon-search u-background-60 u-color-white u-padding-all-s u-textWeight-700" title="Avvia la ricerca" aria-label="Avvia la ricerca">
    </button>
                    </div>
                </form>

            </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">
            <ul class="Megamenu-list">
                <li class="Megamenu-item">
                    <a href="#">
        Est sunt est<br>Quae qui et
      </a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/">Quae qui et</a>
                                <ul>
                                    <li><a href="/1">Laborum neque nemo</a></li>
                                    <li><a href="/2">Qui nemo aut</a></li>
                                    <li><a href="/3">Quo provident sint</a></li>
                                    <li><a href="/4">Quisquam ea numquam</a></li>
                                </ul>
                            </li>
                            <li><a href="">Modi consequatur aperiam</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="">Sit non voluptatem</a>
                                <ul>
                                    <li><a href="/1">Nihil officia hic</a></li>
                                    <li><a href="/2">Ut voluptas voluptas</a></li>
                                    <li><a href="/3">Est sunt est</a></li>
                                    <li><a href="/4">Quae qui et</a></li>
                                </ul>
                            </li>
                            <li><a href="">Laborum neque nemo</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="">Qui nemo aut</a>
                                <ul>
                                    <li><a href="/1">Quo provident sint</a></li>
                                    <li><a href="/2">Quisquam ea numquam</a></li>
                                    <li><a href="/3">Modi consequatur aperiam</a></li>
                                    <li><a href="/4">Sit non voluptatem</a></li>
                                </ul>
                            </li>
                            <li><a href="">Nihil officia hic</a></li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Ut voluptas voluptas</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Est sunt est</a></li>
                            <li><a href="/2">Quae qui et</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Laborum neque nemo</a></li>
                            <li><a href="/2">Qui nemo aut</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Quo provident sint</a></li>
                            <li><a href="/2">Quisquam ea numquam</a></li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Modi consequatur aperiam</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Sit non voluptatem</a></li>
                            <li><a href="/2">Nihil officia hic</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Ut voluptas voluptas</a></li>
                            <li><a href="/2">Est sunt est</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Quae qui et</a></li>
                            <li><a href="/2">Laborum neque nemo</a></li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-area">
                    <a class="Button Button--default u-color-95" href="#">Accedi</a>
                </li>
            </ul>
        </nav>

    </div>

</header>
  • Content:
    /* @define Header; weak */
    
    .Header {
      @extend .u-layout-centerContent;
    
      width: 100%;
    }
    
    .Header-banner {
      @extend .u-cf;
      @extend .u-sizeFull;
      @extend .u-background-90;
      @extend .u-color-60;
      @extend .u-padding-left-s;
      @media (--sm-viewport) {
        @extend .u-padding-left-none;
      }
      @media (--lg-viewport) {
        padding-left: calc((1 / 8 + 1 / 12) * 100%) !important;
      }
    }
    
    .Header-owner > a {
      @extend .u-floatLeft;
      @extend .u-sm-before4of12;
      @extend .u-md-before3of12;
      @extend .u-text-r-xxs;
      @extend .u-color-white;
      @extend .u-textClean;
      @extend .u-padding-r-top;
      @extend .u-padding-r-bottom;
    
      @media (--lg-viewport), (--md-viewport) {
        @extend .u-textWeight-600;
      }
    }
    
    .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-background-50;
    
      @extend .u-padding-top-s;
      @extend .u-padding-bottom-s;
      @extend .u-padding-right-xs;
      @extend .u-padding-left-xs;
    
      @media (--md-viewport) {
        @extend .u-padding-right-l;
      }
    
      @media (--lg-viewport) {
        @extend .u-padding-right-xxl;
      }
    
      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-color-white;
      @extend .u-text-r-xxs;
      @extend .u-textWeight-700;
      @extend .u-textClean;
    
      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 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-m;
      @extend .u-textWeight-700;
      @extend .u-color-white;
      @extend .u-textClean;
      @extend .u-padding-left-xxs;
      @extend .u-padding-right-xxs;
    }
    
    .Header-titleLink small {
      @extend .u-text-xxs;
      @extend .u-text-sm-xs;
      @extend .u-text-md-m;
      @extend .u-text-lg-m;
      @extend .u-textWeight-400;
      @extend .u-color-white;
      @extend .u-textClean;
      @extend .u-hidden;
      @extend .u-md-inline;
      @extend .u-lg-inline;
    }
    
    /* Search button for small screens
      ========================================== */
    
    .Header-searchTrigger {
      @extend .u-sizeFill;
      @extend .u-sm-hidden;
      @extend .u-md-hidden;
      @extend .u-lg-hidden;
      @extend .u-textCenter;
    }
    
    .Header-searchTrigger button {
      @extend .u-linkClean;
      @extend .u-background-40;
      @extend .u-color-white;
      @extend .u-padding-all-s;
      @extend .u-text-r-xxs;
    }
    
    /* 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;
    
      @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: 24em;
      }
    }
    
    .Header-search.is-active {
      @extend .u-block;
      @extend .u-margin-top-xs;
    }
    
    /* Lanaguage bar
      ================================================ */
    
    .Header-languages {
      @extend .u-background-95;
      @extend .u-floatRight;
    }
    
    .Header-language {
      @extend .u-color-white;
      @extend .u-text-r-xxs;
      @extend .u-textWeight-600;
      @extend .u-padding-left-s;
      @extend .u-padding-right-s;
      @extend .u-padding-r-top;
      @extend .u-padding-r-bottom;
      @extend .u-linkClean;
    }
    
    .Header-language abbr {
      text-decoration: none;
    }
    
    .Header-language:hover {
      cursor: pointer;
    }
    
    .Header-language.is-active {
      @extend .u-background-80;
    }
    
    .Header-language-other {
      @extend .u-zindex-max;
      @extend .u-background-grey-10;
      @extend .u-borderShadow-xxl;
    
      right: 0;
      top: 0;
    }
    
    /* Social icons / link
      ================================================ */
    
    .Header-social {
      @extend .u-text-r-xs;
      @extend .u-color-white;
      @extend .u-margin-left-s;
      @extend .u-margin-bottom-s;
    }
    
    .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 [class^="Icon-"],
    .Header-socialIcons [class*=" Icon-"] {
      @extend .u-inlineBlock;
      @extend .u-background-white;
      @extend .u-color-50;
      @extend .u-padding-all-xxs;
      @extend .u-borderRadius-circle;
      @extend .u-margin-left-xs;
    }
    
    /*
     * 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 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
        })
        _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')
        }
      })
      $('#' + $(e.target).attr('aria-controls')).toggleClass('is-active')
    })
    
    export default {
      Headroom,
      headroom
    }
    
  • URL: /components/raw/header/index.js
  • Filesystem Path: src/modules/header/index.js
  • Size: 3.6 KB

There are no notes for this item.