Creare menù a tendina per il nostro blog (parte 2)

Continuiamo con l'argomento dell'articolo precedente. Mi sono accorto che l'eccessivo numero di immagini rallenta troppo il blog, quindi nei prossimi articoli cercherò di diminuirle, sperando che questo non renda gli articoli meno facili da capire.

Dunque, abbiamo installato il programma e creato il nostro primo menù partendo da un template tra quelli forniti, nel mio caso specifico l'Orange. Adesso dobbiamo personalizzarlo. Purtroppo se aggiungiamo elementi, dovremo reimpostare tutti gli aspetti di ogni singolo elemento, sia il colore dello sfondo che quello del testo: una grave pecca del programma, ma d'altronde per quello che ci è costato (niente) non possiamo storcere troppo il naso. In questo caso il nostro migliore amico si rivelerà il buon vecchio copia/incolla.

 

Personalizziamo il menù

Carichiamo il progetto appena creato nello scorso articolo . Per prima cosa, selezioniamo l'elemento Download sotto Products -> Sothink DHTML Menu 3.0, e facciamo Copy (come si vede nell'immagine sotto): così facendo terremo in memoria un elemento di base con tutte le caratteristiche del template scelto.

Clicchiamo su <<Top-level Menu>> e scegliamo Paste (cioè incolla): l'elemento che abbiamo copiato prima viene aggiunto al menù, sotto tutti gli altri, e senza "nodi figli" (cioè senza che contenga altri sotto-elementi).

    

A questo punto selezioniamo uno alla volta i tre "nodi padre" (cioè con sotto-elementi) prima e clicchiamo sulla X in rosso per cancellarli:

 

per restare solo con l'elemento Download che abbiamo incollato all'inizio. Selezionando l'elemento, a destra appariranno le sue proprietà. Quelle che più ci interessano sono Text, che contiene il testo visualizzato in quell'elemento del menù, e Link to, che indica l'indirizzo da aprire al click su quella voce del menù:

Cambiamo le due informazioni come preferiamo: ad esempio come Text possiamo mettere "Home", e il suo indirizzo potrebbe essere http://creareblog.blogspot.com (un link a caso). Dopo averlo fatto, torniamo su <<Top-level menù>> e facciamo di nuovo Paste dal menù che spunta cliccando col tasto destro del mouse: verrà aggiunto un nuovo elemento uguale a quello copiato all'inizio dell'articolo. Questa volta, di questo elemento cambieremo solo il Text, mettendoci per esempio "Preferiti":

E ora la magia: clicchiamo col tasto destro su Preferiti e facciamo di nuovo Paste. Il nostro elemento originale verrà incollato come "figlio" di Preferiti:

Ecco perchè non ho inserito nessun link nell'elemento Preferiti: non mi interessa che cliccando lì succeda qualcosa, mi interessa solo che contenga dei figli. Nella finestra Preview vedremo in tempo reale cosa stiamo creando:

Quindi per riassumere: per aggiungere degli elementi al livello principale del menù, bisogna incollare l'elemento copiato in <<Top-level Menu>>, mentre per aggiungere dei sottolivelli dobbiamo incollare sul nodo che vogliamo come padre. Continuando così, potrete aggiungere tutti i livelli che volete, ricordandovi di personalizzare il Link to solo per l'ultimo nodo di quel livello (come nell'esempio sopra per Preferiti).

In questo articolo mi sto concentrando sui concetti di base, comunque il programma offre altri tanti modi per personalizzare le voci del menù, basta guardare gli altri pannelli a destra:

Ricordatevi che le modifiche grafiche che fate avranno effetto solo sul nodo selezionato e non su tutto il menù. Se volete cambiare qualcosa, ad esempio il colore di sfondo, dovrete farlo per tutte le voci del menù.

Nel prossimo articolo vedremo come pubblicare il menù e come inserirlo nel nostro blog. Al solito, per qualsiasi domanda, lasciatemi pure un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!