Header
Documentazione relativa alla header e le sua varianti disponibili
Documentazione ed esempi per la creazione di una testata di navigazione.
Header Completo
<div class="it-header-wrapper it-shadow">
<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">
<a class="d-none d-lg-block navbar-brand" href="#"><img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it"></a>
<div class="nav-mobile">
<nav>
<a class="it-opener d-lg-none" data-toggle="collapse" href="#menu4" role="button" aria-expanded="false" aria-controls="menu4">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="unitoTab img-fluid">
<svg role="image" aria-describedby="my-title" class="icon">
<title id="my-title">Apri menù</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="link-list-wrapper collapse" id="menu4">
<ul class="link-list">
<li><a class="list-item" href="#">Chi sei?</a></li>
<li><a class="list-item" href="#">Come fare per</a></li>
<li><a class="list-item" href="#">Strutture</a></li>
</ul>
</div>
</nav>
</div>
<div class="it-header-slim-right-zone">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>ITA</span>
<svg role="navigation" aria-describedby="my-title2" class="icon d-block">
<title id="my-title2">Apri menù</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="row">
<div class="col-12">
<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>ZHO</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-full" href="#">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#" title="Università di Torino">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="121" width="97">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" height="80" width="140" >
</picture>
</a>
</div>
<div class="it-right-zone">
<div class="it-socials d-none d-md-flex">
<span>Seguici su</span>
<ul>
<li>
<a href="#" aria-label="Facebook" target="_blank">
<svg role="img" aria-describedby="my-title4" class="icon">
<title id="my-title4">Facebook</title><use xlink:href="./dist/svg/sprite.svg#it-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Github" target="_blank">
<svg role="img" aria-describedby="my-title5" class="icon">
<title id="my-title">GitHub</title><use xlink:href="./dist/svg/sprite.svg#it-github"></use>
</svg>
</a>
</li>
<li>
<a href="#" aria-label="Twitter" target="_blank">
<svg role="img" aria-describedby="my-title6" class="icon">
<title id="my-title6">Twitter</title><use xlink:href="./dist/svg/sprite.svg#it-twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="it-search-wrapper">
<span class="d-none d-md-block">Cerca</span>
<a class="search-link rounded-icon" aria-label="Cerca" href="#">
<svg role="img" aria-describedby="my-title7" class="icon">
<title id="my-title7">Cerca</title><use xlink:href="./dist/svg/sprite.svg#it-search"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12">
<!--start nav-->
<nav class="navbar navbar-expand-lg has-megamenu">
<button class="custom-navbar-toggler" type="button" aria-controls="nav02" aria-expanded="false" aria-label="Toggle navigation" data-target="#nav02">
<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>
<div class="navbar-collapsable" id="nav02" style="display: none;">
<div class="overlay" style="display: none;"></div>
<div class="close-div sr-only">
<button class="btn close-menu" type="button"><span class="it-close"></span>close</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link " href="#"><span>Ateneo </span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item"><a class="nav-link active" href="#"><span>Ricerca</span> <span class="sr-only">current</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Internazionalità</span>
<svg role="navigation" aria-describedby="my-title9" class="icon icon-xs">
<title id="my-title9">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc" id="heading-es-5">Heading</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>
<li><span class="divider"></span></li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Servizi</span>
<svg role="navigation" aria-describedby="my-title10" class="icon icon-xs">
<title id="my-title10">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="row">
<div class="col-12 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-12 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 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-12 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 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>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div> Header Alternativo
Un header alternativo, con contenuti e funzionalità ridotti.
La classse it-header-sticky è opzionale e, se presente, fa si allo scroll-down della pagina la header resti in posizione bloccata in alto.
<header>
<div class="it-header-wrapper it-header-sticky">
<div class="it-nav-wrapper">
<div class="it-header-center-wrapper theme-light">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#" title="Vista la home page delle'Università di Torino">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="121" width="97">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Sigillo dell'Università degli Studi di torino" height="80" width="140" >
</picture>
</a>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-full" href="#" data-focus-mouse="false">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-header-navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-12">
<!--start nav-->
<nav class="navbar navbar-expand-lg has-megamenu">
<button class="custom-navbar-toggler" type="button" aria-controls="nav02" aria-expanded="false" aria-label="Toggle navigation" data-target="#nav02">
<svg role="navigation" aria-describedby="my-titleA" class="icon">
<title id="my-titleA">Apri menù</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
<div class="navbar-collapsable" id="nav02" style="display: none;">
<div class="overlay" style="display: none;"></div>
<div class="close-div sr-only">
<button class="btn close-menu" type="button"><span class="it-close"></span>close</button>
</div>
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link " href="#"><span>Ateneo </span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item"><a class="nav-link active" href="#"><span>Ricerca</span> <span class="sr-only">current</span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span>Università e Lavoro</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Internazionalità</span>
<svg role="navigation" aria-describedby="my-titleB" class="icon icon-xs">
<title id="my-titleB">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<h3 class="no_toc" id="heading-es-5">Heading</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>
<li><span class="divider"></span></li>
<li><a class="list-item" href="#"><span>Link list 4</span></a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span>Servizi</span>
<svg role="navigation" aria-describedby="my-titleC" class="icon icon-xs">
<title id="my-titleC">Apri</title><use xlink:href="./dist/svg/sprite.svg#it-expand"></use>
</svg>
</a>
<div class="dropdown-menu">
<div class="row">
<div class="col-12 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-12 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 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-12 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 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>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div><!-- questo div è richiesto da bootstrap, non eliminarlo --></div>
</header>Header servizi online
Nelle sezioni dedicate ai servizi online può essere utile una versione differente della header, che riporti solo il brand, senza navigazione.
<header class="row interna pb-2 pt-2">
<div class="col-6 text-left pl-2">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="220" height="49">
</a>
</div>
<div class="col-6 float-right text-right">
<picture class="d-block float-right pr-2">
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="121" width="97">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Sigillo dell'Università degli Studi di torino" height="80" width="140" >
</picture>
</div>
</header>Header Minimale
Nella versione Minimale è consigliabile aggiungere la classe headroom al tag principale della header.
Questa classe reagisce allo scorrimento di pagina dell'utente, nascondendo la header quanto l'utente scorre verso il basso e facendola ricomparire quando l'utente scrolla verso l'alto.
Perché usarlo
Le intestazioni fisse sono un approccio popolare per mantenere la navigazione principale nelle immediate vicinanze dell'utente. Questo può ridurre lo sforzo richiesto per un utente di navigare rapidamente in un sito, ma non sono privi di problemi.
Mentre gli schermi di grandi dimensioni hanno generalmente un aspect ratio "landscape", a sviluppo orizzontale,
gli schermi di piccole dimensioni vengono generalmente utilizzati con orientamento verticale. Sebbene ciò si traduca in uno spazio più verticale più ampio, una header di grandi dimensioni può occupare una parte significativa dello schermo: l'uso di headroom può aiutare a dare maggior spazio e rilievo al contenuto in pagina.
La libreria non è presente nel bundle javascript, per cui quando necessaria, includerla col codice:
<script src="https://cdn.unito.it/unito-theme/v2/js/headroom.min.js" crossorigin="anonymous"></script>Ricorda: quando usi le classi
headroom o fixed-content il contenuto sottostante non viene spostato verso il basso in quanto il menù è in overlay sul contenuto: ricorda di applcare al contenuto immediatamente succssivo un margine superiore sufficiente, in modo tale che non risulti inizialmente nascosto sotto il menù.
Inoltre, headroom va inizializzato via Javascript, come in esempio
var header = document.querySelector(".headroom");
var headroom = new Headroom(header, {
offset : 205,
tolerance: {
down : 10,
up : 20},
classes: {
initial: "animated",
pinned: "slideDown",
unpinned: "slideUp"
}
});
Header minimale con bottone di login
<div class="it-header-center-wrapper minimal theme-light shadow ">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header minimale con utente loggato
<div class="it-header-center-wrapper minimal theme-light shadow ">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Header Minimale con navigazione
La navigazione viene veicolata introducendo in pagina un componente di navigazione Sidebar.
La comparsa del menù viene affidata a un bottone introdotto alla sinistra del logo, qualificato con l'attributo data-toggle="collapse".
L'attributo data-target conterrà invece la ID dell'elemeno sidebar di riferimento.
Nell'ambiente della documentazione, che già presenta una sua sidebar, non è possibile una sua visualizzazione, si veda la pagina di esempio e relativo codice html.
Header minimale con navigazione e bottone di login
<div class="it-header-center-wrapper minimal theme-light shadow ">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#id_della_sidebar">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
<span class="sr-only">Apri menù</span>
</svg>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="it-access-top-wrapper">
<a class="btn btn-primary btn-sm" href="#">Accedi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Header minimale con navigazione e utente loggato
<div class="it-header-center-wrapper minimal theme-light shadow">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="left-header">
<div class="it-brand-wrapper">
<button class="minimal-toggler navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#id_della_sidebar">
<svg role="navigation" aria-describedby="my-title" class="icon">
<title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-burger"></use>
<span class="sr-only">Apri menù</span>
</svg>
</button>
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" class="img-fluid" style="max-width: 100px;" width="100" height="22">
</a>
</div>
</div>
<div class="it-right-zone">
<div class="avatar-wrapper avatar-extra-text">
<div class="avatar size-sm">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
</div>
<div class="extra-text">
<h4><a href="#">Michela Dotti</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>