Header - Varianti
Documentazione relativa alle varianti disponibili per la header
Nelle sezioni dedicate ai servizi online può essere utile una versione differente della header, che riporti solo il brand, senza navigazione. Per convenzione, entrambi i loghi (unito.it e sigillo) linkano alla Hompage del Portale
Header servizi online
Utente non loggato
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div>
<a class="btn btn-primary btn-xs ms-2" href="#" title="Login" role="button">Login</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<a href="#">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</a>
</div>
</div>
</header>Utente loggato
Nome Cognome | Tecnico Amministrativo
Logout
<header class="interna internav3 pb-2 pt-2 ps-2 ps-lg-5 pe-2 pe-lg-5 m-auto flex-column">
<div class="col-12 text-right login pb-2">
<div class="container">
<span>Nome Cognome | Tecnico Amministrativo <svg class="icon icon-sm"><use href="./dist/svg/sprite.svg#it-user-circle"></use></svg></span>
<a class="btn btn-primary btn-xs ms-2" href="#" title="Logout" role="button">Logout</a>
</div>
</div>
<div class="container p-0 d-flex align-items-center flex-row">
<div class="col-6 text-left">
<a href="#">
<img src="https://cdn.unito.it/unito-loghi/unitoit.svg" alt="Unito.it" width="136" height="30">
</a>
</div>
<div class="col-6 text-right">
<picture>
<source media="(min-width: 992px)" srcset="https://cdn.unito.it/unito-loghi/logo_sigillo.svg" height="120" width="80">
<img src="https://cdn.unito.it/unito-loghi/logo_sigillo_orizzontale.svg" alt="Università degli Studi di Torino" height="80" width="140" >
</picture>
</div>
</div>
</header>Header Minimale
Header minimale con bottone di login
<div class="it-header-center-wrapper minimal theme-light shadow container">
<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 container">
<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 a comparsa
In questa variante, la navigazione del sito in uso per la header completa, viene visualizzata a comparsa.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<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" aria-controls="nav03" aria-expanded="false" aria-label="Toggle navigation" data-bs-target="#nav03" data-bs-toggle="navbarcollapsible" data-focus-mouse="false">
<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>
</svg>
<span class="visually-hidden">Apri menù</span>
</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 class="it-header-navbar-wrapper mt-lg-2">
<div class="container">
<div class="row">
<div class="col-12 ps-0 pe-0">
<nav class="navbar navbar-expand-lg has-megamenu">
<div class="navbar-collapsable" id="nav03" aria-expanded="false">
<div class="menu-wrapper">
<ul class="navbar-nav">
<li class="nav-item" id="ateneo2"><a class="nav-link" href="#" data-focus-mouse="false"><span>Ateneo </span></a></li>
<li class="nav-item" id="didattica2"><a class="nav-link" href="#"><span>Didattica</span></a></li>
<li class="nav-item" id="ricerca2"><a class="nav-link" href="#"><span>Ricerca</span> <span class="visually-hidden">current</span></a></li>
<li class="nav-item" id="UniLavoro2"><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>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Header minimale con navigazione sidebar
In questa variante, 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-bs-toggle="collapse".
L'attributo data-bs-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.
<div class="it-header-center-wrapper minimal theme-light shadow container">
<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-bs-toggle="collapse" data-bs-target="#id_sidebar" data-focus-mouse="false">
<svg class="icon"><use xlink:href="./dist/svg/sprite.svg#it-burger"></use></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>