Pagina aggiornata... Domenica, 07 gennaio 2024 * Tempo di caricamento 1.00 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 ^_^
30%
Voti totali: 2
Rating... 2





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 3383 utenti


 H: 
Buon Autunno !





Segui il telaio su Facebook

Privacy Policy Cookie Policy

* 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...

Veronica
10/10/2025 16:10:17
Ciao ne ho preso uno x il mio blog
ೡ Scritto in... Countdown stagioni e feste
 
Giusyna
09/10/2025 07:09:17
ciao cara vorrei qualche volta se ti e' possibile fare due chiacchiere su facebook se hai piacere mi dici in che orario ci sei?grazie Giusyna
ೡ Scritto in... Home
 
Grazia
30/09/2025 17:38:43
Ciao carissima Penelope, un forte abbraccio e buon autunno, sempre bellissimo qui :)
ೡ Scritto in... Home
 
filod'arianna
30/09/2025 08:23:45
Ciao Penelope! con un discreto ritardo, voglio ringraziarti per aver ricambiato il banner.. spero vada tutto bene, a presto
ೡ Scritto in... *Amici del telaio...*
 
Veronica
27/09/2025 14:42:47
Ciao non so dove scriverti che o preso il tuo banner x il mio blog volevo avvisarti buona serata
ೡ Scritto in... Contatti
 
Giusyna
17/08/2025 17:52:34
Ciao a Penelope e' bellissimo qui complimenti ho aggiunto il tuo sito ai link amici spero ti faccia piacereun abbraccio e buone ferie
ೡ Scritto in... *Amici del telaio...*
 
Luca
04/06/2025 22:41:43
Ciao
ೡ Scritto in... html e script Tutorial...
 
filod'arianna
01/06/2025 09:15:59
Ciao Penelope ! Torno qui per prelevare un banner 88x31, lo inserisco nel mio forum, si troverà nello spazio "Amici non affiliati" dopo le sezioni, in fondo al forum. Ho inserito anche l'iniziativa "Help Donna" che si troverà sempre dopo le sezioni, nello spazio a lei dedicatole.Un abbraccio, a presto:-)Il mio forum[Link]
ೡ Scritto in... Banner link del telaio ^_^
 
Cleo
22/05/2025 07:05:05
ciao tesoro auguri per ieri ti aspetto qui [Link]
ೡ Scritto in... Home
 
olga
05/05/2025 20:37:45
prelevato widget post e commenti.Grazie
ೡ Scritto in... Home