Pubblicato il 03/03/11 - aggiornato il  | 11 commenti :

Drop Down Menù a più livelli per Blogger.

Come installare un menù a due livelli del tipo popup su Blogger su uno script di Dynamic Drive.
Continuo la rassegna di menù che riescono a funzionare anche con i nuovi template del Designer Modelli. Quello che vado a presentare è stato chiamato dall'autore "Flex Level Drop Down Menu" e ha una struttura multilivello che si apre sotto forma di popup al passaggio del mouse.

Date un'occhiata alla
Demo del Drop Down Menù per Blogger -
Vediamo come procedere all'installazione. Si va su Design > Modifica HTML e si cerca la riga </head>. Dopo aver salvato il modello, si incolla subito sopra il codice seguente

<!--Flexleveldropdown Menu Inizio-->
<link href='  ....   /flexdropdown.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='  .... /flexdropdown.js' type='text/javascript'>
/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<!--Flexleveldropdown Menù Fine - www.ideepercomputeredinternet.com-->

Dove al posto degli URL evidenziati di rosso si inseriscono quelli ottenuti da DropBox dopo aver caricato i due file che possono essere scaricati da Google Drive. Oltre ai due file ci sono anche due immagini delle frecce di navigazione, arrow.gif e left.gif che vanno caricate su Picasa e il cui URL va sostituito nel codice del file javascript. Si Salva il modello. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla un codice simile a questo
I collegamenti e le voci possono essere personalizzate a piacere. Per creare delle voci secondarie si inserisce un elenco, per esempio questo

<ul>                 <li><a href="#">Sub Item 5.2.1a</a></li>
                <li><a href="#">Sub Item 5.2.2a</a></li>
                <li><a href="#">Sub Item 5.2.3a</a></li>
                <li><a href="#">Sub Item 5.2.4a</a></li>
                </ul>

tra i tag </a> e </li> della voce del livello superiore. Per maggiore chiarezza ho evidenziato di colori di diversi questi tre elementi. I simboli di cancelletto possono essere lasciati o sostituiti con un URL di collegamento. Il tag target="_blank" serve per aprire la pagina in un'altra scheda del browser. Dopo aver salvato l'elemento pagina, si posiziona con il mouse in una sidebar.
La particolarità di questo menù è che volendo si può far aprire il popup del menù anche in un collegamento della pagina con questa sintassi

<a href="URL COLLEGAMENTO" data-flexmenu="flexmenu1">ANCHOR TEXT</a>

flex level drop down menu demo interno post
Se si apre il file flexdropdown.js con Notepad++ possono essere effettuate le seguenti personalizzazioni più importanti:

animspeed: 200, //velocità animazione (in millisecondi)
showhidedelay: [150, 150], //intervallo prima della comparsa o scomparsa del menù (in millisecondi)

Con le modifiche al file CSS flexdropdown.css si possono variare parecchi parametri come i caratteri, i colori del testo e dello sfondo, i bordi e le dimensioni in pixel. Si può anche variare l'aspetto del menù contestuale inserendo dei parametri nel link

data-dir: Si inserisce "h" per vedere il menù in senso orizzontale il valore di default è "v"
data-offsets: si inseriscono due numeri [x,y] per specificare le coordinate di inizio del popup

Esempio di un collegamento potrebbe essere

<a href="http://www.ideepercomputeredinternet.com/" data-flexmenu="flexmenu1" data-offsets="[0,3]" >Idee per computer ed Internet</a>

come mostrato nel post di esempio. E' molto simile al Popup Menù presentato qualche settimana fa.
Fonte | Dynamic Drive -


11 commenti :

  1. lo voglio uguale ma orizzontale :( xché quello che ho messo io non si apre bene con chrome :(

    RispondiElimina
  2. @Dea
    Ecco che ti riconosco! C'è sempre una cosa che non va bene :)

    RispondiElimina
  3. Caro Ernesto, hai segnalato vari menù uno meglio dell'altro. A me piace quello che hai inserito nel tuo blog. Ho provato a metterlo nel mio ma non mi apre il soffietto verticale. Ci sono incompatibilità con il modello. Grazie per i vari articoli molto utili!!!!

    RispondiElimina
  4. Scusa Ernesto era una domanda. Ci sono incompatibilità (che tu sappia) tra il modello blogger che utilizzo e il menù che usi tu?

    RispondiElimina
  5. @Stefano
    Questo menù si riesce a installarlo solo nei vecchi modelli e non in tutti. Spesso le voci secondarie si aprono distanti da quelle principali. La ragione mi è ignota. Per conoscere se un template è compatibile l'unica è provare a installarlo.

    RispondiElimina
  6. dovevo chiamarmi Dea pestifera ^_^ anche a me piace il tuo... ma ne ho trovato un altro dove si apre mettendo il mouse su un'immagine... mi piace ^_^

    RispondiElimina
  7. Ciao ho aggiunto questo utile menù al mio blog "in costruzione" ( a destra nella sidebar ) ma quando ci passo il mouse sopra la tendina si apre ma compare una macchia nera... come potrei risolvere?????

    Blog: http://fermiincostruzione.blogspot.it/

    RispondiElimina
    Risposte
    1. @#
      Vedo che hai anche un altro menù. Non è che si può abbondare, forse ci sono delle incompatibilità
      P.S. Questo menù non l'ho visto nella pagina che mi hai indicato

      Elimina
  8. Saluti messer Ernesto,
    Il menestrello passava da codeste parti alla ricerca di un drop down per il loco suo, giacché su internet l'è bolgia infernale e codesto l'è sempre stato porto sicuro ove trovar consiglio...
    Lo link ove trovar css e js non v'è più, vossignoria sarebbe 'sì gentile da fornire allo sciagurato menestrello novo link ove trovar cotanto di files?
    Il menestrello vostro ringrazia!

    Felicitazioni

    RispondiElimina
    Risposte
    1. Avevo caricato i file su SugarSync che prima era gratuito e che ora è diventato a pagamento e quindi ha cancellato il mio account. Puoi scaricare i file dalla pagina di DynamicDrive
      http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm
      Devi cliccare con il destro del mouse sui link per poi scegliere Salva destinazione con nome. Devi anche scaricare l'immagine della freccia per poi caricarla su Picasa e sostituire l'URL a arrow.gif nel file mi sembra CSS ( o forse è l'altro...)

      Elimina
    2. Il menestrello ringrazia vossignoria per cotanto aiuto, esso andrà immediatamente a implementare menu su ambiente di test!
      Vossignoria lo troverà sicuramente implementato nelli dì venturi allo menestrellico loco e se vorrà passare, lo menestrello allieterà vossignoria con storie sue :)

      Saluti

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy