Per prima cosa date uno sguardo al blog di prova che ho creato per testare questa funzionalità
E’ indubbiamente una cosa di grande effetto e che massimizza lo spazio a disposizione dando la possibilità di inserire in Homepage un sacco di collegamenti con pagine del nostro blog o anche con pagine esterne.

Per prima cosa bisogna personalizzare il file menuItems che riporto di seguito
/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Localized in Italian by Parsifal32 - www.ideepercomputeredinternet.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
* as first mentioned in http://www.dynamicdrive.com/forums
* username:jscheuer1
***********************************************/
//One global variable to set, use true if you want the menus to reinit when the user changes text size (recommended):
resizereinit=true;
menu[1] = {
id:'menu1', //use unique quoted id (quoted) REQUIRED!!
fontsize:'100%', // express as percentage with the % sign
linkheight:22 , // linked horizontal cells height
hdingwidth:210 , // heading - non linked horizontal cells width
// Finished configuration. Use default values for all other settings for this particular menu (menu[1]) ///
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["MENU"], //create header
["HOME", "http://www.ideepercomputeredinternet.com/", ""],
["Crea blog", "http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html","_new"],
["Il primo mese del blog", "http://www.ideepercomputeredinternet.com/2008/12/come-iniziare-un-blog-e-cosa-fare-nel.html", ""],
["100 risorse per Blogger", "http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html", "_new"],
["Modelli Blogger", "http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html", "_new"],
["Guadagnare con un blog", "http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html", "_new"],
["EMAIL", "http://www.ideepercomputeredinternet.com/2008/01/messaggi-dei-lettori.html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Privacy", "http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html", "",1],
["LINK ESTERNI", "", ""], //create header
["Videochat", "http://videoblog32.blogspot.com/", "_new"],
["Incontri & Eros", "http://www.ideepercomputeredinternet.com/2008/01/ecco-dove-puoi-trovare-amicizia-amore-e.html", "_new"],
["FRIV -GIOCHI", "http://www.ideepercomputeredinternet.com/2009/04/friv-per-giocare-gratis-online-piu-di.html", "_new"] //no comma after last entry
]}; // REQUIRED!! do not edit or remove
menu[2] = { // REQUIRED!! This menu explicitly declares all available options even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////
user_defined_stylesheet:false, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:false, //if true, prevents script from generating markup for this menu
design_mode:false, //if true, generates a report of the script generated/intended styles and markup (as a design aid)
menutop:160, // initial top offset - except for top menu, where it is meaningless
menuleft:'45%', // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
keepinview:80, // Use false (for not static) - OR - true or numeric top offset when page scrolls
menuspeed:20, // Speed of menu sliding smaller is faster (interval of milliseconds)
menupause:500, // How long menu stays out when mouse leaves it (in milliseconds)
d_colspan:3, // Available columns in menu body as integer
allowtransparent:false, // true to allow page to show through menu if other bg's are transparent or border has gaps
barwidth:20, // bar (the vertical cell) width
wrapbar:true, // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
hdingwidth:210, // heading - non linked horizontal cells width
hdingheight:25, // heading - non linked horizontal cells height
hdingindent:1, // heading - non linked horizontal cells text-indent represents ex units (@8 pixels decimals allowed)
linkheight:20, // linked horizontal cells height
linktopad:3, // linked horizontal cells top padding
borderwidth:2, // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
bordercolor:'#000080', // inner border color
borderstyle:'solid', // inner border style (solid, dashed, inset, etc.)
outbrdwidth:'0ex 0ex 0ex 0ex', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'lightblue', // outer border color
outbrdstyle:'solid', // outer border style (solid, dashed, inset, etc.)
barcolor:'white', // bar (the vertical cell) text color
barbgcolor:'#4d6814', // bar (the vertical cell) background color
barfontweight:'bold', // bar (the vertical cell) font weight
baralign:'center', // bar (the vertical cell) right left or center text alignment
menufont:'verdana', // menu font
fontsize:'90%', // express as percentage with the % sign
hdingcolor:'white', // heading - non linked horizontal cells text color
hdingbgcolor:'#4d6814', // heading - non linked horizontal cells background color
hdingfontweight:'bold', // heading - non linked horizontal cells font weight
hdingvalign:'middle', // heading - non linked horizontal cells vertical align (top, middle or center)
hdingtxtalign:'left', // heading - non linked horizontal cells right left or center text alignment
linktxtalign:'left', // linked horizontal cells right left or center text alignment
linktarget:'', // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
kviewtype:'fixed', // Type of keepinview - 'fixed' utilizes fixed positioning where available, 'absolute' fluidly follows page scroll
menupos:'top', // set side that menu slides in from (right or left or top)
bartext:'MENU CENTRALE', // bar text (the vertical cell) use text or img tag
///////////////////////////
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["SITI SPECIALI"], //create header
["GIOCHI GRATIS", "http://www.ideepercomputeredinternet.com/2008/01/gioca-gratis-piu-di-dodicimila-giochi.html", "_new"],
["TUTTO SUI GIOCHI", "http://www.ideepercomputeredinternet.com/search/label/giochi","_new"],
["MOTORE FILM", "http://film-streaming-italiano.blogspot.com/", "_new"],
["TELEVISIONI", "http://live-streamingtv.blogspot.com/", "_new"],
["MOTORI", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
["RICERCA", "", "", 1],
["GOOGLE", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
["YAHOO", "http://www.yahoo.com/", "_new", 1, "no"],
["BING", "http://www.bing.com/", "_new", 1],
["ABOUT ME", "", ""], //create header
["PROFILO", "http://www.blogger.com/profile/03393759575661143644", "_new"],
["TWITTER", "http://twitter.com/parsifal32", "_new"] //no comma after last entry
]}; // REQUIRED!! do not edit or remove
menu[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
bartext:'MENU DESTRO',
menupos:'right',
kviewtype:'fixed',
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["MENU"], //create header
["CALCIO", "http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html", "_new"],
["WorldLive TV", "http://www.ideepercomputeredinternet.com/2009/03/worldlive-tv-per-vedere-gratis-partite.html",""],
["Calcio", "http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html", "_new"],
["Televisioni", "http://www.ideepercomputeredinternet.com/search/label/televisione", ""],
["Firefox add-on", "http://www.ideepercomputeredinternet.com/2009/03/le-migliori-estensioni-add-on-per.html", "_new"],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],
["Privacy", "http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html", "_new", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Email", "http://www.ideepercomputeredinternet.com/2008/01/messaggi-dei-lettori.html", "",1],
["LINK ESTERNI", "", ""], //create header
["Friendfeed", "http://friendfeed.com/parsifal32", "_new"],
["Stumbleupon", "http://parsifal32.stumbleupon.com/", "_new"],
["Sprintrade", "http://www.ideepercomputeredinternet.com/2009/05/sprintrade-per-guadagnare-di-piu-con-il.html", "_new"] //no comma after last entry
]}; // REQUIRED!! do not edit or remove
////////////////////Stop Editing/////////////////
make_menus();
Le personalizzazioni più importanti riguardano ovviamente i nomi e gli URL dei link che vogliamo inserire nei nostri menù. Altre personalizzazioni essenziali concernono i colori, la posizione e la dimensione dei tre menù. Per avere una panoramica di tutti i parametri che possono essere variati visitate la pagina delle personalizzazioni di Dynamic Drive (in inglese). Non appena avete creato il file potete procedere caricandolo nel web e qui ci sono due possibilità come forse saprete.
Adesso potete intervenire sul modello e andate su Layout > Modifica HTML, salvate il modello completo e espandete i modelli widget. Cercate la riga di codice che indica la fine della testa della pagina cioè il tag </head>. Immediatamente sopra incollate il seguente nuovo codice, come mostrato in questo screenshot

