Per costruire un menu verticale servono due elementi principali da unserire in una pagina HTML, che sono::
- un file javascript che ho denominato SpryMenuV.js . Il file provvede al funzionamento del menu verticale e dei sottomenu a scomparsa. Potete scaricare questo file cliccando il link con il tasto destro e scegliendo "salva con nome" . Salvatelo in una directory dove poi lo potete trovare e richiamare facilmente. Questo file si inserisce nella pagina web con l'istruzione
<script src="../scripts/SpryMenuBar.js" type="text/javascript"></script>
- un foglio di stile CSS che ho denominato SpMenubarV. css Il file definisce le caratteristiche visive del menu. Potete scaricarlo cliccando il link con il tasto destro e scegliendo "salva con nome" e salvarlo in una directory dove lo potrete poi ritrovare facilmente. Questo file si inserisce nella pagina web con l'istruzione
<link href="SpMenuBarV.css" rel="stylesheet" type="text/css" />
Entrambi i file sono abbastanza lunghi, conviene spiegare bene l'uso
solamente il file che si deve modificare per cambiare aspetto al menu, cioe il file CSS (foglio di stile, perche quell'altro non deve essere modificato e non ne ha bisogno.
Nel caso aveste bisogno di ricordarvi cosa sono le Directory, come si usano, e come si struttura un sito, consiglio di andare prima a vedervi la pagina delle relative spiegazioni (clicca).
Un altro elemento necessario è ovviamente il menu stesso, cioè bisogna aver già definito qual è la lista degli elementi del menu e dei sottomenu di ogni elemento con i collegamenti ai files da aprire compresi.. Nella pagina del nostro esempio mettiamo questo schema del menu con i relativi titoli, sempre come esempio, che ognuno poi potrà cambiare:
| Minestre | > | Paste asciutte | Minestre | |||
| Carne | > | Pollo | Manzo | |||
| Mare | > | Azzurro | Bianco | Molluschi | ||
| Verdure crude | ||||||
| Verdure cotte | ||||||
| Bevande | > | gassate | vini | birra |
SCRIVERE UN MENU VERTICALE
Il menu si scrive come 'unordered list' con i seguenti elementi
- <ul> che sono le iniziali di 'unordered list' che è inizio della lista, e </ul> che indica la fine della lista. la classe è "MenubarVertical"
- <li> che sono le prime due lettere dell'elemento 'list' e indicano l'inizio di una riga della lista e </li>, che indica la fine dalla riga della lista
- Per iniziare un sottmenu si apre una riga <li> con classe MenuBarItemSubmenu" seguita da una sottolista <ul>con tante righe <li> ........</li> quante sono le voci del sottomenu. al termina delle sottolista la si chiude con </ul>
È necessario attribuire la classe del menu. La classe del menu si chiama MenuBarVertical e le sue proprietà si trovano nel foglio di stile SpMenuBarV.css Dunque scriveremo le seguenti istruzioni, con riferimento al menu di cui sopra::
|
Scriviamo la pagina per provare il menu ricordando che è fondamentale verificare che l'indirizzo dei files a cui ci si riferisce sia corretto, relativamente alla directory in cui si trova il file che contiene il menu
|
Proviamo adesso. Facciamo un nuovo file e incolliamo il testo in colore blu. Salviamo con estensione htm nella directori che avevamo preparato e apriamolo nel browser IE o altro.