<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 …
</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">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Parcheggia in aeroporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Contatti e supporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Fast track <span aria-hidden="true">→</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. */
.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;
}
(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);
No notes defined.