<div class="c-toolbar">
<div class="c-toolbar__inner">
<div class="c-toolbar__left">
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo">
<img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
</a>
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo c-toolbar__logo--innovability">
<img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna">
</a>
</div>
<div class="c-toolbar__center" aria-hidden="true">
<div class="c-header__shortcuts" aria-hidden="true">
<div class="c-navigation-shortcuts">
<ul>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Profilo aziendale</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Profilo aziendale</p>
<div class="c-megamenu__card-abstract">
Profilo aziendale
Aeroporto di Bologna, porta d’accesso ideale per l’Italia
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<li><a href="#">Vision, Mission & Strategy</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Dati chiave</a></li>
<li><a href="#">Risorse umane</a></li>
<li><a href="#">Etica d'impresa</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Business</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Business</p>
<div class="c-megamenu__card-abstract">
Avition, Retail, Adv, Formazione, Eventi. Le anime molteplici del business dell’Aeroporto
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Attività commerciali</strong>
<li><a href="#">Retail, Advertising, Eventi</a></li>
<li><a href="#">Portale Appalti</a></li>
<li><a href="#">BLQ Training</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Aviation</strong>
<li><a href="#">Pista e infrastrutture</a></li>
<li><a href="#">Tariffe Aviation</a></li>
<li><a href="#">Cargo</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Progetti Europei e Protocolli</strong>
<li><a href="#">Cyrano</a></li>
<li><a href="#">ITAIR ISAC</a></li>
<li><a href="#">PRECINCT</a></li>
<li><a href="#">Protocolli d’Intesa</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Sala stampa</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Sala stampa</p>
<div class="c-megamenu__card-abstract">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<li><a href="#">COVID 19 | Approfondimenti</a></li>
<li><a href="#">COVID 19 | Ultimi aggiornamenti</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Comunicati stampa</a></li>
<li><a href="#">Photogallery</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Operatori aeroportuali</strong>
<span></span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Operatori aeroportuali</p>
<div class="c-megamenu__card-abstract">
Informazioni a supporto delle attività operative
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Documentazione e Segnalazioni</strong>
<li><a href="#">Manuale di Aeroporto</a></li>
<li><a href="#">Regolamento di Scalo</a></li>
<li><a href="#">Titoli di accesso</a></li>
<li><a href="#">Segnalazioni degli Operatori</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Safety Management System</strong>
<li><a href="#">Definizione di SMS</a></li>
<li><a href="#">I Comitati della Safety</a></li>
<li><a href="#">L’analisi dei rischi</a></li>
<li><a href="#">Il reporting system</a></li>
<li><a href="#">Ambiente ed Energia</a></li>
<li><a href="#">Safety Promotion & Education</a></li>
<li><a href="#">Gestione delle emergenze</a></li>
<li><a href="#">Segnalazioni di Safety</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="c-toolbar__right">
<button type="button" class="c-button c-toolbar__icon is-clickable js-fr-dialogmodal-open" aria-label="Cerca nel sito" aria-controls="dialog-search">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_search_black_24px"></use>
</svg>
</button>
<div class="c-notifications ">
<button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_notifications_active_black_24px"></use>
</svg>
<p class="c-notifications__indicator" aria-hidden="true">2</p>
</button>
<div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">
<div class="c-notifications__head">
<div class="c-notifications__title">
Centro notifiche
</div>
<button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
Chiudi <svg class="c-icon c-icon--16">
<use xlink:href="#ic_close_black_24px"></use>
</svg>
</button>
</div>
<ul class="c-notifications__list">
<li class="important not-read">
<span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="not-read">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
</ul>
</div>
</div>
<div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
<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='u-visuallyhidden expanded-text'>
Chiudi menù
</span>
<span class='u-visuallyhidden collapsed-text'>
Apri menù
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="c-dialog c-dialog--search js-fr-dialogmodal " id="dialog-search">
<div class="js-fr-dialogmodal-modal">
<div role="document">
<div class="c-expanded-search ">
<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>
</div>
</div>
</div>
<div class="c-toolbar">
<div class="c-toolbar__inner">
<div class="c-toolbar__left">
<a href="{{ home-url }}" class="c-toolbar__logo">
{{ render "@logo" }}
</a>
<a href="{{ innovability-url }}" class="c-toolbar__logo c-toolbar__logo--innovability">
{{ render "@logo--innovability" }}
</a>
</div>
<div class="c-toolbar__center" aria-hidden="true">
<div class="c-header__shortcuts" aria-hidden="true">
{{ render "@shortcuts-navigation--society" shortcuts merge=true }}
</div>
</div>
<div class="c-toolbar__right">
{{!-- <a class="c-toolbar__assistance" href="{{ path '/components/preview/page-home-assistenze' }}">
{{> @icon class=" c-icon c-icon--32" symbol="ic-accessible-black-24px" }}
</a> --}}
{{!-- <label for="adb-search" class="c-toolbar__icon c-toolbar__search is-clickable" aria-label="Cerca nel sito. Premi per iniziare la ricerca">
{{> @icon class="c-icon c-icon--18" symbol="ic_search_black_24px" }}
</label> --}}
{{> @button search-button }}
{{ render "@notifications" }}
<div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
{{> @navigation-switch}}
</div>
</div>
</div>
</div>
{{ render "@dialog--search" }}
{{!-- {{ render "@expanded-search" }} --}}
{
"name": "default",
"home-url": "/components/preview/page-home-travel--default",
"innovability-url": "/components/preview/page-home-travel--default",
"prm-url": "/components/preview/page-routes-prm",
"ccare-url": "",
"dropdown-toolbar": {
"dropdown-orientation": {
"main-language": {
"text": "ita",
"url": "#",
"aria-label": "Italiano"
},
"sub-languages": [
{
"text": "eng",
"url": "#",
"aria-label": "Inglese"
},
{
"text": "zh",
"url": "#",
"aria-label": "Cinese"
}
]
}
},
"search-button": {
"type": "button",
"modifier": "c-toolbar__icon is-clickable js-fr-dialogmodal-open",
"opens-dialog": "dialog-search",
"aria-label": "Cerca nel sito",
"svg": {
"class": "c-icon c-icon--18",
"symbol": "ic_search_black_24px"
}
}
}
$toolbar-bg: secondary(soft, 100);
$toolbar-color: secondary(text, 100);
.c-toolbar {
// color: $toolbar-color;
background-color: $toolbar-bg;
padding: remify(16px) remify(16px);
.c-header--emergency & {
background-color: primary(emergency, 120);
}
}
.c-toolbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: remify(1360px);
margin: 0 auto;
}
.c-toolbar a:focus {
@include outline;
}
.c-toolbar__center {
display: none;
@include min-screen(bp(tablet-p)) {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-start;
}
}
.c-toolbar__left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.c-toolbar__right {
justify-self: flex-end;
margin-left: auto;
display: flex;
justify-content: flex-end;
position: relative;
.c-toolbar__bell {
display: none;
}
@include min-screen(bp(tablet-p)) {
.c-toolbar__user,
.c-toolbar__switch,
.c-toolbar__assistance {
display: none;
}
.c-toolbar__bell {
display: flex;
}
}
.c-toolbar__icon,
.c-menu {
min-width: remify(36px);
height: remify(36px);
@include min-screen(bp(tablet-p)) {
width: auto;
min-width: remify(40px);
height: remify(40px);
}
@include min-screen(bp(tablet-l)) {
width: auto;
min-width: remify(48px);
height: remify(48px);
}
}
.c-toolbar__user {
background-color: primary(night, 120);
}
.c-toolbar__search {
background-color: primary(night, 100);
}
.c-toolbar__switch {
background-color: primary(night, 80);
&.is-nav-open {
background-color: primary(sun, 100);
}
}
.c-menu {
background-color: primary(night, 120);
border-radius: remify(12px);
text-align: center;
justify-content: center;
display: flex;
@include min-screen(bp(tablet-p)) {
display: none;
}
.c-menu__section {
text-align: left;
}
}
& div[role="menu"] {
top: remify(32px);
}
}
.c-toolbar__assistance {
margin: 0 remify(8px) 0 0;
padding: 0 remify(8px) 0 0;
border-right: remify(1px) solid primary(night, 40);
display: flex;
justify-content: center;
align-items: center;
svg {
vertical-align: middle;
fill: primary(night, 120);
}
.prm-icon {
width: remify(36px);
}
}
.c-toolbar__icon {
display: flex;
align-items: center;
justify-content: center;
background-color: primary(night, 100);
border-radius: remify(12px);
position: relative; // min-width: remify(40px);
height: remify(40px);
color: #fff;
text-decoration: none;
padding: remify(8px);
margin-left: remify(8px);
&:last-of-type {
margin-right: 0;
}
&:focus {
@include outline;
}
span {
display: none;
@include min-screen(remify(1100px)) {
display: inline-block;
margin-left: remify(8px);
}
}
}
.c-toolbar .is-clickable svg {
* {
fill: currentColor;
}
}
.c-toolbar__bell {
background-color: primary(sun, 120);
color: currentColor;
}
.c-toolbar__bell svg {
* {
fill: currentColor;
}
}
.c-toolbar__search.is-open {
@include max-screen(bp(tablet-p)) {
background-color: primary(sun, 120);
}
}
/*------------------------------------*\
Modifier c-toolbar--minimal
\*------------------------------------*/
.c-toolbar--minimal {
.c-toolbar__left .back-to-results {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
.c-toolbar__right .textual {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
.c-toolbar__right .iconographic {
@include min-screen(bp(tablet)) {
display: none;
}
}
}
/*------------------------------------*\
Modifier c-toolbar--progress
\*------------------------------------*/
.c-toolbar--progress {
.c-toolbar__inner {
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
}
.c-toolbar__left {
order: 1
}
.c-toolbar__center {
display: block;
order: 3;
flex-basis: 100%;
@include min-screen(bp(tablet-p)) {
order: 2;
flex-basis: 45%;
}
}
.c-toolbar__right {
order: 2;
@include min-screen(bp(tablet-p)) {
order: 3;
}
.c-menu {
display: flex;
background-color: transparent;
}
}
.c-toolbar__left,
.c-toolbar__right {
flex-basis: auto;
}
}
/*------------------------------------*\
Modifier c-toolbar--clean
\*------------------------------------*/
.c-toolbar--clean {
.c-toolbar__inner {
justify-content: center;
}
}
/*------------------------------------*\
Modifier c-toolbar--language
\*------------------------------------*/
.c-toolbar--language {
.c-toolbar__right {
flex-direction: column;
align-items: flex-end;
}
}
/*------------------------------------*\
EMERGENCY NAV
\*------------------------------------*/
.c-toolbar__emergency-nav {
background-color: primary(sky, 20);
padding: remify(12px);
text-align: center;
@include min-screen(bp(tablet-p)) {
display: none;
}
ul {
li {
display: inline-block;
padding: 0 remify(6px);
a { font-weight: fw(bold);}
}
}
}
(function ($) {
'use strict';
if (!$.tangible) {
$.tangible = new Object();
};
$.tangible.navToolbar = function (el, options) {
var base = this;
base.$el = $(el);
base.el = el;
base.init = function () {
base.$InputSearch = $('.c-toolbar__search');
base.$ExpandedSearch = $('.c-expanded-search');
base.$closeBtn = $('.js-closeExpandedSearch');
// Generates an array of all the focusable elements within the dialog
base.focusableEls = base.$ExpandedSearch.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
base.focusableEls = Array.prototype.slice.call(base.focusableEls);
// Gets the first of these focusable elements
base.firstFocusableEl = base.focusableEls[0];
// Gets the last of these focusable elements
base.lastFocusableEl = base.focusableEls[base.focusableEls.length - 1];
// Focus event on input search
base.$InputSearch.click(function () {
base.showExpandedSearch(base.$ExpandedSearch);
});
// Event once you press TAB with search input focused
base.$InputSearch.keydown(function (e) {
var code = e.keyCode || e.which;
// 9 TAB button
// 27 ESC button
if (code == '9' || code == '27') {
base.closeExpandedSearch();
}
});
// Click event on close button
base.$closeBtn.click(function () {
base.closeExpandedSearch();
});
};
// Opens the search dialog
base.showExpandedSearch = function (el) {
el.toggleClass('is-visible');
base.$InputSearch.toggleClass('is-open');
// When the dialog is first opened, it can determines which element opened it
this.focusedElBeforeOpen = document.activeElement;
};
// Closes the search dialog
base.closeExpandedSearch = function () {
base.$ExpandedSearch.removeClass('is-visible');
base.$InputSearch.removeClass('is-open');
// When the dialog is then closed, it resets the focus
this.focusedElBeforeOpen.blur();
};
// Sets focus on dialogs elements
base.focusOnDialogEls = function () {
base.firstFocusableEl.focus();
};
base.init();
};
$.fn.tangible_navToolbar = function (options) {
return this.each(function () {
(new $.tangible.navToolbar(this, options));
});
};
})(jQuery);
No notes defined.