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.
<div class="it-header-wrapper it-shadow container p-0">
<div class="it-header-slim-wrapper theme-light">
<div class="container">
<div class="row">
<div class="col-12">
<div class="it-header-slim-wrapper-content p-1">
<a class="d-none d-lg-block navbar-brand" href="#">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" height="32" width="86" alt="Università degli Studi di Torino"></a>
<div class="it-header-slim-right-zone">
<ul class="navbar-nav d-flex d-lg-none">
<li class="nav-item dropdown d-flex" id="cambio_lingua_mobile">
<button type="button" aria-expanded="false" aria-controls="menu_cambio_lingua_mobile" aria-label="Cambia lingua" >ITA</button>
<div class="dropdown-menu" id="menu_cambio_lingua_mobile">
<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>
<ul class="navbar-nav">
<li class="nav-item dropdown d-flex" id="accesso_rapido">
<button type="button" aria-expanded="false" aria-controls="menu_accesso_rapido" aria-label="Accesso Rapido" >Accesso Rapido</button>
<div class="dropdown-menu" id="menu_accesso_rapido">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="list-item" href="#" ><span>Link 1</span></a></li>
<li><a class="list-item" href="#" ><span>Link 2</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
<!--<a href="#" id="login" class="d-block d-lg-none" aria-label="Login" title="Login">Login</a>-->
<div class="d-flex d-lg-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>
<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-access-top-wrapper d-none d-lg-block">
<a href="#" class="ps-2"><img src="./assets/images/LogoUNITA.png" width="40" alt="UniTa"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container h-100 ps-0 pe-0">
<div class="row h-100 align-items-center">
<div class="col-12 ">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper d-flex">
<button class="custom-navbar-toggler" type="button" aria-controls="nav02" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#nav02" data-bs-toggle="navbarcollapsible">
<svg role="navigation" aria-describedby="my-title8" class="icon">
<title id="my-title8">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
<a href="#">
<img src="./assets/images/school.png" width="109" alt="Dental School" class="d-none d-lg-block">
<div class="it-brand-wrapper-descriptor">Centro di Eccellenza per la Ricerca, la Didattica e l'Assistenza in Campo Odontostomatologico - Dental School</div></a>
</div>
<div class="it-right-zone">
<a class="d-block d-lg-none navbar-brand ps-1" href="#" data-focus-mouse="false">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" height="32" width="86" alt="Università degli Studi di Torino"></a>
<div class="it-access-top-wrapper d-block d-lg-none ps-1 pe-1">
<a href="#"><img src="./assets/images/LogoUNITA.png" width="40" alt="UniTa"></a>
</div>
<div class="justify-content-between it-socials d-none d-lg-flex">
<div class="d-flex">
<ul class="navbar-nav">
<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" >Italiano</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>Italiano</span></a></li>
<li><a class="list-item" href="#"><span>English</span></a></li>
<li><a class="list-item" href="#"><span>Francais</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<ul>
<li>
<a href="#" aria-label="Facebook" target="_blank">
<svg role="img" aria-describedby="social_1" class="icon">
<title id="social_1">Facebook</title><use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Twitter" target="_blank">
<svg role="img" aria-describedby="social_2" class="icon">
<title id="social_2">Twitter</title><use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_3" class="icon">
<title id="social_3">Instagram</title><use xlink:href="./dist/svg/sprite.svg#it-instagram"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_4" class="icon">
<title id="social_4">LinkedIn</title><use xlink:href="./dist/svg/sprite.svg#it-linkedin"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Instagram" target="_blank">
<svg role="img" aria-describedby="social_5" class="icon">
<title id="social_5">Youtube</title><use xlink:href="./dist/svg/sprite.svg#it-youtube"></use>
</svg>
</a>
</li>
</ul>
</div>
<div id="SearchWrapper" class="it-search-wrapper mt-lg-2 mr-lg-0 mr-lg-1 d-none d-lg-flex">
<form name="searchForm" class="d-flex w-100" id="searchForm" 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 negative">
<title id="titleCerca">Cerca</title><use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</button>
</form>
</div>
</div>
</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">
<!--start nav-->
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav02" style="display: none;">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo"><a class="nav-link" href="#"><span>Ateneo </span></a></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="UniLavoro"><a class="nav-link" href="#"><span>Università e Lavoro</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">
<ul class="link-list">
<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" id="menu_servizi">
<div class="row link-list-wrapper">
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 1</h3>
</li>
<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>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 2</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
<li><a class="list-item" href="#"><span>Link list 5</span></a></li>
<li><a class="list-item" href="#"><span>Link list 6</span></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-4 ">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc">Heading 3</h3>
</li>
<li><a class="list-item" href="#"><span>Link list 7</span></a></li>
<li><a class="list-item" href="#"><span>Link list 8</span></a></li>
<li><a class="list-item" href="#"><span>Link list 9</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>