Creazione di una barra mobile è un metodo di mantenere contenuto in una posizione fissa sulla tua pagina Web. È possibile utilizzare una barra mobile per tenere portata di mano un menu di navigazione per i vostri ospiti o, si può infastidire con un annuncio che rimane sul proprio schermo non importa dove essi scorrere su una lunga pagina. Indipendentemente dalla vostra motivazione, il codice CSS per creare una barra mobile è semplice e può essere aggiunto al tuo sito in pochi minuti.

Istruzioni

1

Definire la barra mobile CSS nella sezione < head > del tuo codice HTML. Iniziare con un tag < style > e definire un < div > per tenere il bar galleggiante:

< style >
div.floating-bar
{
Posizione: fisso; background: #808080; border: 1px solid #000000; larghezza 100%; z-indice: 100;
}

2

Assegnare i membri all'elemento < div > e posizionare la barra sullo schermo con il codice:

div.Floating-barra h3
{
display: block; margin: 0 0,5 em;
}
< / stile >

3

Inserire la barra mobile nella sezione < body > di codice e inserire del testo nella barra:

< div class = "galleggiante-bar" >
< h3 > Floating Bar < / h3 >
< / div >

Consigli & Avvertenze

• Questo codice crea una barra mobile con il testo "Floating Bar." Creare un menu inserendo il tag di ancoraggio appropriato. È anche possibile utilizzare la barra per visualizzare immagini, testo o un mix di tutti e tre.
• L'impostazione "z-index" a 100 mantiene la barra visualizzata in cima a qualsiasi altra pagina, come un utente scorre la pagina verso il basso.
• L'impostazione "Posizione: fisso" mantiene la barra in posizione rispetto allo schermo dell'utente per creare un effetto fluttuante.