Header
Header applicativi Web.
E’ composto da due parti, entrambe obbligatorie:
- top bar
- barra istituzionale
Top bar
Può contenere voci di servizio quali: Login/Logout (quindi la gestione del profilo utente tramite le voci del dropdown), Scelta lingua, Assistenza.
<div class="it-header-slim-wrapper it25-top-bar">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-slim-wrapper-content">
<a class="navbar-brand" href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" alt="logo regione lombardia" class="d-md-none">
</a>
<div class="header-slim-right-zone">
<div class="nav-item dropdown">
<a aria-expanded="false" class="nav-link dropdown-toggle"
data-toggle="dropdown" href="#">
<span>ITA</span>
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/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>ESP</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a class="btn btn-primary btn-icon btn-full" href="#" title="Accedi all'area personale" aria-label="Accedi all'area personale">
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-user"></use>
</svg>
<span class="d-none d-md-block">Login</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Nel momento in cui la pagina viene caricata a video, la barra è alta 58 pixel.
Rimane fissa in cima alla pagina quando questa scorre verso l’alto.
Su smartphone
- Appare il logo della Regione Lombardia in negativo
- Le voci servizio sono ridotte a icona
Su Desktop
- Il logo della Regione Lombardia in negativo non è visualizzato
- Le voci di servizio hanno la dicitura
Quando la pagina scorre verso il basso:
- le voci servizio e l’eventuale logo in negativo scompaiono
- l’altezza si riduce a 20 pixel
Top bar sottile
Nel caso in cui non si abbiano voci di servizio da inserire, la top bar può essere ridotta ad un’altezza di 20 pixel già alla comparsa della pagina, aggiungendo la classe thin al div principale del componente.
<div class="it-header-slim-wrapper it25-top-bar thin">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-slim-wrapper-content">
<a class="navbar-brand" href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" alt="logo regione lombardia" class="d-md-none">
</a>
</div>
</div>
</div>
</div>
</div>Su smartphone la top bar sottile inizialmente apparirà comunque alta 56 pixel per mostrare il logo della Regione Lombardia (che non è mostrato nella barra istituzionale per ragioni di spazio), per poi restringersi allo scorrimento verso il basso della pagina.
Barra istituzionale
Deve contenere il logo di Regione Lombardia e il nome dell’applicativo, preceduto dall’ acronimo se esiste.
Può contenere l’hamburger menu a sinistra del logo di Regione Lombardia e il campo di ricerca a destra.
L’altezza iniziale della barra è di 94 pixel su schermi grandi, di 80 su schermi piccoli.
A scorrimento verso il basso rimane fissa posizionandosi sotto la top bar e si restringe a 50 pixel.
Su smartphone
- Il logo della Regione Lombardia scompare (viene sostituito dal logo in negativo sulla top bar)
- Il nome dell’applicativo si riduce di dimensione
- L’eventuale campo di ricerca è ridotto a icona
- Compare il pulsante hamburger per l’apertura del menù orizzontale o della sidebar.
A scorrimento in basso
- Il logo della Regione compare rimpicciolito (quello nella topbar scorre verso l’alto e non è più visibile)
- Il nome dell’applicativo viene ulteriormente ridotto di dimensione
- Il campo di ricerca scompare
- Il pulsante hamburger è leggermente rimpicciolito
- L’altezza complessiva della barra istituzionale diminuisce
Su desktop
- Il Logo della Regione è visualizzato in grande
- Il nome dell’applicativo ha un font di dimensioni maggiori
- Il campo di ricerca è mostrato.
- Il pulsante hamburger non compare in quanto il menù orizzontale, o la sidebar, è mostrato.
A scorrimento in basso
- Il Logo della Regione rimpicciolisce
- Il nome dell’applicativo rimpicciolisce
- Il campo di ricerca rimane invariato
- L’altezza complessiva della barra diminuisce.
Nota: per poter meglio rendersi conto del comportamento della top bar e della barra istituzionale è utile richiamare una delle schermate composte, per esempio quella della Tabella complessa.
<div class="it-header-center-wrapper it25-barra-ist">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<div class="it25-hamburger-btn-wrapper">
<button aria-controls="it25-main-nav" aria-expanded="false"
aria-label="Apri menù" class="custom-navbar-toggler btn btn-xs it25-btn-menu"
data-target="#it25-main-nav" type="button">
<svg class="icon">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-burger"></use>
</svg>
</button>
<div class="it25-close-div">
<button class="btn btn-xs close-menu" type="button" data-target="#it25-main-nav" aria-controls="it25-main-nav" aria-label="Chiudi menù" >
<svg class="icon">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-close-big"></use>
</svg>
</button>
</div>
</div>
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" alt="logo regione lombardia" class="it25-header-logo d-none d-md-block">
<div class="it-brand-text">
ACRONIMO Nome applicativo
</div>
</a>
</div> <!-- end it-brand-wrapper -->
<div class="it-right-zone">
<div class="it-search-wrapper">
<input class="form-control d-none d-lg-flex mr-sm-2 ml-auto" type="search" placeholder="Cerca" aria-label="Testo per ricerca">
<button class="btn p-0 m-1" type="submit" aria-label="Esegui ricerca">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-search"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Il <div> principale è caratterizzato dalle classi it-header-center-wrapper e it25-barra-ist.
Al suo interno il div con classe it-header-center-content-wrapper contiene due div che posizionano il loro contenuto verso il lato sinistro e destro della barra, che hanno rispettivamente le classi: it-brand-wrapper e it-right-zone.
In it-brand-wrapper oltre al logo della Regione Lombardia e al nome dell’applicativo, sono contenuti 2 bottoni che appaiono solo sugli schermi di minori dimensioni, alternativamente per aprire o chiudere il menù orizzontale o la sidebar eventualmente presenti nella pagina.
Bottone hamburger
Il bottone hamburger compare nella barra istituzionale a sinistra del logo di Regione Lombardia.
Una volta premuto il bottone l’icona hamburger è sostituita da una “X” per segnalare che premendolo nuovamente il menù (o la sidebar) scomparirà.
Il menu orizzontale è visualizzato immediatamente se la finestra ha dimensioni lg o xl.
Quindi il bottone hamburger compare quando le dimensioni della pagina sono xs o sm o md.
La sidebar invece compare anche sugli schermi md e, di conseguenza, il relativo bottone hamburger solo per pagine xs o sm.
Per ottenere questo comportamento, la struttura HTML dell’header della pagina deve essere di questo tipo:
Per il menù orizzontale
<header class="it25-menu"> (oppure semplicemente <header>)
. . . top bar . . .
. . . barra istituzionale . . .
. . . barra utente (facoltativa) . . .
. . . menu orizzontale . . .
</header>Per la sidebar
<header class="it25-sidebar">
. . . top bar . . .
. . . barra istituzionale . . .
. . . barra utente (facoltativa) . . .
</header>La sidebar poi va inserita nel body della pagina (vedi esempio pagina con sidebar).
Nel caso in cui non si abbiano né l’una né l’altra, e quindi il bottone hamburger non vada mai visualizzato, la struttura deve essere:
<header class="it25-none">
. . . top bar . . .
. . . barra istituzionale . . .
. . . barra utente (facoltativa) . . .
</header>Due loghi
Nella barra istituzionale è possibile inserire un secondo logo utilizzando un tag img con le classi it25-header-logo d-none d-md-block.
Comparirà accanto a quello di Regione Lombardia e avrà lo stesso comportamento responsivo.
E’ possibile vedere un esempio nella pagina form.