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
Combinare Container Queries e Media Queries
Configurare automaticamente un webhook in Azure DevOps
Testare il failover sulle region in Azure Storage
Generare una User Delegation SAS in .NET per Azure Blob Storage
Eseguire query in contemporanea con EF
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Gestire progetti .NET + React in .NET Aspire
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Configurare lo startup di applicazioni server e client con .NET Aspire
Integrare un servizio esterno con .NET Aspire
Supportare la sessione affinity di Azure App Service con Application Gateway
I più letti di oggi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!