Menù laterale a scomparsa plus, Menù a categorie apribili verticalmente

In questa guida verrà spiegato come installare ed utilizzare il menù laterale a scomparsa plus, ne trovate qui

http://menulateraleplus.skin.forumfree.it/

una installazione dimostrativa, questo menù è un derivato del menù laterale a scomparsa comunemente utilizzato su ForumFree / ForumCommunity / BlogFree reperibile nella documentazione di aiuto

www.forumfree.it/?l=0&wiki=Menù Menù laterale a scomparsa

modificato con l'aggiunta di due funzioni.

La prima funzione aggiuntiva, di semplice utilizzo, permette di inserire, nel menù, dei sottotitoli con la stessa grafica del titolo orizzontale del menù, la seconda, più complessa, consente di realizzare, all'interno del menù, delle categorie, cioè dei sottomenù apribili (e chiudibili) verticalmente semplicemente cliccando su di un apposito link.

Indice della guida

1) Installazione del menù
2) Personalizzare posizionamento e larghezza del menù
3) Personalizzare il titolo orizzontale e il titolo verticale del menù
4) Inserire e personalizzare i links
5) Inserire sottotitoli orizzontali
6) Inserire categorie (sottomenù verticali apribili)
7) Modificare l'aspetto e i colori del menù

Installazione del menù

Passiamo ora ai codici necessari per l'installazione (i codici postati sono quelli presenti nel forum dimostrativo, che potrete sucessivamente modificare a seconda delle vostre esigenze)

In Amministrazione > Codice HTML > Codice HTML che verrà visualizzato in ogni pagina in cima al sito va inserito questo javascript



questo script controlla il caricamento e il funzionamento delle categorie (sotto menù) inserite all'interno del menù laterale a scomparsa, invece in

Amministrazione > Codice HTML > Codice HTML che verrà visualizzato in ogni pagina in fondo al sito, va inserito lo script del menù laterale a scomparsa modificato

Personalizzare posizionamento e larghezza del menù

