Inserire una barra-menu in fondo alla pagina


Tutorial Inserire una barra-menu in fondo alla pagina

Messaggio 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


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 24
Messaggi : 8233
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one

A pedxz piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.