Header
ultimo aggiornamento 25/11/24
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.
Vecchia versione: valutare se mantenere in documentazione
<div class="it-header-wrapper header-2024 container p-0">
<div class="it-header-slim-wrapper theme-light d-none d-md-block">
<div class="container">
<div class="col-12 p-0">
<div class="it-header-slim-wrapper-content ps-3 pe-3 d-flex">
<div class="w-25 d-flex align-items-center">
<a class="d-inline-block navbar-brand" href="#">
<img src="https://share.easyandjuice.com/v3/dist/svg/unitoit_negativo.svg" width=66" height="14" alt="Università degli Studi di Torino"></a>
</div>
<div class="w-50 d-flex justify-content-center it-socials">
<a href="#" class="" data-focus-mouse="false">
<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="" data-focus-mouse="false">
<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 w-25 justify-content-end">
<div class="d-flex">
<ul class="navbar-nav me-md-2 me-lg-5">
<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="" data-focus-mouse="false">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>
<a class="d-flex align-items-center" href="#" title="MyUnito">MyUnito<svg class="icon ml-2"><use href="./dist/svg/sprite.svg#it-user-circle"></use></svg></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 ps-3 pe-3 pt-3 pb-3 d-flex flex-row">
<div class="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-md-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>
<a id="SearchMobileClose" role="button" class="SearchMobileTrigger d-none search-link rounded-icon" aria-label="Chiudi la ricerca" href="#">
<svg role="img" aria-describedby="title_searchMobileClose" class="icon">
<title id="title_searchMobileClose">Chiudi la ricerca</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use>
</svg>
</a>
</div>
<div class="it-right-zone 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">
<a id="SearchMobileOpen" role="button" class="SearchMobileTrigger search-link rounded-icon" aria-label="Apri la ricerca" 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" 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-md-none pt-3 pb-3">
<div class="col-6 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" class="" data-focus-mouse="false">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 class="col-6">
<a class="unito d-flex align-items-center justify-content-end" href="#" title="MyUnito">MyUnito
<svg class="icon ml-2"><use href="./dist/svg/sprite.svg#it-user-circle"></use></svg>
</a>
</div>
</div>
<!-- menù -->
<div class="menu-wrapper pt-4 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 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> <span class="visually-hidden">current</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 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>
</ul>
</div>
<!-- unita -->
<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>
<!-- bottoni informazioni, strutture, avvisi, eventi mobile -->
<div class="d-flex d-lg-none justify-content-center flex-wrap p-2 it-buttons">
<div class="col-6 p-2">
<a class="btn btn-outline-primary w-100" title="Informazioni per" href="#" role="button" data-focus-mouse="false">Informazioni per</a>
</div>
<div class="col-6 p-2">
<a class="btn btn-outline-primary w-100" title="Strutture" href="#" role="button" data-focus-mouse="false">Strutture</a>
</div>
<div class="col-6 p-2">
<a class="btn btn-outline-primary w-100" title="Avvisi" href="#" role="button" data-focus-mouse="false">Avvisi</a>
</div>
<div class="col-6 p-2">
<a class="btn btn-outline-primary w-100" title="Eventi" href="#" role="button" data-focus-mouse="false">Eventi</a>
</div>
</div>
<!-- socials mobile -->
<div class="d-flex d-md-none p-4 justify-content-center it-socials">
<a href="#" class="" data-focus-mouse="false">
<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="" data-focus-mouse="false">
<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>
</nav>
</div>
</div>
</div>
</div>