Ho scritto questo breve codice con l’esigenza di avere una barra di navigazione con dei menu a tendina su alcune voci .
Ho isolato ogni voce della barra di navigazione a cui concatenare il menu con dei div
<div = ‘idVoce1′ >
<a href=”#” onclick=”showMnu(’menu1′)”>Voce 1</a>
<div>
<a href=”#”>Voce 2</a>
<div id= ‘idVoce3′ >
<a href=”#” onclick=”showMnu(’menu3′)”>Voce 3</a>
</div>
ho pensato di “appiccicarci” un layer gestibile con un foglio di stile e una funzione che fa nacondere o apparire il menu composto da un insieme di links (ma ci si possono mettere anche immagini).
Quando la pagina viene caricata verranno , per ogni voce , creati dei layer inizialmente nascosti .
Quando l’utente fa click sulla voce verrà mostrato il layer e se l’utente non sposta il mouse sul menu visualizzato, dopo un secondo verra’ nascosto.
Potete vedere un demo del menu a questo indirizzo dove , visualizzando il codice sorgente , potete capire come in pratica ho implementato lo script , mentre potete scaricarlo in formato zip a quest’ Indirizzo.
Lo script è composto da due files: navbar.js e navbar.css, il primo contiene la classe GrpPopUpMenu responsabile della corretta visualizzazione del menu , il secondo file e’ un foglio di stile che raccoglie i layer all’interno dei quali sono visualizzati tutti i links del menu , questi devono essere passati come terzo argomento al momento dell’inizializzazione della classe GrpPopUpMenu.
LA CLASSE GrpPopUpMenu
Oltre al costruttore ha tre metodi :
grpMenuShow
grpCreateMenu
grpAddCss
Il costruttore accetta tre paramenti
1) id dell’oggetto (che puo essere un span o un div presente e visibile nella pagina ) dove verra’ aggiunto il layer del menu
2) id del layer del menu (creato dinamicamente e inizialmente nascosto)
3) array dei links che verranno visualizzati all’interno del menu
Il metodo grpCreateMenu:
Crea dinamicamente il layer del menu “attaccandolo” all’oggetto passato come primo parametro al costruttore della classe
var arrayList = new Array(”Link1“, “Link 2“);
var menu = GrpPopUpMenu(’obj’,'layer1′,arrayList);
L’ oggetto visibile all’inizio a cui concatenare il layer del menu deve essere presente nel file html
<div id=”obj” onclick=”menu.grpMenuShow(’layer1′)”>File</div>
il menu creato dinamicamente dalla funzione grpCreateMenu chiamata nel costruttore, sara inizialmente invisibile e gestito dalla funzione grpMenuShow
<div id=”layer1″>
array dei links passato come secondo parametro al costruttore
<a href=”#”>Link 1</a><a href=”#”>Link 2</a>
</div>
Il metodo grpMenuShow
Mostra o nasconde il layer creato dinamicamente dalla funzione precedente.
Ha un solo parametro e cioe’ l’id del layer stesso.
Le proprieta’ del layer devono essere presenti nel file navbar.css oppure all’interno del file html stesso
#layer1 {
position: absolute;
background-color: #FD9558;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
font-family: Helvetica,Arial, sans-serif ;
font-size: 12px;
font-style: normal;
width:190px;
line-height: 19px;
margin-left:2px;
left:391px;
}
#layer1 a:hover {
background-color:#D8D8D8;
}
#layer1 a {
text-decoration: none;
padding-left: 6px;
padding-right: 6px;
color: black;
display: block;
vertical-align: middle;
text-align:left;
}
Il metodo grpAddCss
puo’ essere utilizzato per importare un foglio di stile formato .css
Postato in: Web editing, javascript
