-
cardoso.97
.User deleted
Caratteristiche
- Crea un piccolo menù in basso, poco invasivo.
- Non vengono utilizzate immagini per la barra di sfondo
- Design pulito e semplice
- Creazione di un codice personalizzato tramite generatore.
Un'anteprima dello script lo potete trovare qui: http://anteprimescript.gmv.forumfree.it/?f=10278314
Installazione
Il codice può essere generato molto semplicemente dal Generatore apposito. In ogni caso, per chi volesse personalizzarlo manualmente, ecco le istruzioni per l'installazione (questo menu di esempio avrà 1 icona):
In Grafica>Codice HTML>Codice HTML che sarà mostrato in CIMA a tutte le pagine:CODICE<!-- ===================================
// Menu Stile Mac (compatibile con Forumfree)
// Realizzato da _Lati_
// (C) 2012 http://ffmagazine.forumfree.it/
// Versione 1
// =================================== -->
<script type="text/javascript">
if (navigator.appName=="Microsoft Internet Explorer")
{
document.write('<style>#menu_mac {display: none}<\/style>');
}
</script>
<div id="menu_mac">
<div id="mac_bar">
<a href='URL'><img src='URL-IMMAGINE' /></a>
</div>
</div>
La parte da modificare è:CODICE<a href='URL'><img src='URL-IMMAGINE' /></a>
che equivale ad un icona. La modifica è molto semplice, sostituire URL con il collegamento, mentre sostituite URL-IMMAGINE con l'url dell'immagine. Se volete aggiungere nuove icone basterà copiare il codice sopra riportato e ripeterlo quante volte si vuole, in ogni caso si consiglia di non superare le 15 icone.
Infine, mettere in Grafica>Colori e stili in un punto a vostra scelta:CODICE/* Menu Mac */
#menu_mac {position: fixed; bottom: 0; left: 0; width: 100%; margin: auto; z-index: 9}
#menu_mac img {opacity: 0.7; vertical-align: top; position: relative; bottom: 30px; padding: 3px; width: 40px; height: 40px; margin-bottom: 10px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear}
#menu_mac img:hover {opacity: 1; width: 50px; height: 50px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear}
#mac_bar {position: relative; background: #AAA; padding: 3px; border: 2px solid #777; border-radius: 10px 10px 0 0; height: 20px; width: NUMEROpx; margin: auto}
Qui bisognerà fare qualche calcolo, dovrete sostituire NUMERO con questa operazione:
50 x Numero Icone + 10
Un esempio, nel caso ho 5 icone dovrò fare questa operazione: 50x5+10
Questo per dare una dimensione fissa al menu, ogni icona avrà uno spazio di 50px e 10px aggiuntivi per evitare errori nell'animazione al passaggio.
Script "Menu Stile Mac" realizzato da _Lati_ per Forumfree Magazine
Rilasciato sotto Licenza Creative Commons 3.0
.
Menù stile mac |
