Il sito per imparare gratuitamente a fare pagine Web

JavaScript M1
















M1 - Menù stile gestione risorse.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: G.Troiani
Website: constile.org

Descrizione: Questo script genera un menù dinamico stile gestione risorse di windows. Viene fornito con 2 voci e relative sottovoci di facile configurazione, sulla stessa falsariga di quello che troverete Ť possibile aggiungere nuove voci per meglio adattarlo alle vostre reali esigenze. Lo script è formato da codice Javascript e fa uso di CSS (cascading style sheet) Ť validato anche per un eventuale uso con Doctype XHTML transitional.




Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionandovi sul testo evidenziato adoperate il tasto destro del mouse per l'operazione di copia ed incolla... non rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> e </head>. Questa parte di codice non va alterata per nessun motivo, fatta eccezione per la parte relativa al foglio di style.

seleziona tutto


Passo 2: Adesso si deve inserire la parte di codice html che compone le voci e le sottovoci del menù, la parte sopra infatti ri preoccupa di gestire l'animazione, quindi apertura e chiusura cartelle, questa invece è la parte che dovrete modificare per inserire le vostre descrizioni ed i vostri links.

Selezionare tutto il codice nella finestra sotto, cliccando sulla forbice, quindi posizionatevi sul testo evidenziato e adoperare il tasto destro del mouse per l'operazione di copia ed incolla... trasferitelo poi nella vostra pagina web, in questo caso fra i tags: <body> e </body>

seleziona tutto




Note : Questo sotto l'esempio pratico di come si presenta a video, provate a cliccare sulle voci di lato alle cartellette, per vederlo in funzione.



E' abbastanza ovvio che un menù di questo genere trova la sua giusta collocazione su un sito che faccia uso di frames, per cui tutti i links dovranno aprirsi nel frame principale, dovrete usare l'attributo target ad ogni link, inserendo il nome che voi avrete assegnato al vostro frame principale.

Se volete modificare il font, il colore delle scritte o quello dei links, dovete cambiare la prima parte relativa al foglio di style, dove:

A {text-decoration: none; color: ;}
è relativo ai link, basta cambiare quel numero con un nome valido di un colore o con il relativo codice esadecimale.

A:HOVER{ Color: ; }
è relativo ai links quando il puntatore del mouse viene a trovarcisi sopra, stesse regole descritte sopra per un eventuale cambio di colore.

A:VISITED { text-decoration: none; }
è relativo ai links già cliccati e quindi visionati, stesse regole descritte sopra.

Nel caso in cui vogliate aggiungere nuove voci del mený, si dovranno creare dei nuovi blocchi di codice, e per farlo conviene copiarli sulla falsa riga di quelli già presenti, avendo cura di cambiare il numero di submenu-2 incrementandolo di 1, quindi submenu-3, submenu-4, ecc. ecc.

Lo script è scaricabile anche in formato zip, completo delle due immagini raffiguranti le cartellette: aperta, chiusa ed il triangolino delle sottovoci.        

scarica il mený   preleva il file



Valutazione

Valutazione: 2.51 stelle su 5
N. Voti: (39)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.