Header
Documentazione relativa alla header
Header Completa con Megamenù
La header fa uso di una libreria Javascript custom - keyboardNav.js - per dare supporto alla navigazione tramite tastiera; questa libreria va dunque sempre inclusa nel sorgente della pagina. Le funzionalità implementate sono:
- Voci principali di navigazione (in esempio: "Ateneo", "Didattica" etc)
- Tasti freccia destra, fraccia in giù, tab: passa alla voce di navigazione successiva.
- Tasti freccia sinistra, fraccia in su, shift+tab: passa alla voce di navigazione precedente.
- Tasto home: passa alla prima voce di navigazione.
- Tasto end: passa all'ultima voce di navigazione.
- Voci principali di navigazione con livelli inferiori megamenù e non (in esempio: "Internazionalità", "Servizi")
- Click sull'elemento con tag
<a>: se l'attributo<href>è uguale a "#", apre/chiude la tendina con le voci di navigazione di livello inferiore; se diverso conduce alla url indicata nell'attributo. - Click sull'elemento con tag
<button>: apre/chiude la tendina con le voci di navigazione di livello inferiore. - Su mobile (fino 992px width) l'elemento con tag
<a>non è visibile; è presente il solo<button>che apre/chiude la tendina con le voci di navigazione di livello inferiore. - Voci secondarie di navigazione megamenù e non
- Tasti freccia destra, fraccia in giù, tab: passa alla voce di navigazione successiva.
- Tasti freccia sinistra, fraccia in su, shift+tab: passa alla voce di navigazione precedente.
- Tasto home: passa alla prima voce di navigazione.
- Tasto end: passa all'ultima voce di navigazione.
- Tasto esc: chiude la tendina.
status message
<!-- modale di ricerca mobile -->
<div class="modal modal-search fade header-2024-search" role="dialog" aria-modal="true" tabindex="-1" id="ModalSearch"
aria-label="Finestra modale di ricerca">
<div class="visually-hidden" id="search-status" aria-live="polite">status message</div>
<div class="modal-dialog m-0">
<div class="modal-content container p-1">
<div class="modal-header ps-3 pe-3 pt-2 pb-2 justify-content-end"><span class="modal-title visually-hidden">Form di ricerca</span>
<a role="button" class="" aria-label="Chiudi" href="#" data-bs-dismiss="modal">
<svg role="img" aria-describedby="title_searchMobileClose" class="icon icon-xl">
<title id="title_searchMobileClose">Chiudi la ricerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-close"></use>
</svg>
</a>
</div>
<div class="modal-body">
<form id="search-block-form-modal" method="get" action="#">
<label for="edit-keys-modal" class="visually-hidden">Campo di ricerca</label>
<input
class="form-search form-control"
id="edit-keys-modal"
maxlength="128"
size="15"
value=""
name="keys"
type="search"
title="Inserisci i termini di ricerca."
placeholder="Cerca informazioni o persone">
<div class="form-actions">
<button class="btn p-0"
type="submit"
aria-label="Esegui la ricerca">
<span class="visually-hidden">Cerca</span>
<svg class="" width="24" height="24" viewBox="0 0 24 24" fill="#000"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 15.3L21.9 21.1L21.1 21.9L15.3 16C13.8225 17.2676 11.9465 17.9755 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C17.9755 11.9465 17.2676 13.8225 16 15.3ZM3 10C3 13.866 6.13401 17 10 17C11.8565 17 13.637 16.2625 14.9497 14.9497C16.2625 13.637 17 11.8565 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10Z"
fill="#000">
</path>
</svg>
</div>
</button>
</form>
<div class="mt-5 mb-5 modal-search__bottom d-flex justify-content-center">
<div class="modal-search__hint">Inserisci un termine per la ricerca</div>
</div>
</div>
</div>
</div>
</div>
<!-- header -->
<div class="mt-5 it-header-wrapper header-2024 p-0">
<div class="it-header-slim-wrapper theme-light">
<div class="col-12 p-0">
<div class="it-header-slim-wrapper-content ps-0 pe-0 ps-lg-3 pe-lg-3 d-flex">
<div class="container d-flex">
<div class="d-flex align-items-center">
<a class="d-inline-block navbar-brand" href="#">
<img class="d-none d-lg-block"
src="https://share.easyandjuice.com/v3/dist/svg/unitoit_negativo.svg" width=66"
height="14" alt="Università degli Studi di Torino">
<img class="d-block d-lg-none"
src="https://share.easyandjuice.com/v3/dist/svg/unitoit.svg" width=66" height="14"
alt="Università degli Studi di Torino">
</a>
</div>
<div class="d-none d-lg-flex justify-content-center align-items-center it-socials">
<a href="#" class="">
<svg role="img" aria-describedby="my-title2" class="icon icon-sm">
<title id="my-title2">Meta</title>
<use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title4" class="icon icon-sm">
<title id="my-title4">X</title>
<use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title5" class="icon icon-sm">
<title id="my-title5">Instagram</title>
<use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title3" class="icon icon-sm">
<title id="my-title3">LinkedIn</title>
<use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
<a href="#" class="">
<svg role="img" aria-describedby="my-title3_1" class="icon icon-sm">
<title id="my-title3_1">App</title>
<use xlink:href="./dist/svg/sprite.svg#it-app"></use>
</svg>
</a>
</div>
<div class="it-header-slim-right-zone justify-content-end pe-3">
<div class="d-flex m-0 align-items-center">
<ul class="d-none d-lg-flex navbar-nav flex-row justify-content-center align-items-center it-language">
<svg class="icon icon-sm me-1">
<use href="./dist/svg/sprite.svg#unito-profili-world" aria-hidden="true"></use>
</svg>
<li class="nav-item dropdown d-flex" id="cambio_lingua">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua"
aria-label="Cambia lingua" class="">ITA
</button>
<div class="dropdown-menu" id="menu_cambio_lingua">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>ITA</span></a></li>
<li><a class="list-item" href="#"><span>ENG</span></a></li>
<li><a class="list-item" href="#"><span>FRA</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<div class="status d-none d-lg-flex">
<a class="btn pt-1 pb-1 ps-2 pe-2 m-0" title="Stato Servizi" href="#" role="button">
<div class="d-flex align-items-center">
<svg role="img" aria-labelledby="button_tit1" class="icon">
<use href="./dist/svg/sprite.svg#it-check"></use>
<title id="button_tit1">Stato</title>
</svg>
STATO SERVIZI
</div>
</a>
</div>
<a class="d-flex justify-content-center align-items-center pt-2 pb-2 ps-2 pe-2 ps-lg-0 pe-lg-0 it-login"
href="#" title="Login">
<svg class="icon me-2 d-none d-lg-block" aria-hidden="true">
<use href="./dist/svg/sprite.svg#it-user-circle"></use>
</svg>
LOGIN</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container">
<div class="col-12 pt-3 pb-3 d-flex flex-row">
<div class="ps-3 it-header-center-content-wrapper">
<div class="it-brand-wrapper d-flex">
<a href="#" title="Lorem Ipsum">
<img class="d-none d-lg-block"
src="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" width="85"
alt="Università degli Studi di Torino">
<img class="d-block d-lg-none"
src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" width="100"
alt="Università degli Studi di Torino">
</a>
</div>
</div>
<div id="SearchWrapper" class="d-flex align-items-center it-search-wrapper d-none d-lg-flex">
<div class="w-100">
<form name="searchForm2024" class="d-flex" id="searchForm2024" action="#" method="post">
<label for="searchField" class="sr-only">Cerca</label>
<input role="searchbox" autocomplete="off" title="Cerca informazioni o persone"
type="text" class="form-control" name="search" id="searchField"
placeholder="Cerca informazioni o persone" aria-label="Cerca">
<button type="submit" id="searchButton" class="search-link rounded-icon"
aria-label="Cerca">
<svg role="img" aria-describedby="titleCerca" class="icon icon-sm negative">
<title id="titleCerca">Cerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</button>
</form>
</div>
</div>
<div class="it-right-zone pe-3 d-flex align-items-center justify-content-end">
<!-- menu informazioni per -->
<ul class="navbar-nav d-none d-lg-block me-1 me-xl-4">
<li class="nav-item dropdown d-flex" id="informazioni_per">
<button type="button" aria-expanded="false" aria-controls="menu_informazioni"
aria-label="Informazioni per">Informazioni per
</button>
<div class="dropdown-menu" id="menu_informazioni">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Lorem ipsum</span></a></li>
<li><a class="list-item" href="#"><span>Sic gloria</span></a></li>
<li><a class="list-item" href="#"><span>Emet</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- menu strutture -->
<ul class="navbar-nav d-none d-lg-block me-1 me-xl-4">
<li class="nav-item dropdown d-flex" id="strutture">
<button type="button" aria-expanded="false" aria-controls="menu_strutture"
aria-label="Strutture">Strutture
</button>
<div class="dropdown-menu" id="menu_strutture">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#"><span>Lorem ipsum</span></a></li>
<li><a class="list-item" href="#"><span>Sic gloria</span></a></li>
<li><a class="list-item" href="#"><span>Emet</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- unita mobile -->
<a href="#" class="d-none d-lg-block" title="UNITA">
<img class="unita" src="./dist/svg/logo_unita.svg" alt="UniTa" width="61">
</a>
<!-- search mobile -->
<div class="d-flex d-md-none me-3">
<a id="SearchMobileOpen" role="button"
class="SearchMobileTrigger search-link rounded-icon" title="Apri modale di ricerca" data-bs-toggle="modal" data-bs-target="#ModalSearch"
href="#">
<svg role="img" aria-describedby="title_searchMobile" class="icon">
<title id="title_searchMobile">Apri la ricerca</title>
<use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</a>
</div>
<!-- hamburgher menu -->
<button class="custom-navbar-toggler p-0" type="button" aria-controls="nav03"
aria-expanded="false" aria-label="Apri/chiudi menù" data-bs-target="#nav03"
data-bs-toggle="navbarcollapsible">
<svg role="navigation" aria-describedby="title-nav-mob" class="icon">
<title id="title-nav-mob">Apri</title>
<use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<!-- nav -->
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav03">
<!-- cambio lingua + MyUnito Mobile -->
<div id="lingua_unito_mob" class="d-flex d-lg-none ps-2 pt-3 pb-3">
<div class="col-12 ps-2">
<ul class="navbar-nav p-0">
<li class="nav-item dropdown d-flex" id="cambio_lingua_mob">
<button type="button" aria-expanded="false"
aria-controls="menu_cambio_lingua_mob"
aria-label="Cambia lingua">ITA
</button>
<div class="dropdown-menu position-absolute"
id="menu_cambio_lingua_mob">
<div class="link-list-wrapper mb-0">
<ul class="link-list">
<li><a class="list-item" href="#"><span>ITA</span></a></li>
<li><a class="list-item" href="#"><span>ENG</span></a></li>
<li><a class="list-item" href="#"><span>FRA</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="menu-wrapper pt-3 pt-lg-0">
<ul class="navbar-nav ">
<li class="nav-item dropdown megamenu" id="terr_soc">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#"
aria-controls="menu_ateneo" aria-expanded="false">
<span>Ateneo</span>
</a>
<button type="button" aria-expanded="false" aria-controls="menu_ateneo"
aria-label="Ateneo"><span class="d-flex d-lg-none">Ateneo</span>
</button>
<div class="dropdown-menu" id="menu_ateneo">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper flex-wrap p-3">
<div class="col-12 col-md-6 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Chi siamo</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bandi di gara e contratti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Assicurazione della Qualità - AQ</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Salute e Sicurezza</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>UniTo e sanità</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bilanci e assegnazione delle risorse</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Concorsi e selezioni</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Strutture e sedi</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Statuto e regolamenti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Organizzazione</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Mission, politiche e strategie</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Welfare UniTo</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" id="didattica"><a class="nav-link"
href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca"><a class="nav-link"
href="#"><span>Ricerca</span></a></li>
<li class="nav-item" id="ateneo"><a class="nav-link" href="#"><span>Territorio e Società</span></a>
</li>
<li class="nav-item dropdown" id="Internazionalita">
<a class="nav-link dropdown-toggle d-none d-lg-flex" href="#"
aria-controls="menu_internazionalita" aria-expanded="false">
<span>Internazionalità</span>
</a>
<button type="button" aria-expanded="false"
aria-controls="menu_internazionalita" aria-label="Internazionalità">
<span class="d-flex d-lg-none">Internazionalità</span></button>
<div class="dropdown-menu" id="menu_internazionalita">
<div class="link-list-wrapper pt-2 pb-2">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" href="#"><span>Link list 1</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 2</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 3</span></a>
</li>
<li><a class="list-item" href="#"><span>Link list 4</span></a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu" id="servizi">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_servizi"
aria-expanded="false">
<span>Servizi</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_servizi" aria-label="Servizi"><span
class="d-flex d-lg-none">Servizi</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_servizi">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12 col-md-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Chi siamo</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bandi di gara e contratti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Assicurazione della Qualità - AQ</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Salute e Sicurezza</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>UniTo e sanità</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Bilanci e assegnazione delle risorse</span></a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Concorsi e selezioni</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Strutture e sedi</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Statuto e regolamenti</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Organizzazione</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Mission, politiche e strategie</span></a>
</li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Welfare UniTo</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<hr class="d-block d-lg-none">
<li class="nav-item dropdown megamenu d-block d-lg-none" id="info_per">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_info_per"
aria-expanded="false">
<span>Informazioni per</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_info_per" aria-label="Informazioni per"><span
class="d-flex d-lg-none">Informazioni per</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_info_per">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu d-block d-lg-none" id="info_strutture">
<a class="nav-link dropdown-toggle d-none d-lg-flex"
href="https://www.unito.it" aria-controls="menu_info_strutture"
aria-expanded="false">
<span>Strutture</span>
</a>
<button id="servizi2" type="button" aria-expanded="false"
aria-controls="menu_info_strutture" aria-label="Strutture"><span
class="d-flex d-lg-none">Strutture</span></button>
<div class="dropdown-menu col-12 col-lg-10 m-auto" id="menu_info_strutture">
<div class="container d-flex flex-column flex-lg-row link-list-wrapper p-3">
<div class="col-12">
<div class="link-list-wrapper">
<ul class="link-list pl-3 pl-md-0 p-lg-1">
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
<li><a class="list-item" title="Lorem Ipsum"
href="#"><span>Lorem Ipsum</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="d-flex d-lg-none pt-4 pb-4 pr-3 justify-content-end it-buttons">
<a href="#" title="UNITA">
<img class="unita" src="./dist/svg/logo_unita_negativo.svg" alt="UniTa"
width="61">
</a>
</div>
<div class="d-flex d-md-none p-4 justify-content-between it-socials">
<a href="#" class="">
<svg role="img" aria-describedby="my-title2" class="icon icon-sm">
<title id="my-title2">Meta</title>
<use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title4" class="icon icon-sm">
<title id="my-title4">X</title>
<use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title5" class="icon icon-sm">
<title id="my-title5">Instagram</title>
<use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
<a href="#">
<svg role="img" aria-describedby="my-title3" class="icon icon-sm">
<title id="my-title3">LinkedIn</title>
<use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
<a href="#" class="">
<svg role="img" aria-describedby="my-title3_1" class="icon icon-sm">
<title id="my-title3_1">App</title>
<use xlink:href="./dist/svg/sprite.svg#it-app"></use>
</svg>
</a>
</div>
<div class="status mb-4 d-block d-lg-none text-center">
<a class="btn pt-0 pb-0 ps-2 pe-2" title="Stato Servizi" href="#" role="button">
<div class="d-flex align-items-center">
<svg role="img" aria-labelledby="button_tit2" class="icon">
<use href="./dist/svg/sprite.svg#it-check"></use>
<title id="button_tit2">Stato</title>
</svg>
STATO SERVIZI
</div>
</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>