Pagina aggiornata... Domenica, 07 gennaio 2024 * Tempo di caricamento 0.85 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 3476 utenti


 H: 
Buon Autunno e ...buona domenica!





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

Natale menu
..Natale menu..

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

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

ೡPenelope ♥
04/12/2025 02:20:20
Cara filod'arianna sistemato il link un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 11:57:26
Ti devo chiedere una gentilezza Penelope ^_^ ho modificato il dominio, potresti correggere il link del mio banner da librandosi.forumfree.it - a librandositralepagine.forumfree.it ? 🙏
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 10:40:55
Ciao carissima , ho preso un decoro per l'home natalizia ♥
ೡ Scritto in... Decori pagine Natale
 
ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi
 
Maleah
26/11/2025 13:58:21
Bonjour de France,Je viens de découvrir ton superbe blog et suis très admirative pour l'excellent travail que tu fais.Je ne sais pas si tu acceptes de modifier des blogspots et tente ma demande d'aide :Je suis une créatrice depuis des années déjà mais j'avoue je suis NULLE quant à la mise en place " design" de mon blog.Accepterais-tu de me réaliser un design pour Noël ?Cela me comblerait de joie, mais si tu ne peux pas je comprendrais parfaitement ta décision.Merci de ta réponse & encore UN IMMENSE BRAVO pour tes diverses créations.Amitié virtuelle.Maleah-Sunsunmaleah@gmail.com
ೡ Scritto in... html e script Tutorial...
 
ೡPenelope ♥
13/11/2025 20:28:01
Grazie infinite cara Dany
ೡ Scritto in... Romantici vintage
 
DanyGraphic
12/11/2025 22:56:52
Ciao Penelope i template sono carinissimi come tutti i tuoi lavori d'altra parte. Ti faccio tanti complimenti. Un abbraccio grande, dolce ♥♥
ೡ Scritto in... Romantici vintage
 
ೡPenelope ♥
12/11/2025 22:27:17
Ciao Elżbieta ti ringrazio per il complimento, per la traduzione puoi usare Google Un abbraccio
ೡ Scritto in... Home