Crea una barra laterale animata utilizzando HTML, CSS e JavaScript
Impara a creare una barra laterale personalizzata da zero con una funzione di attivazione/disattivazione utilizzando le tecnologie web.
In questo articolo, ti fornirò una procedura dettagliata per implementare una barra laterale animata per la tua applicazione web. Per impostazione predefinita, la barra laterale è visibile, puoi attivarla o disattivarla utilizzando un pulsante e comprimere o espandere la sezione di visualizzazione destra.
3 passaggi per creare una barra laterale personalizzata
- Aggiungi l'HTML per la barra laterale
- Aggiungi stili CSS per la barra laterale
- Aggiungi JavaScript per espandere o comprimere la barra laterale
Apri il tuo progetto nel tuo editor di testo preferito e aggiungi il seguente frammento di codice bodyall'elemento. Nota che ci sono due blocchi HTML nello snippet di codice seguente. Uno ha un ID chiamato mySidebare l'altro ha un ID chiamato main. Il contenuto della barra laterale risiederà all'interno dell'elemento con l'ID mySidebar. Considerando che, l'elemento con l'ID mainmemorizzerà il contenuto che verrà visualizzato sul lato destro della pagina di visualizzazione.
Passaggio 2: aggiungi stili CSS per la barra laterale
Ora aggiungi un foglio di stile CSS all'applicazione che aggiungerà effetti visivi o animazioni alla barra laterale. Crea un file denominato sidebar.csse inseriscilo in una directory secondo la struttura del tuo progetto e collegalo alla headsezione della tua applicazione.
<link rel="stylesheet" href="sidebar.css">
Passaggio 3: aggiungi JavaScript per espandere o comprimere la barra laterale
Ora aggiungi un file JavaScript all'applicazione che consentirà alla funzione di mostrare o nascondere la barra laterale. Crea un file denominato sidebar.jse inseriscilo in una directory secondo la struttura del tuo progetto e collegalo alla headsezione della tua applicazione.
<script src="sidebar.js"></script>
Risultato
Complimenti! Hai completato l'apprendimento come creare la tua barra laterale pieghevole personalizzata utilizzando le tecnologie web. Vai avanti e crea splendide barre laterali personalizzandole secondo le tue necessità e pubblica gli screenshot nella sezione commenti.
Se ti è piaciuto leggere questo post e lo hai trovato utile per te, allora fai un applauso, condividilo con i tuoi amici e seguimi per ricevere aggiornamenti sui miei prossimi post. Puoi connetterti con me su LinkedIn .
Suggested posts
Ricerca di informazioni sui nomi di dominio
Un estratto da Small, Sharp Software Tools di Brian P. Hogan
Quando fai una richiesta a facebook.com, il tuo computer cerca il nome di dominio per tradurre quel nome di dominio in un indirizzo IP in modo che il tuo computer possa effettuare quella connessione.
Related posts
Raccolta di OSINT per la caccia alle minacce
Ehi, cibernetici! Bentornati alla serie OSINT per la caccia alle minacce. Nel primo articolo, ti ho fornito una panoramica di OSINT e della sua importanza nella caccia alle minacce.
L'arte è sempre apolitica?
Ieri abbiamo chiuso le porte dell'Eurovision Song Contest di quest'anno con un gran finale scintillante e caotico in cui la cantante svedese Loreen ha portato a casa il trofeo, diventando la prima donna a vincere due volte e riportando la corona alla Svezia 50 anni dopo che gli ABBA hanno vinto la competizione con "Waterloo". Hanno continuato a diventare uno dei più grandi artisti nel canone della musica pop.
La persecuzione dei cristiani: il crimine d'odio di cui non parliamo
Dimentica l'islamofobia: i cristiani (e gli ebrei) sono le principali vittime dei crimini di odio religioso.
Qualsiasi mente razionale sa che i circoli politici e mediatici sono dominati dalla sinistra, anche dall'estrema sinistra, uno stato di cose che crea uno squilibrio nel discorso politico. Nel campo della religione, questo squilibrio è chiaramente visibile: giornali e reti di sinistra non si affrettano a difendere la fede cristiana.