 |
|
|||
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 2911 utenti
H:
Felice Estate
e ...buon sabato!
Segui il telaio su Facebook
* 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...
|
|
|
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 10 mesi e 12 giorni ೡ Copyright © Penelope 2008 - 2024 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |