Responsive e Menu
Attraverso l’uso del CSS è possibile creare delle pagine "responsive" cioè capace di adattarsi al dispositivo su cui vengono visualizzato.
Un esempio di questo lo si vede nel link "Esempio Responsive" in cui viene mostrata una pagina il cui header rimane fisso (non scrolla) e che, a seconda della dimensione dello schermo, mostra o meno sullo sfondo a sinistra l’immagine della Torre di Pisa e in alto a sinistra il pulsante ad Hamburger (☰).
Questo viene ottenuto attraverso l’uso del CSS, in particolare dei costrutti di Media Query e del Checked Selector, attraverso i quali è possibile scegliere quali oggetti visualizzare sullo schermo e come visualizzarli.
Ecco alcune delle regole CSS più importanti a riguardo:
html, body
{
height: 100%;
margin: 0px;
...
}
.ClsDivHeader
{
overflow: hidden;
height: 50px;
background-color: rgb(230,230,210);
}
.ClsDivCorpo
{
position: relative;
top: 0px;
left: 0px;
overflow: auto;
height: calc(100% - 50px);
}
.ClsHamburgerMenuCheck[type=checkbox]
{
display: none;
}
.ClsHamburgerMenuCheck[type=checkbox]:checked ~ .ClsDivMenu
{
display: block;
}
.TopNavMenu
{
position: fixed;
top: 0px;
left: 200px;
overflow: hidden;
background-color: transparent;
z-index: 10;
}
@media (max-width: 850px)
{
.ClsDivMenu
{
display: none;
}
.TopNavMenu
{
top: 50px;
left: 0px;
background-color: rgb(230,230,210);
}
.ClsTopLogo
{
left: 60px;
}
.ClsBody
{
color: #2c0e10;
background-image: none;
}
.ClgMargLeftCorpo
{
margin-left: 0px;
}
}
Sempre attraverso l'uso del CSS di possono definire dei menu che si comportano in maniera diversa a seconda della dimensione dello schermo.
Ad esempio vengono visualizzati in orizzontale oppure in verticale dopo aver premuto il pulsante ad Hamburger.
In realtà il pulsante ad Hamburger è una label collegata ad un checkbox invisibile attraverso la proprietà “for”.
La regola CSS:
.ClsHamburgerMenuCheck[type=checkbox]:checked ~ .ClsDivMenu
si attiva quando si seleziona il checkbox premendo sulla label e fa sì che venga mostrato il menu..
Ecco i link ad una pagina responsive con header fisso in puro CSS
Ecco i link a degli esempi di menu responsive in puro CSS