In questo codice dovete mettere al posto di URL_menuItems, l’indirizzo del file che avete caricato, come fatto in questo file effettivamente usato nel blog di prova.
Anche in questo caso si possono fare delle personalizzazioni che riguardano soprattutto i colori e possono essere fatte separatamente per ciascun menù. Non mi addentro troppo nelle spiegazioni e ricordo solo che
- a:active indica il colore di un link attivo del menu
- a:visited indica il colore di un link già visitato
- a:hover indica il colore del link quando è puntato con il mouse
Aggiornamento: Dopo che avete personalizzato il file menuItems vi conviene caricarlo su Google Sites mediante Schedario; è anche possibile inserirlo su Altervista.
Grazie ancora per i tuoi post PARSIFAL32 !!
RispondiEliminaMetti subito un bottone di Paypal nel tuo
Blog che adesso molti ti invieranno una donazione per ringraziarti del tuo enorme lavoro!
Io per primo.
Ciao
Francesco
@Striscianotizia
RispondiEliminaIn questo blog non mi sembra il caso di mettere un bottone per Paypal, cmq volendo ce l'ho nella videochat gratis.
Comunque non ti sentire in debito. Era una cosa interessante che penso possa essere utile anche ad altri. Ciao
Buongiorno... domanda... non si possono creare delle sotto-voci nel menu a scomparsa?
RispondiEliminama dopo che ho messo il codice html... che devo scrivere come widget?
RispondiEliminaQuanto sono scocciante stamatina eh? ^_^
@Soffio di Dea
RispondiEliminaQuesto script non si inserisce attraverso un widget ma si mette solo nel modello. I menù si vedranno automaticamente.
Purtroppo non è possibile inserire delle voci secondarie in quanto come vedrai anche dalla pagina demo, si basa su un altro concetto rispetto al multilivello.
Il problema di IE è noto. Con quel browser non funziona quasi mai nulla :-((
Ciao Ernesto! Volevo chiederti 2 cose:
RispondiElimina- la prima è se ha scritto un post per fare un menù scorrevole simile a quello in questo sito: http://www.padovacalcio.it
- la seconda è se sei a conoscenza di un metodo per far aggiornare il risultato di una partita in tempo reale sul mio sito
Grazie mille e complimenti per questo tuo bellissimo blog!
@AmmPadova
EliminaTi riferisci al menù flottante presente in alto a sinistra? Non mi ricordo di aver postato nulla di simile ma puoi trovare diversi menù qui
http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
e qui
http://www.ideepercomputeredinternet.com/search/label/menu
per il widget che si aggiorna con i risultati del calcio dovrei fare delle ricerche. Se trovo qualcosa di interessante ci faccio un post, se non leggi nulla in merito vuol dire che non ho trovato nulla.
Ok, grazie!
EliminaUn altra cosa... hai scritto un articolo su come inserire una barra fissa sul proprio sito in stile facebook? Grazie mille!
Elimina@AmmPadova
EliminaHo scritto quasi 4000 articoli e francamente non me ne ricordo :)