<div data-menu-component class="c-navigation-switch">
    <input type="checkbox" role="button" aria-haspopup="true" id="toggle-extended-nav" class="u-visuallyhidden" aria-hidden="true">
    <label for="toggle-extended-nav" data-opens-menu aria-hidden="true">
        <span class="c-navigation__icon"></span>
        <span class="u-visuallyhidden expanded-text">Chiudi menù</span>
        <span class="u-visuallyhidden collapsed-text">Apri menù</span>
    </label>
    <div role="menu" data-menu-origin="left" class="c-navigation-switch__container">
        <nav class="c-primary-navigation">

            <ul class="c-site-areas c-primary-navigation__areas" aria-hidden="false">
                <li>
                    <a href="/components/preview/page-home-travel--default">Viaggiare</a>
                </li>

                <li>
                    <a href="/components/preview/page-society-home">Società</a>
                </li>

                <li>
                    <a href="/components/preview/page-investor-home" class="is-active">Investor relations</a>
                </li>

                <li>
                    <a href="/components/preview/page-innovability-home">Innovability</a>
                </li>

            </ul>

            <ul class="c-primary-navigation__biz">

                <li>
                    <div class="c-primary-navigation__accordion o-collapsible">
                        <p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
                            <strong>Corporate</strong>
                            <span></span>
                        </p>
                        <ul class="sub-level">
                            <p class="sub-title"></p>
                            <li>
                                <a href="#">Aeroporto di Bologna in breve</a>
                            </li>
                            <li>
                                <a href="#">Corporate governance</a>
                            </li>
                            <li>
                                <a href="#">I nostri riferimenti</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <div class="c-primary-navigation__accordion o-collapsible">
                        <p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
                            <strong>Borsa e azionisti</strong>
                            <span></span>
                        </p>
                        <ul class="sub-level">
                            <p class="sub-title"></p>
                            <li>
                                <a href="#">Titolo in Borsa</a>
                            </li>
                            <li>
                                <a href="#">Strategy and execution</a>
                            </li>
                            <li>
                                <a href="#">Informazioni per gli azionisti</a>
                            </li>
                            <li>
                                <a href="#">Assemblea degli azionisti</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <div class="c-primary-navigation__accordion o-collapsible">
                        <p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
                            <strong>Calendario finanziario</strong>
                            <span></span>
                        </p>
                        <ul class="sub-level">
                            <p class="sub-title"></p>
                            <li>
                                <a href="#">Eventi societari</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <div class="c-primary-navigation__accordion o-collapsible">
                        <p class="c-primary-navigation__toggle o-collapsible__title js-collapsible-title">
                            <strong>Documenti</strong>
                            <span></span>
                        </p>
                        <ul class="sub-level">
                            <p class="sub-title"></p>
                            <li>
                                <a href="#">Comunicati stampa</a>
                            </li>
                            <li>
                                <a href="#">Bilanci e relazioni</a>
                            </li>
                            <li>
                                <a href="#">DNF D.lgs. 254/2016 (Bilancio di Sostenibilità)</a>
                            </li>
                            <li>
                                <a href="#">Presentazioni</a>
                            </li>
                            <li>
                                <a href="#">Internal dealing</a>
                            </li>
                        </ul>
                    </div>
                </li>

            </ul>

            <div class="c-primary-navigation__utils">
                <ul class="c-languages" aria-label="Seleziona la lingua del sito">
                    <li>
                        <a href="#" aria-label="ita">
                            <img src="../../images/svgs/flag_it.svg" class="c-language__img" alt="Lingua italiana" aria-hidden="true" />
                            ita
                        </a>
                    </li>
                    <li>
                        <a href="#" aria-label="eng">
                            <img src="../../images/svgs/flag_en.svg" class="c-language__img" alt="English language" aria-hidden="true" />
                            eng
                        </a>
                    </li>
                </ul>
                <a class="c-primary-navigation__assistance " href="../preview/page-home-assistenze.html">
                    Lavora con noi
                </a>
            </div>

        </nav>
    </div>
</div>
<div data-menu-component class="c-navigation-switch">
  <input type="checkbox" role="button" aria-haspopup="true" id="toggle-extended-nav" class="u-visuallyhidden" aria-hidden="true">
  <label for="toggle-extended-nav" data-opens-menu aria-hidden="true">
    <span class="c-navigation__icon"></span>
    <span class="u-visuallyhidden expanded-text">Chiudi menù</span>
    <span class="u-visuallyhidden collapsed-text">Apri menù</span>
  </label>
  <div role="menu" data-menu-origin="left" class="c-navigation-switch__container">
    {{ render "@primary-navigation--investors" }}
  </div>
</div>
/* No context defined. */
  • Content:
    .c-navigation-switch {
    }
    
    .c-navigation-switch [data-opens-menu] {
      position: relative;
      display: block;
      width: remify(20px);
      height: remify(20px);
    
      background: transparent;
      border-color: #fff;
      border-top: 3px solid;
      border-bottom: 3px solid;
      color: white;
      font-size: remify(16px);
      transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    
      &:before,
      &:after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
    
        position: absolute;
        top: 50%;
        left: 50%;
    
        background: currentColor;
    
        transform: translate(-50%, -50%);
        transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
      }
    }
    
    .c-navigation-switch [data-opens-menu]:hover {
    }
    
    .is-nav-open .c-navigation-switch [data-opens-menu] {
      border-color: transparent;
      color: primary(night, 100);
    
      &:before {
        transform: translate(-50%, -50%) rotate(45deg);
      }
    
      &:after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
    
    //***//
    
    /* 
        The following lines of code reveals the correct 
        state wording to screen readers based on state
      */
    .c-navigation-switch input:checked + label .expanded-text {
      display: inline;
    }
    
    // Show the close icon when menu is opened
    .c-navigation-switch input:checked + label .c-navigation__icon:before,
    .stickyReady .c-navigation__icon:before {
      content: "×";
      font-size: remify(24px);
    }
    
    .c-navigation-switch input:checked + label .collapsed-text {
      display: none;
    }
    
    .c-navigation-switch
      input[type="checkbox"]:not(:checked)
      + label
      .expanded-text {
      display: none;
    }
    
    .c-navigation-switch
      input[type="checkbox"]:not(:checked)
      + label
      .collapsed-text {
      display: inline;
    }
    
  • URL: /components/raw/navigation-switch/_navigation-switch.scss
  • Filesystem Path: src/views/02-molecules/navigation-switch/_navigation-switch.scss
  • Size: 1.7 KB
  • Content:
    (function ($) {
    
      var $navSwitch = $('.c-navigation-switch [data-opens-menu]');
    
      $navSwitch.on("click", function () {
        $('.c-primary-navigation').toggleClass('is-open');
        $('.c-toolbar__switch').toggleClass('is-nav-open');
        // $('.c-overlay').toggleClass('is-visible');
    
      });
    
    })(jQuery);
  • URL: /components/raw/navigation-switch/navigation-switch.js
  • Filesystem Path: src/views/02-molecules/navigation-switch/navigation-switch.js
  • Size: 301 Bytes

No notes defined.