Installati i codici (a questo scopo è consigliabile utilizzare un forum di prova, in cui completare il menù, prima dell'installazione nel vostro forum), tratteremo della sua personalizzazione, iniziando da quelle già possibili nel menù originale, la prima parte che esamineremo sarà questa


queste righe di codice controllano il posizionamento, il movimento e la larghezza del menù, e non dovrebbero essere modificate, se non è strettamente necessario, le righe che potrebbe esser necessario modificare sono

isStatic=false;, sostituendo al valore false il valore true, in questo modo, isStatic=true;, il menù rimarrà bloccato nella sua posizione, e non scorrerà insieme alla pagina

Yoffset=20;, regola la distanza (in pixel) del bordo superiore del menù dal bordo superiore della finestra del browser, aumentando il valore di Yoffset questa distanza aumenterà e il menù sarà posizionato più in basso, ciò potrebbere rivelarsi necessario con alcuni tipi di skin, per evitare che il menù laterale si sovrapponga alla barra utente, oppure nel caso si sia inserito un logo molto alto, e si voglia evitare la sovrapposizione fra menù e logo

Width=130;, stabilisce la larghezza del menù (espressa in pixel), in alcuni casi potrebbe essere necessario aumentarla

slideSpeed e waitTime riguardano la velocità di spostamento del menù, non è necessario modificarle

Personalizzare il titolo orizzontale e il titolo verticale del menù

Passiamo ora ad esaminare questa parte

con questa funzione si creano i due titoli, orizzontale e verticale, del menù, per personalizzarli basta sostituire il testo preimpostato con quello che si desidera, questo

è il titolo orizzontale, sostituite la parola Menù presente fra i doppi apici ", quest'altro

è il titolo verticale, sostituite la parola Menù laterale presente fra i doppi apici ", dopo ogni lettera va inserito un accapo

in modo che il testo sia visualizzato verticalmente, se il titolo è costituito (come nell'esempio) da più parole, dopo ogni parola inserite due accapi

per inserire uno spazio vuoto che separi le parole

Inserire e personalizzare i links

Passiamo ora ad eseminare le funzioni che ci permettono di costruire il vero e proprio menù, e di inserirvi i nostri links (o altro), la prima che tratteremo (già presente nel codice originale del menù laterale a scomparsa) è questa

questa funzione permette di inserire un normale link di testo, basta sostituire a

il nostro link e a

il testo desiderato, in questo modo il link, una volta cliccato, si aprirà nella stessa finestra (o scheda), cosa particolarmente comoda nel caso si tratti di links interni al nostro forum (o blog), se si desidera che il link si apra in una nuova finestra o scheda, basta aggiungere target=_blank al link (lasciando uno spazio), il risultato sarà questo

questa funzione può essere utilizzata anche per inserire immagini con link

come potete vedere, l'immagine viene inserita utilizzando il normale codice HTML per l'inserimento delle immagini, dato che questo codice viene utilizzato all'interno di un javascript, i doppi apici " devono essere preceduti da un backlash \, in alternativa è anche possibile ometterli

nel caso si desideri che l'apertura del link avvenga in una nuova finestra (o scheda) la modifica da effettuare è quella già vista per il link di testo

è anche possibile utilizzare un addItem per inserire un testo senza link

in questo caso si deve inserire, prima del testo, il tag per chiudere il link, modificato con l'aggiunta di un backslash

questo metodo può essere utilizzato anche per inserire direttamente nel menù codici HTML diversi da un link di testo o da un'immagine con link, posteremo qui un esempio utilizzando un iframe

come potete vedere anche in questo esempio il link è stato chiuso

e i doppi apici presenti nell'iframe vengono preceduti da un backslash (è possibile ometterli, utilizzare i backslash è comunque un metodo più corretto), dato che, al contrario del tag per le immagini utilizzato in uno degli esempi precedenti, l'iframe ha un suo tag di chiusura, anche questo tag va modificato aggiungendo un backslash

Inserire sottotitoli orizzontali

Esamineremo ora le nuove funzioni aggiunte a questa versione del menù, iniziando dalla più semplice, quella che permette di inserire sottotitoli con la stessa grafica del titolo orizzontale del menù

l'unica personalizzazione possibile di addTitle è la sostituzione del testo dimostrativo, Sottotitolo, col testo da voi desiderato

Inserire categorie (sottomenù verticali apribili)

Passiamo ora alla caratteristica più complessa del menù laterale a scomparsa plus, la possibilità di inserirvi le categorie, cioè dei piccoli sotto menù verticali apribili e chiudibili semplicemente cliccando su di un apposito link

Per inserire una categoria nel vostro menù, è necessario utilizzare tre diverse funzioni, la prima crea il link che vi consentirà di aprire o chiudere la categoria e crea anche i tag di apertura della categoria, la seconda vi permette di inserire i vostri links all'interno della categoria, escluso l'ultimo link, che andrà inserito con la terza funzione, con cui verrà inserita anche la chiusura della categoria, si tratta di un vero e proprio procedimento di costruzione, come esempio di costruzione di una categoria, verrà utilizzata la prima categoria del menù demo

come potete vedere, una categoria va aperta (iniziata) utilizzando la funzione openCat

questa funzione andrà a creare il link che vi permetterà di aprire o chiudere la categoria, le parti da personalizzare sono tre, la prima è questa
"Categoria 1"
è il testo del link, sostituitelo col nome che volete dare alla categoria, anche qui, come nella funzione addItem descritta in precedenza, è possibile utilizzare un'immagine al posto del testo, inserendola in questo modo

o in questo

la seconda e la terza parte (identiche) sono costituite da gli ID (identificatori) della categoria, trattandosi della prima categoria viene identificata con cat1

nelle categorie create sucessivamente il cat1 andrà sostituito (in entrambe le parti del codice) con cat2, cat3, cat4, eccetra, a seconda del numero di categorie che vorremo creare ed inserire nel menù (questa identificazione delle categorie è necessaria al funzionamento del javascript che va inserito in Codice HTML che verrà visualizzato in ogni pagina in cima al sito, questo javascript, che sarà anch'esso da modificare a seconda del numero di categorie, ne controlla l'apertura e la chiusura)

Aperte la nostra categoria, passiamo ora ad inserirvi i links, utilizzando la funzione subLink

questa funzione è personalizzabile in modo similare alla funzione addItem descritta precedentemente, al posto di
"Link mlp"
inserite il testo che desiderate, al posto di

inserite il vostro link, anche qui sono possibili le consuete personalizzazioni, cioè si può sostituire il testo con una immagine

o

e fare in modo che il link si apra in una nuova finestra o scheda

aggiungendo l'attributo target=_blank al link

Infine inseriamo l'ultimo link e chiudiamo la categoria utilizzando la funzione endCat

per quanto riguarda l'inserimento del link, e del testo, la funzione endCat è identica a quella subLink descritta poche righe sopra, l'unica differenza è che inserisce (senza necessità di modifica) anche il tag che chiude la categoria

Una volta che avremo creato il nostro menù, inserendovi il numero di categorie desiderato, passeremo a modificare il javascript che avremo inserito in cima al sito, la parte da modificare è questa

ognuna di queste righe di codice
document.getElementById('catX').style.display = "none";
fa riferimento ad una delle categorie del vostro menù (al posto di X va il numero della categoria), nel menù di esempio sono presenti quattro categorie, e nel javascript di esempio sono presenti le 4 righe di codice, se nel vostro menù il numero di categorie è inferiore, vi basterà rimovere le righe non necessarie, qui un esempio della stessa funzione per un menù con due categorie

se, invece, il vostro menù ha più di quattro categorie, o volete aggiungere delle categorie ad un menù già esistente, vi basterà aggiungere le righe corrispondenti, rispettando la numerazione, esempio per otto categorie


Il menù sarà così completo e funzionante, e avrà gli stessi colori della skin del forum ma, esattamente come il menù laterale di base, è possibile modificarne l'aspetto aggiungendo, in Colori e Stili, appositi selettori con le proprietà desiderate

Modificare l'aspetto e i colori del menù

#ssm .mainbg {} /* bordo tra le varie barre */
#ssm .title {} /* titolo orizzontale e sottotitoli */
#ssm .ww {} /* titolo verticale */
#ssm .aa {} /* sfondo dei link e delle categorie che aggiungete */
#ssm .web {} /* colore e dimensione dei link da voi messi */
#ssm .desc {} /* colore e dimensione dei link inseriti nelle categorie */

anche qui, vi sono alcune particolarità, il selettore #ssm .title modifica, oltre al titolo orizzontale, anche eventuali sottotitoli, il selettore #ssm .aa {} modifica sia lo sfondo dei links normali che quello delle categorie (interamente), il selettore #ssm .web {} modifica colore e dimensioni sia dei links normali che di quelli che aprono o chiudono le categorie ed è stato aggiunto il selettore #ssm .desc {}. che svolge la stessa funzione, ma per i links (subLink) inseriti all'interno delle categorie

Per quanto riguarda le proprietà che si possono attribuire ai selettori, potete consultare la Guida alla modifica degli stili di ForumFree