Pubblicato il 07/02/10 - aggiornato il  | 7 commenti :

List-O-Matic è un servizio online per creare menù personalizzati.

List-O-Matic è veramente l'ideale per tutti coloro che vogliono creare un menù originale per il proprio blog e non masticano molto codice HTML e Javascript. E' il sito stesso che crea il codice, quello che l'utente deve fare è inserire

  1. Il nome delle voci principali
  2. Il nome delle voci di secondo livello
  3. I link delle rispettive pagine
  4. Scegliere lo stile del menù

Ma andiamo con ordine e osservate il seguente screenshot

 

list-O-Matic-1

In Link Text si digita l'anchor text della voce del menù mentre in AddressURL si inserisce il suo indirizzo. Se si desidera che una voce del menù abbia dei sottomenù si mette il segno di spunta e si inseriscono i dati relativi al nome e all'URL. Per aggiungere una voce principale si clicca invece sul link "Add topo level navigation item".

Non ci sono limiti per numero di voci di primo livello ne per quelle di secondo livello. Quando abbiamo inserito tutte le voci che ci servono possiamo cliccare su "Preview the markup" per vederne l'anteprima e successivamente andare su "I'm done. Show me the styles".

Si può quindi selezionare se crearlo verticale, da inserire in una sidebar, o orizzontale da mettere sotto l'header. Ci sono tre opzioni di colore e forma a disposizione

stile-menù

Infine si clicca su "Show me the markup". Verranno generati due blocchi di codice. Quello CSS e quello HTML, andranno copiati entrambi e salvati in un file di testo

menù-stile-2

Per inserire questo menù nel modello dobbiamo andare in Layout >Modifica HTML e cercare la riga

]]></b:skin>

Immediatamente sopra va incollato il codice CSS copiato da List-O-Matic. Per riconoscerlo si può mettere in mezzo a due commenti come, per esempio <!--INIZIO CODICE MENU--> e <!--FINE CODICE MENU-->, come mostrato nello screenshot

codice-menù-4

Si salva il modello e si va su Layout > Elementi pagina > Aggiungi un gadget HML/Javascript, dove si incolla, in Sezioni del sito il codice HTML appena copiato. Si clicca su Salva e con il drag & drop si posiziona l'elemento nella posizione desiderata. Per vedere una demo andate nel blog Pagine di Navigazione.

Altri menù presentati in questo blog sono stati

  1. Menù orizzontale -
  2. Menù a soffietto -
  3. Menù laterale scorrevole -
  4. Tre menù scorrevoli -




7 commenti :

  1. Allora finalmente ho risolto! Con questo tuo articolo e quindi in questo modo sono riuscita a mettere il menu orizzontale a tendina... e l'ho anche personalizzato nei colori modificando il codice css caricato nell'html del blog... solo volevo chiederti x mettere le scritte in grassetto dove devo modificare e cosa devo scrivere?
    Grazie, come sempre

    RispondiElimina
  2. Per le scritte in grassetto prova a inserirle tra i tag (b) e (/b) dove al posto delle parentesi devi mettere il segno di minore e maggiore.
    Non so se funzionerà ma puoi provare.
    Ciao

    RispondiElimina
  3. ok Capo agli ordini! :D grazie :) kiss

    RispondiElimina
  4. Salve, come si elimina il fatto che quando passo sopra il menu il contenuto del blog si sposta più in giù e il menù non si sovrappone al contenuto? Spero che mi sono spiegato! Quale riga del CSS va cambiata?

    RispondiElimina
  5. @Antichitesori2010
    Prova a aggiungere nel CSS la proprietà z-index. Segui questo post
    http://www.ideepercomputeredinternet.com/2011/06/come-posizionare-e-stabilire-l-di.html
    prova a mettere
    z-index:100;
    dove c'è la pseudo classe hover che determina il comportamento al passaggio del mouse.
    Mentre per lo spostamento del contenuto non saprei dirti.

    RispondiElimina
  6. Scusami, ma gli URL relativi alle voci di secondo livello dove li prendo? P.S. sono un po' incapace lo so :)

    RispondiElimina
    Risposte
    1. Gli URL sono gli indirizzi dei post o delle pagine che vuoi mettere nel menù. Basta copiarli nella barra del browser. Per eampio questo post ha l'URL seguente
      http://www.ideepercomputeredinternet.com/2010/02/list-o-matic-e-un-servizio-online-per.html
      @#

      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