Pagina aggiornata... Lunedì, 08 Dicembre 2025 * Tempo di caricamento 0.12 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 ^_^
20%
Voti totali: 1
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 2736 utenti


 H: 
Buon Inverno !





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

Sari
18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ೡ Scritto in... Home
 
filod'arianna
14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ೡ Scritto in... Countdown stagioni e feste
 
Elise
13/12/2025 18:12:05
Ciao carissima Penelope, quante meravigliose creazioni di Natale che hai realizzato, ne hopresa una, il caminetto con le calze, STUPENDO!!!!!Grazie tesoro un abbraccio grande e Buone Feste a te e tutta la tua famiglia.Elise
ೡ Scritto in... Decori pagine Natale
 
Grazia
06/12/2025 16:01:26
Ciao carissima Penelope💓 Wow bellissime le tue novità natalizie! A me tutto ok, ti ringrazio di essere passata nel Taccuino 🥰 Lascio un fortissimo abbraccio a te e ai ragazzi. A presto carissima 💖
ೡ Scritto in... Home
 
ೡ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