Come promesso nell’ultimo post (ormai datato), oggi pubblico una versione modificata del menù proposto da Gianluca Troiani nel suo libro: ho praticamente sostituito lo script javascript che controlla l’apertura e chiusura delle tendine con una versione realizzata con jQuery.
Lo script può essere applicato sia alla versione con menù orizzontale, che per quella in verticale che ho modificato nel post precedente.
Il css e l’html della pagina è identico alla versione originale, ho solo aggiunto il seguente codice nel tag :
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”scripts/jquery.onfocus.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#menuNavigazione’).onfocus();
});
</script>
che si occupa di caricare la libreria jQuery e jquery.onfocus.js che ho sviluppato per gestire l’apertura/chiusura del menù.
Il javascript $(‘#menuNavigazione’).onfocus() si occupa di assegnare alla lista (ul) con id menuNavigazione la funzione onfocus.
La funzione onfocus è la seguente:
(function() {
$.fn.onfocus = function(){$(this).find(“ul”).removeClass().addClass(“subMenu-off”);
$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});
};
})(jQuery);
Passo 1:
$(this).find(“ul”).removeClass().addClass(“subMenu-off”);
associa a tutte le sottoliste dell’oggetto this lo stile subMenu-off per nascondere i sottomenù; questa procedura è migliore rispetto a quella proposta da Gianluca, perché jQuery esegue il javascript mentre la pagina si sta caricando, mentre l’altra versione attende che venga completato il caricamento di tutto l’HTML. In questo modo si evita uno sfarfallio iniziale dei sottomenù che ho notato in firefox sotto linux o su PC più datati.
Passo 2:
$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});
se si passa con il mouse (o al focus) sopra un tag li della lista rimuove lo stile subMenu-off e aggiunge subMenu-on ai tag ul presenti all’interno di li.
Passo 3:
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});
esegue l’operazione opposta del passo 2: quando si verifica l’evento mouseout, riassegna ai tag ul presenti all’interno di li la classe subMenu-off.
In jquery_menu_orizzontale.zip l’esempio completo.