Un menù stile gestione risorse, lo stesso che ho io.
Crediti:
Name:
Website:
Descrizione: Questo script genera un menù dinamico stile gestione risorse di windows. Viene fornito con 5 voci e relative sottovoci di facile configurazione, un po' meno facile ma fattibile, aggiungerne di nuove per meglio adattarlo alle vostre reali esigenze. Lo script è formato da codice Javascript e fa uso di CSS (cascading style sheet).
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.
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 preoccupava di gestire l'animazione, quindi apertura e chiusura cartelle,
questa invece è la parte che dovrete modificare per inserire le vostre descrizioni e 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>
Note : Questo sotto l'esempio pratico di come si presenta a video, provate a cliccare sulle voci o sulle cartellette, per vederlo in funzione.
apri menu
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, e per evitare di dover riportare ad ogni link l'attributo target, è possibile inserirlo una sola volta facendo uso del comando <base target="principale"> che trovate immediatamente prima dell'inizio di <body>. Dovrete sostituire a "principale" il nome che voi avrete assegnato al vostro frame principale.
Se poi 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 : Black;}
è relativo ai link, basta cambiare quel black con un nome valido di un colore o con il relativo codice esadecimale.
A:HOVER{ Color : red; }
è 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.
H3 {font-family: Verdana,Arial,Helvetica;font-size:9pt;font-weight:bold;}
Questo invece è il font le sue dimensioni e i suoi attributi, come potete notare viene caricato il font Verdana, nel caso in cui questo non fosse presente nel PC del vostro visitatore si cercherebbe il font Arial e poi quello Helvetica. Il font avrà dimensione di 9 punti ed è in grassetto (bold).
Nel caso poi, in cui le voci del menu non siano sufficienti e vogliate aggiungerne di nuove, si dovranno creare dei nuovi blocchi di codice, e per farlo conviene copiare gli stessi sulla falsa riga di quelli già presenti, avendo cura di nominarli in modo diverso; il nome lo scegliete voi, quello che preferite, tanto non ha alcuna importanza serve solo per lo script in modo che faccia le dovute distinzioni. Questo nome andrà sostituito nei tre punti delle righe di codice che compongono il nuovo blocco, e più precisamente:
<div ID="XXXParent" CLASS=parent>
<a href="#" onClick="expandIt('XXX'); return false">
<div ID="XXXChild" CLASS="child">
Dove il nome da voi scelto deve essere sostituito alle XXX lasciando inalterati Parente e Child.
Lo script è scaricabile anche in formato zip, completo delle due immagini raffiguranti le cartellette: aperta e chiusa 
Elenco completo degli script.
Puoi lasciarmi un msg, un suggerimento, una critica, un link.
