 |
|
|||
Sezione del telaio dedicata alla realizzazione e |
||||
|
|
|||
..:: 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
Il codice dello script è composto da quattro blocchi, due principali in cui fare le personalizzazioni |
Come procedere...| 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,
_blankho 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 sostituitecon
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, scaricatequi 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 ^_^
|
.gif){kind=small}
Commentario...
|
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^ |
~ Pagina visitata da 3248 utenti
H:
Felice Estate
!
Segui il telaio su Facebook
Privacy Policy Cookie Policy
* Info sezione...
Mi farebbe molto piacere la condivisionedei 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 ::..
- Box effetto rilievo
- Basi CSS pagina web
- CSS elemento div
- CSS div struttura sito
- CSS sito responsive Flexbox
- CSS table
- CSS table struttura sito
- CSS file esterno
- Cbox - Chat per brevi messaggi
- Cbox - Theme editor
- Cursore
- Font personalizzato nel sito...
- Iframe per accessori e gadget
- Iframe per sito web
- Immagini
- Ipertesto - Link
- Link style
- Link ancora o interno
- Marquee
- Marquee speciali
- Marquee javascript
- Sfondo pagina
- Table basi e style
- Table sfondo
- Table scroll
- Table lavori
- Testo, font e personalizzazioni
- Textarea
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
Spazio web...
Realizzare e gestire un sito web
nell'hosting free più famoso...
Materiale grafico
Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!
I vostri messaggi...
|
|
Luca 
! 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
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 1 anno, 9 mesi, 23 giorni ೡ Copyright © Penelope 2008 - 2025 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |