COME
Come fare per casaMenù
Barra delle icone Icona del menu Fisarmonica Schede Schede verticali Intestazioni delle schede Schede a pagina intera Schede al passaggio del mouse Navigazione superiore Navigazione superiore reattiva Navbar con icone Menu di ricerca Barra di ricerca Barra laterale fissa Navigazione della pagina Barra laterale reattiva Navigazione a schermo intero Menu fuori tela Passare i pulsanti di navigazione laterale Barra laterale con icone Menu a scorrimento orizzontale Menù verticale Navigazione in basso Navigazione in basso reattiva Collegamenti di navigazione del bordo inferiore Collegamenti del menu allineati a destra Collegamento al menu centrato Collegamenti menu di uguale larghezza Menù fisso Scorri la barra verso il basso durante lo scorrimento Nascondi barra di navigazione su scorrimento Riduci la barra di navigazione a scorrimento Barra di navigazione appiccicosa Navbar sull'immagine Passa il mouse a discesa Fare clic su Menu a discesa Discesa a cascata Menu a discesa in Topnav Menu a discesa in Sidenav Resp Navbar a discesa Menu di sottonavigazione Ritiro Menù Mega Menù mobile Menù a tendina Barra laterale compressa Pannello laterale crollato Impaginazione Briciole di pane Gruppo di pulsanti Gruppo di pulsanti verticali Barra sociale appiccicosa Navigazione pillola Intestazione reattivaimmagini
Presentazione Galleria di diapositive Immagini modali Lightbox Griglia immagine reattiva Griglia di immagini Galleria di schede Dissolvenza sovrapposizione immagine Sovrapposizione immagine diapositiva Zoom immagine sovrapposta Titolo sovrapposizione immagine Icona Sovrapposizione immagine Effetti immagine Immagine in bianco e nero Testo immagine Blocchi di testo immagine Testo immagine trasparente Immagine a pagina intera Modulo su immagine Immagine dell'eroe Immagine di sfondo sfocata Cambia Bg su Scroll Immagini affiancate Immagini arrotondate Immagini avatar Immagini reattive Immagini centrali Miniature Bordo intorno all'immagine Incontrare la squadra Immagine appiccicosa Capovolgi un'immagine Scuoti un'immagine Galleria Portfolio Portafoglio con filtro Zoom immagine Lente d'ingrandimento per immagini Dispositivo di scorrimento per il confronto delle immagini FaviconBottoni
Pulsanti di avviso Bottoni Contorno Bottoni divisi Pulsanti animati Pulsanti in dissolvenza Pulsante sull'immagine Pulsanti dei social media Leggi di più Leggi di meno Caricamento pulsanti Scarica pulsanti Pulsanti pillola Pulsante di notifica Pulsanti icona Pulsanti Avanti/Prec Pulsante Altro in Nav Pulsanti di blocco Pulsanti di testo Bottoni rotondi Pulsante Scorri verso l'altoForme
Modulo di accesso Modulo di iscrizione Modulo di pagamento Modulo di Contatto Modulo di accesso sociale Modulo di registrazione Modulo con icone Notiziario Modulo impilato Modulo reattivo Modulo popup Modulo in linea Cancella campo di immissione Nascondi le frecce numeriche Copia il testo negli appunti Ricerca animata Pulsante Cerca Ricerca a schermo intero Campo di immissione nella barra di navigazione Modulo di accesso in Navbar Casella di controllo/radio personalizzata Selezione personalizzata Interruttore a levetta Seleziona la casella di controllo Rileva blocco maiuscole Pulsante di attivazione su Invio Convalida della password Attiva/disattiva la visibilità della password Modulo a più passaggi Completamento automatico Disattiva il completamento automatico Disattiva il controllo ortografico Pulsante di caricamento file Convalida input vuotaFiltri
Elenco filtri Tabella dei filtri Elementi filtranti Filtro a discesa Ordina elenco Tabella degli incantesimiTabelle
Tavolo a strisce zebrate Tavoli centrali Tavolo a tutta larghezza Tavoli affiancati Tabelle reattive Tavola di comparazioneDi più
Video a schermo intero Scatole modali Elimina modale Sequenza temporale Indicatore di scorrimento Barre di avanzamento Barra delle abilità Cursori di intervallo Suggerimenti Visualizza elemento al passaggio del mouse Popup Collassabile Calendario HTML include Lista di cose da fare Caricatori Stelle Voto dell'utente Effetto di sovrapposizione Chip di contatto Carte Capovolgere la carta Scheda Profilo Scheda Prodotto Avvisi Chiamare Appunti Etichette Cerchi Stile risorse umane Buono Gruppo di elenchi Elenco senza punti elenco Testo reattivo Testo ritagliato Testo luminoso Piè di pagina fisso Elemento appiccicoso Uguale altezza Clearfix Galleggianti reattivi Snack bar Finestra a schermo intero Scorri il disegno Scorrimento fluido Scorrimento Gradiente Bg Intestazione appiccicosa Riduci intestazione su scorrimento Tabella dei prezzi Parallasse Proporzioni Iframe reattivi Attiva/disattiva Mi piace/Non mi piace Attiva/disattiva Nascondi/Mostra Attiva/disattiva la modalità oscura Attiva/disattiva testo Attiva/Disattiva classe Aggiungi classe Rimuovi classe Classe attiva Visualizzazione ad albero Rimuovi proprietà Rilevamento offline Trova l'elemento nascosto Reindirizzare la pagina web Zoom al passaggio del mouse Flip Box Centrare verticalmente Pulsante centrale in DIV Transizione al passaggio del mouse Frecce Forme Link per scaricare Elemento a tutta altezza Finestra del browser Barra di scorrimento personalizzata Nascondi barra di scorrimento Mostra/Forza barra di scorrimento Aspetto dispositivo Confine contentabile Colore segnaposto Colore selezione testo Colore proiettile Linea verticale Divisori Icone animate Conto alla rovescia Macchina da scrivere Prossimamente Pagina Messaggi di chat Finestra di chat popup Schermo diviso Testimonianze Contatore di sezione Presentazione di citazioni Voci di elenco chiudibili Tipici punti di interruzione del dispositivo Elemento HTML trascinabile Query sui media JS Evidenziatore di sintassi Animazioni JS Lunghezza della stringa JS Esponenziazione JS Parametri predefiniti JS Ottieni URL corrente Ottieni la dimensione dello schermo corrente Ottieni elementi IframeSito web
Crea un sito web gratuito Crea un sito web Crea un sito web statico Crea un sito web (W3.CSS) Crea un sito web (BS3) Crea un sito web (BS4) Crea un sito web (BS5) Crea e visualizza un sito web Crea un sito Web con albero di collegamento Crea un portafoglio Crea un curriculum Crea un sito web per ristoranti Crea un sito web aziendale Crea un WebBook Sito web del centro Sezione Contatti Informazioni sulla pagina Grande intestazione Esempio di sito webGriglia
Disposizione a 2 colonne Disposizione a 3 colonne Disposizione a 4 colonne Griglia in espansione Visualizzazione a griglia elenco Layout a colonne miste Carte Colonna Layout a zig zag Layout del blogConvertitori
Converti peso Converti temperatura Converti lunghezza Converti velocitàBlog
Ottieni un lavoro da sviluppatore Diventa uno sviluppatore front-end.Come fare per - Comprimi il pannello laterale
Scopri come creare un menu pieghevole del pannello laterale.
Crea un pannello laterale compresso
Passaggio 1) Aggiungi HTML:
Esempio
<div id="mySidepanel" class="sidepanel">
<a href="#"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<button class="openbtn" onclick="openNav()">☰
Toggle Sidepanel</button>
<h2>Collapsed Sidepanel</h2>
<p>Content...</p>
Passaggio 2) Aggiungi CSS:
Esempio
/* The sidepanel menu */
.sidepanel {
height:
250px; /*
Specify a height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links,
change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.sidepanel .closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style
the button that is used to open the sidepanel */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
Passaggio 3) Aggiungi JavaScript:
Esempio
/* Set the width of the sidebar to 250px
(show it) */
function
openNav() {
document.getElementById("mySidepanel").style.width
= "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
Suggerimento: vai al nostro tutorial CSS Navbar per saperne di più sulle barre di navigazione.