Navigation switch: Chinese

300 × 150
<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">

            <div class="c-primary-navigation__logo">
                <a href="#">
                    <img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
                </a>
            </div>

            <div class="c-expanded-search c-expanded-search--mobile">

                <form class="c-expanded-search__searchWrapper c-form">

                    <label for="search-field" class="  has-button" aria-label="">
                        Cerca nel sito
                        <input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
                        <button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
                            <svg class="c-icon c-icon--18">
                                <use xlink:href="#ic_search_black_24px"></use>
                            </svg> </button>
                        <datalist id="search-destinations">
                            <option value="Check in A">
                            <option value="Check in B">
                            <option value="Check in C">
                            <option value="Accettazione">
                            <option value="Cafè">
                            <option value="Bagagli">
                            <option value="Bar centrale">
                        </datalist>
                        <p class="c-field__note " id="search-field-note">
                            Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc &hellip;
                        </p>
                    </label>
                    <p class="c-expanded-search__search-flight">
                        <a href="../preview/page-arrivals-departures--default.html">Stai cercando un volo?→</a>
                    </p>

                    <div class="c-search-suggestions">

                        <h3>Potrebbero esserti utili</h3>

                        <ul class="c-search-suggestions__list">

                            <li class="c-search-suggestions__item">
                                <a href="#">Ultimi aggiornamenti covid <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Parcheggia in aeroporto <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Contatti e supporto <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Fast track <span aria-hidden="true">&#8594;</span></a>
                            </li>
                        </ul>

                    </div>

                </form>

                <button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                    Chiudi
                    <svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg> </button>

            </div>

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

            </ul>

            <div class="c-primary-navigation__utils">

                <div class="c-primary-navigation__tools">
                    <a href="#" aria-label="Mappe aerostazione">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_place_black_24px"></use>
                        </svg> </a>
                    <a href="#" aria-label="Free Wi-Fi">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_wifi_black_24px"></use>
                        </svg> </a>
                </div>

                <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>

            </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--chinese" }}
  </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.