Inserire una barra-menu in fondo alla pagina

Da **Niko** Ven 29 Gen 2021 - 14:08

Inserire una barra-menu in fondo alla pagina

Dimostrazione

Il tutorial permette di inserire una barra fissa in fondo allo schermo nel quale possiamo inserire icone e link come preferiamo, una sorta di bottom-bar come è presente nei computer Apple.

Inserire una barra-menu in fondo alla pagina Reklam10

Installazione

Non dobbiamo fare altro che inserire il seguente codice dove preferiamo, può essere:

In un widget
Nel messaggio sull'indice
Nei templates in overall_footer prima del tag conclusivo </body>

Codice:: <div id="myfooter" style="height: 40px; position: fixed; width: 800px; top: auto; right: 0;margin: 0 auto; bottom: 0; left: 0;" > <p align="center"> <a href="LINK1"><img src="URL_ICONA" alt="TITOLO1" border="0"></a> <a href="LINK2"><img src="URL_ICONA2" alt="TITOLO2" border="0"></a> </p></form></div></p></div>

Personalizzazione di stile

Poi andiamo verso Pannello di amministrazione ► Visualizzazione ► CSS & Immagini ► Foglio di stile CSS e aggiungiamo questo codice CSS:

Codice:: #myfooter{ background-image: url('URL_BARRA'); background-repeat: no-repeat; } #myfooter img{ border: 0px; margin-top: -12px; padding-right: 20px; }

Possibili modifiche

Codice HTML

Nel primo codice, dovremo modificare il nostro codice a seconda di cosa vogliamo mostrare; abbiamo già inserito due icone, e quindi la parte personalizzabile è la seguente: <a href="LINK1"><img src="URL_ICONA" alt="TITOLO1" border="0"></a> dove:

LINK1 è il link della pagina che si aprirà se ci clicchiamo
URL_ICONA è l'URL dell'immagine che verrà visualizzata e che sarà cliccabile
TITOLO1 è il titolo che comparirà se ci passiamo sopra con il mouse

Al momento sono presenti solo due icone cliccabili, ma potete aggiungerne altre copiando e incollando la riga:

Codice:: <a href="LINK1"><img src="URL_ICONA" alt="TITOLO1" border="0"></a>

Codice CSS

All'interno del codice CSS possiamo modificare l'immagine di sfondo della barra, andando a cambiare URL_BARRA all'interno della riga background-image: url('URL_BARRA');

Alcune immagini per le barre proposte

Inserire una barra-menu in fondo alla pagina Mac_ba10

Codice:: https://i.servimg.com/u/f81/11/91/65/81/mac_ba10.png

Inserire una barra-menu in fondo alla pagina Mac_ba11

Codice:: https://i.servimg.com/u/f81/11/91/65/81/mac_ba11.png

Inserire una barra-menu in fondo alla pagina Mavdar10

Codice:: https://i.servimg.com/u/f81/11/91/65/81/mavdar10.png

Inserire una barra-menu in fondo alla pagina Simple10

Codice:: https://i.servimg.com/u/f81/11/91/65/81/simple10.png

Inserire una barra-menu in fondo alla pagina Macdar10

Codice:: https://i.servimg.com/u/f81/11/91/65/81/macdar10.png

 Ovviamente potete creare la vostra barra personale con il vostro programma di grafica preferito, oppure chiedendo nella sezione Richieste grafiche del nostro forum dei forum