Pagina aggiornata... Domenica, 07 gennaio 2024 * Tempo di caricamento 0.07 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Menu laterale a scomparsa

..:: Menu a discesa o tendina ::..

Un menu comodo ed elegante ma un po' antipatico da personalizzare,
più che altro perché occorre inserire gli stessi parametri in due blocchi e sono parecchi,
che lo rendono si, molto versatile ma anche a rischio esaurimento



Un esempio pratico lo vedete qui, si può impostare che scrolla con la pagina o statico,
il codice è lunghissimo, contiene anche i parametri per i link delle pagine, nel blocco finale ben
visibile fortunatamente, va inserito tutto tra i tag <head> e </head> e in questo caso vi consiglio
assolutamente un file esterno da richiamare, per ovvi motivi l'ho postato completo
in un'altra pagina Codice menu laterale a scomparsa

N.B.: Il menu non funziona se nella pagina è presente il tag per il doctype

Come procedere...

Il codice dello script è composto da quattro blocchi, due principali in cui fare le personalizzazioni
dell'aspetto del menu, un parametro lo troviamo anche nel "motore" (terzo blocco) dello script e riguarda
il contenitore/table del menu ed infine l'ultimo blocco in cui si inseriscono i link delle pagine.
Ho tradotto tutti i commenti che l'autore ha gentilmente inserito, così da rendere più facile il lavoro.

* Il primo blocco lo troviamo all'inizio del codice, il secondo alla fine, a prima vista può sembrare che
contengano gli stessi parametri, invece ognuno di loro ha una funzione specifica, leggete le indicazioni,
fate attenzione a non cancellare simboli essenziali e apportate le varie personalizzazioni

Questo è il primo blocco da personalizzare


YOffset=20; // senza virgolette!! Posizione del menu rispetto al top della pagina
staticYOffset=20; // senza virgolette!!
slideSpeed=20 // senza virgolette!! Tempo di apertura e chiusura menu
waitTime=1000; // senza virgolette!! Tempo di visibilità del menu da quando si toglie da sopra il mouse
hdrFontFamily="Palatino Linotype"; // Colore font titolo orizzontale [ ..:: MENU ::.. ]
hdrFontSize="2"; // Misura font titolo orizzontale [ ..:: MENU ::.. ]
hdrFontColor="#585444"; // Colore font titolo orizzontale [ ..:: MENU ::.. ]
hdrBGColor="#CC9966"; // Colore sfondo cella titolo orizzontale [ ..:: MENU ::.. ]
hdrAlign="center"; // Posizione testo cella titolo orizzontale [ ..:: MENU ::.. ]
hdrVAlign="center"; // Posizione contenuto cella titolo orizzontale [ ..:: MENU ::.. ]
hdrHeight="30"; // Altezza cella titolo orizzontale [ ..:: MENU ::.. ]
linkFontFamily="Palatino Linotype"; // Font per i link
linkFontSize="1"; // Misura font per i link
linkBGColor="CC9966"; // Colore font per i link
linkOverBGColor="#dfa159"; // Colore cella link al passaggio del mouse [ hover ]
linkTarget="_blank"; // Indicazione per apertura delle pagine
linkAlign="center"; // Posizione dei link nella cella
barBGColor="#CC9966"; // Colore sfondo cella titolo verticale [ **** MENU **** ]
barFontFamily="Palatino Linotype"; // Font titolo verticale [ **** MENU **** ]
barFontSize="2"; // Misura font titolo verticale [ **** MENU **** ]
barFontColor="#585444"; // Colore font titolo verticale [ **** MENU **** ]
barVAlign="center"; // Posizione contenuto cella titolo verticale [ **** MENU **** ]
barWidth=20; // senza virgolette!! Larghezza cella titolo verticale [ **** MENU **** ]

Dopo questo blocco inizia la parte "motore" ovvero i parametri che lo fanno funzionare,
a circa metà di questa parte troviamo l'unico parametro che necessita di personalizzazioni,
come vi dicevo sopra, serve a dare lo style alla table che contiene il menu,
la misura, tipo e il colore per il bordo e gli spazi delle celle, tra bordi e i contenuti

document.write('<table style="border:5px solid #f8f2e2" cellpadding="3" cellspacing="3" 

Secondo blocco da personalizzare

In questa parte di codice troviamo il parametro, il primo evidenziato,
per personalizzare la posizione del menu, scroll con la pagina o fisso in alto

YOffset=20; // senza virgolette!! Posizione del menu rispetto al top della pagina
staticYOffset=20; // senza virgolette!!
slideSpeed=20 // senza virgolette!! Tempo di apertura e chiusura menu
waitTime=500; // senza virgolette!! Tempo di visibilità del menu da quando si toglie da sopra il mouse
menuBGColor="#f0e4ca"; // Colore sfondo menu
menuIsStatic="yes"; // Menu che segue lo scroll pagina. Cambiare in "no" se si preferisce statico
menuWidth=140; // senza virgolette!! Aumentare il valore con multipli di 10
hdrFontFamily="Palatino Linotype"; // Colore font titolo orizzontale [ ..:: MENU ::.. ]
hdrFontSize="2"; // Misura font titolo orizzontale [ ..:: MENU ::.. ]
hdrFontColor="#585444"; // Colore font titolo orizzontale [ ..:: MENU ::.. ]
hdrBGColor="#f0e4ca"; // Colore sfondo cella titolo orizzontale [ ..:: MENU ::.. ]
hdrAlign="center"; // Posizione testo cella titolo orizzontale [ ..:: MENU ::.. ]
hdrVAlign="center"; // Posizione contenuto cella titolo orizzontale [ ..:: MENU ::.. ]
hdrHeight="30"; // Altezza cella titolo orizzontale [ ..:: MENU ::.. ]
linkFontFamily="Palatino Linotype"; // Font per i link
linkFontSize="2"; // Misura font per i link
linkBGColor="#f0e4ca"; // Colore font per i link
linkOverBGColor="#e9dabd";// Colore cella link al passaggio del mouse [hover]
linkTarget="_blank"; // Indicazione per apertura delle pagine
linkAlign="center"; // Posizione dei link nella cella
barBGColor="#f0e4ca"; // Colore sfondo cella titolo verticale [ **** MENU **** ]
barFontFamily="Palatino Linotype"; // Font titolo verticale [ **** MENU **** ]
barFontSize="2"; // Misura font titolo verticale [ **** MENU **** ]
barFontColor="#585444"; // Colore font titolo verticale [ **** MENU **** ]
barVAlign="center";// Posizione contenuto cella titolo verticale [ **** MENU **** ]
barWidth=40; // senza virgolette!! Larghezza cella titolo verticale [ **** MENU **** ]

Ultimo blocco, inserire i link


Nell'ultima parte del codice troviamo il blocco in cui inserire i link, anche in questo caso occorre
fare attenzione ai vari pezzi, nella prima riga inseriamo i due titoli scelti per il menu, nel mio esempio
ho scritto ..:: MENU ::.. per il titolo in orizzontale e ***MENU*** per quello in verticale,
regolatevi per l0 spazio che deve occupare in base a quanto sarà grande il vostro menu.

Inserite quindi i vari link, saranno richiamatati in javascript per cui non saranno i classi link,
si inizierà dal nome della pagina, l'indirizzo web (url) e si potrà impostare dove deve essere aperta,
cioè se volete che si apra direttamente, in una nuova pagina o eventualmente in un frame

Lo script è impostato affinché le pagine si aprano in una nuova finestra, _blank
ho evidenziato questo parametro nei due blocchi per le personalizzazioni, se volete che si aprano
nella stessa finestra sostituite con _self se invece devono aprirsi in un iframe sostituite
con parent e nel parametro "Opzione traghet" scrivete il nome del iframe "nome iframe"

Per questa ultima opzione,(parent) nel caso dovete far aprire una o più pagina in una nuova
finestra lasciate il parametro per l'opzione vuoto ma non eliminate le virgolette,

addItem("Nome Link", "https://url pagina", "");

Inserisci qui i tuoi link
*/
startMenu("Nome menu", "Nome menu")
addItem("Nome Link", "https://url pagina", "Opzione target");
addItem("Nome Link", "https://url pagina", "Opzione target");
addItem("Nome Link", "https://url pagina", "Opzione target");
addItem("Nome Link", "https://url pagina", "Opzione target");
endMenu()

# Prelevate qui il codice

Per comodità, mia di spazio e vostra in quanto più semplice, scaricate
qui lo script, scegliendo tra queste due soluzioni:

- file txt -> Menu laterale scomparsa vi basterà aprire il file, copiare tutto il codice
e incollarlo tra i tag <head> e </head> della pagina;

- file.js -> Menu laterale scomparsa pronto da poter richiamare nelle pagine, affinché siano
più leggere e più facili da gestire, opzione che ovviamente vi consiglio.
Caricate il file nel sito e richiamate nella pagina prima del tag </head> in questo modo:

<script src="https://tuosito/menu_laterale_scomparsa.js" type="text/javascript"></script>

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^
60%
Voti totali: 2
Rating... 4





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


~ Pagina visitata da 2951 utenti


 H: 
Felice Estate e ...buon weekend!





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..




Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Elise
08/09/2024 18:17:18
Ciao Penelope, sono ancora qui, mi piace il tuo Countdown di Halloween e l'ho inserito nel mio blog.Grazie , un abbraccione e buona domenica!!!Baci Elise
ೡ Scritto in... Countdown stagioni e feste
 
Elise
05/09/2024 17:06:43
Ciao Penelope, ho prelevato due adottini "amo l'Inverno", come sempre sei bravissima!!!!!Grazie un abbraccione e buona serataElise
ೡ Scritto in... I love Winter...
 
DanyGraphic
31/08/2024 05:19:19
Sono passata per un saluto ....è sempre un piacere navigare nel tuo sito. Buon fine settimana
ೡ Scritto in... Home
 
Elise
02/08/2024 09:42:01
Ciao Penelope, sono contenta che ti ricordi di me, ti dirò anche io sto poco al PC è un caldo veramente esagerato!!! Continuerò a seguirti , troppo belle le tue creazioni.Grazie un abbraccione e buona estate anche a te
ೡ Scritto in... Home
 
Elise
20/07/2024 16:43:26
Ciao Penelope, ho preso un tuo bellissimo bottone top Home, spero non ti dispiaccia.Ti ringrazio.Un abbraccioneElise
ೡ Scritto in... Bottoni top page tag e pixel
 
Elise
19/07/2024 12:02:47
Ciao Penelope, non so se ti ricordi di me, io è un pò che non vado sul blog, volevo solo dirti che che ho preso la stagione estate, sei bravissima Grazie e alla prossimaElise
ೡ Scritto in... Stagione attuale vintage...
 
Grazia
18/07/2024 19:42:31
Ciao Penelope carissima, sono passata per un salutino ♥ Qui sempre bellissimo :) Sto lavorando al sitino in HTML nuovo ma fa caldissimo e mi sciolgo davanti al pc. Spero di metterlo online presto, tra i lavori handmade e la scrittura è arduo ma ci tengo a ritornare più attiva online♥ Smackete e buonissima estate a te ed ai ragazzi, dolce amica storica :D
ೡ Scritto in... Home
 
Miryam
07/06/2024 15:32:30
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!
ೡ Scritto in... Home
 
Sabry
27/05/2024 09:09:32
Grazie per tutto, ti seguo da anni ormai e ammiro molto il tuo lavoro ... ho preso con piacere dei tuoi gadget ♥
ೡ ...commentario
 
Lu
23/05/2024 20:47:56
Grazie mille per il suggerimento, cara Penelope! Ci proverò finché non ci riuscirò. Quando sarà pronto te lo mostrerò.
ೡ Scritto in... Home