Nelle applicazioni moderne per il web, troviamo raramente layout con sidebar laterale. Dietro a questa scelta possono esserci numerosi motivi, tra cui il cambio di abitudini dell'utente medio, che si aspetta di trovare tutte le opzioni in cima o a fine pagina, ma anche lo spostamento della fruzione del web da desktop a mobile.
La sidebar in alcuni contesti risulta comunque utile: in pagine di ricerca articoli possiamo utilizzarla per effettuare una ricerca o applicare dei filtri. Il problema resta però lo stesso: come gestisco una sidebar visualizzata su schermo piccolo? Con un layout flex è possibile, utilizzando solamente il CSS, muovere la sidebar in testa o ai piedi del contenuto di pagina, mantenendo un design pulito. Vediamo come costruire lo scheletro della pagina e applicare il CSS utilizzando anche media-query.
<div class="wrapper"> <!--sidebar--> <aside> <ul> <li>filtro1</li> <li>filtro2</li> <li>filtro3</li> </ul> </aside> <!--contenuto--> <main> <div class="wrapper_inner"> <p> Testo </p> </p> </div> </main> </div>
In questo codice HTML, utilizziamo la classe wrapper per impostare lo stile display: flex; e wrapper_inner per separare il testo dal bordo del contenitore. Possiamo anche impostare lo stile della lista puntando l'elemento aside.
ul { list-style: none; } li { color: #fff; } aside { border-right: 1px solid #ededed; background: #36c; flex: 1 0 10%; padding: 1rem; } .wrapper { display: flex; height: 100%; } .wrapper_inner { width: 90%; margin: 0px auto; }
Non resta altro che gestire la parte mobile. Attraverso una media-query cambiamo l'orientamento della sidebar/contenuto e degli elementi della lista valorizzando flex-direction.
@media (max-width: 700px) { .wrapper { flex-direction: column; } ul { display: flex; align-items: center; justify-content: space-between; } }
Nel caso in cui volessimo spostare la sidebar a fondo pagina possiamo utilizzare lo style CSS column-reverse.
.wrapper { flex-direction: column-reverse; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esecuzione a matrici nei workflow di GitHub Action
Come sono state modificate le checkbox nelle form di Bootstrap 5
Utilizzare le Promise in Javascript - prima parte
Graceful shutdown di un hosted service di ASP.NET Core
Usare il throttling per limitare la frequenza degli eventi in Blazor
Utilizzare il metodo reduce in JavaScript
Utilizzare Front Door come CDN di contenuti statici
Impostare l'hostname di un'immagine docker per rendere il container da altri container in Visual Studio
Utilizzare i metodi Linq MinBy e MaxBy per semplificare le ricerche degli elementi minimi e massimi in liste di oggetti complessi con LINQ
Utilizzare l'API del browser fetch
Impostare il tema light o dark utilizzando i CSS
Integrare e trasformare dati con Azure Data Factory
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio