<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 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 ">
        <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 " 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 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 ">
            <ul class="Megamenu-list">
                <li class="Megamenu-item">
                    <a href="#">
        Ipsum quaerat tempore<br>Quasi recusandae placeat
      </a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/">Quasi recusandae placeat</a>
                                <ul>
                                    <li><a href="/1">Aspernatur magni saepe</a></li>
                                    <li><a href="/2">Culpa ab voluptatem</a></li>
                                    <li><a href="/3">Praesentium repellendus qui</a></li>
                                    <li><a href="/4">Ut rerum voluptatem</a></li>
                                </ul>
                            </li>
                            <li><a href="">Sed consequuntur aut</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="">Qui corporis quasi</a>
                                <ul>
                                    <li><a href="/1">Alias explicabo praesentium</a></li>
                                    <li><a href="/2">Incidunt facilis ab</a></li>
                                    <li><a href="/3">Ipsum quaerat tempore</a></li>
                                    <li><a href="/4">Quasi recusandae placeat</a></li>
                                </ul>
                            </li>
                            <li><a href="">Aspernatur magni saepe</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="">Culpa ab voluptatem</a>
                                <ul>
                                    <li><a href="/1">Praesentium repellendus qui</a></li>
                                    <li><a href="/2">Ut rerum voluptatem</a></li>
                                    <li><a href="/3">Sed consequuntur aut</a></li>
                                    <li><a href="/4">Qui corporis quasi</a></li>
                                </ul>
                            </li>
                            <li><a href="">Alias explicabo praesentium</a></li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Incidunt facilis ab</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Ipsum quaerat tempore</a></li>
                            <li><a href="/2">Quasi recusandae placeat</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Aspernatur magni saepe</a></li>
                            <li><a href="/2">Culpa ab voluptatem</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Praesentium repellendus qui</a></li>
                            <li><a href="/2">Ut rerum voluptatem</a></li>
                        </ul>
                    </div>
                </li>
                <li class="Megamenu-item">
                    <a href="#">Sed consequuntur aut</a>
                    <div class="Megamenu-subnav u-jsDisplayNone">
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Qui corporis quasi</a></li>
                            <li><a href="/2">Alias explicabo praesentium</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Incidunt facilis ab</a></li>
                            <li><a href="/2">Ipsum quaerat tempore</a></li>
                        </ul>
                        <ul class="Megamenu-subnavGroup">
                            <li><a href="/1">Quasi recusandae placeat</a></li>
                            <li><a href="/2">Aspernatur magni saepe</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 */
    
    :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 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.6 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')
        }
      })
      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.7 KB

There are no notes for this item.